12 | {{ content }}
13 |
14 |
15 |
20 |
21 | {{ content }}
22 |
23 |
24 |
5 |
8 |
53 |
--------------------------------------------------------------------------------
/_layouts/component-detail.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 | {% include breadcrumbs.html %}
6 |
7 | {% include page-header.html %}
8 |
9 |
10 |
11 |
154 |
155 |
156 |
157 |
206 |
207 |
208 |
209 |
228 |
--------------------------------------------------------------------------------
/_layouts/component-viewall.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 | {% include breadcrumbs.html %}
6 |
7 | {% include page-header.html %}
8 |
9 |
6 |
7 | {% include page-header.html %}
8 |
9 |
10 |
11 |
16 |
--------------------------------------------------------------------------------
/_posts/2017-05-13-initial-release.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Initial Release"
4 | date: 2017-05-13 02:00:00 -0400
5 | categories: update
6 | ---
7 |
8 | This is the blog post description announcing the initial release of the design system. Here you can talk about what contents the design system contains, where to find things, who's involved with the system, and so on.
9 |
--------------------------------------------------------------------------------
/_posts/2017-05-14-v1.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Version 1.0"
4 | date: 2017-05-14 02:00:00 -0400
5 | categories: update
6 | ---
7 |
8 | Here's the post announcing the 1.0 release of the design system. Here you would talk about what features have been added, announce any pilot projects that have been built using the design system, who's involved, and so on.
9 |
10 | - Here's a
11 | - Bulleted list
12 | - Of new features
13 |
--------------------------------------------------------------------------------
/_sass/abstracts/_mixins.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #MIXINS
3 | \*------------------------------------*/
4 |
--------------------------------------------------------------------------------
/_sass/abstracts/_variables.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #VARIABLES
3 | \*------------------------------------*/
4 |
5 | /**
6 | * CONTENTS
7 | *
8 | * COLORS
9 | * Brand Colors...............Globally-available variables and config
10 | * Neutral Colors.............Grayscale colors, including white and black
11 | *
12 | * TYPOGRAPHY
13 | * Font Families..............The fonts used in the design system
14 | * Sizing.....................Font sizing
15 | *
16 | * LAYOUT
17 | * Max-widths.................Maximum layout container width
18 | *
19 |
20 | * SPACING
21 | * Spacing defaults...........Spacing between elements
22 | *
23 | * BORDERS
24 | * Border Width...............Border thicknesses
25 | * Border Radius..............Border radius definitions
26 | *
27 | * ANIMATION
28 | * Animation Speed............Transition/animation speed variables
29 | * Animation easing...........Easing variables
30 | *
31 | * BREAKPOINTS
32 | * Breakpoints................Global breakpoint definitions
33 | */
34 |
35 | /*------------------------------------*\
36 | #COLORS
37 | \*------------------------------------*/
38 |
39 | /**
40 | * Brand Colors
41 | * 1) Main identifiable colors involved in creating the UI
42 | * Feel free to add your brand's color palette here.
43 | */
44 |
45 | /**
46 | * Neutral Colors
47 | * 1) Neutral colors are grayscale values used throughout the application
48 | */
49 | $color-white: #fff;
50 | $color-gray-02: #f9f9f9;
51 | $color-gray-07: #eee;
52 | $color-gray-13: #ddd;
53 | $color-gray-27: #bbb;
54 | $color-gray-50: #808080;
55 | $color-gray-60: #666;
56 | $color-gray-73: #444;
57 | $color-gray-93: #131313;
58 | $color-black: #000;
59 |
60 | /**
61 | * Utility Colors
62 | * 1) Utility colors are colors used to provide feedback, such as alert messages,
63 | * form validation, etc.
64 | */
65 | $color-utility-info: #0192d0;
66 | $color-utility-info-light: #d3f2ff;
67 | $color-utility-error: #b12a0b;
68 | $color-utility-error-light: #fdded8;
69 | $color-utility-success: #03804d;
70 | $color-utility-success-light: #d4f3e6;
71 | $color-utility-warning: #a59b15;
72 | $color-utility-warning-light: #fffecf;
73 |
74 |
75 |
76 |
77 |
78 | /*------------------------------------*\
79 | #TYPOGRAPHY
80 | \*------------------------------------*/
81 |
82 | /**
83 | * Font Family
84 | */
85 | $font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
86 |
87 | /**
88 | * Font Sizing
89 | */
90 | $font-size-tiny: 0.65rem;
91 | $font-size-sm: 0.75rem;
92 | $font-size-sm-2: 0.85rem;
93 | $font-size-med: 1rem;
94 | $font-size-med-2: 1.2rem;
95 | $font-size-large: 1.4375rem;
96 |
97 |
98 |
99 |
100 |
101 | /*------------------------------------*\
102 | #LAYOUT
103 | \*------------------------------------*/
104 |
105 | /**
106 | * Max Width
107 | */
108 | $l-max-width: 60rem;
109 | $l-max-width-narrow: 36rem;
110 |
111 |
112 |
113 |
114 |
115 | /*------------------------------------*\
116 | #SPACING
117 | \*------------------------------------*/
118 |
119 | /**
120 | * Spacing and offsets
121 | * 1) Used to space grids and body padding
122 | * 2) The width of the bullets, used to align list content.
123 | */
124 |
125 | $space: 1rem;
126 |
127 | $pad-compact: 0.3rem;
128 | $pad-normal: 1rem; /* 1 */
129 | $pad-comfortable: 1.4rem;
130 |
131 | $space-bullet-offset: 1.6rem; /* 2 */
132 |
133 |
134 |
135 |
136 |
137 | /*------------------------------------*\
138 | #BORDERS
139 | \*------------------------------------*/
140 |
141 | /**
142 | * Border variables
143 | */
144 | $border-radius: 4px;
145 |
146 |
147 |
148 |
149 |
150 | /*------------------------------------*\
151 | #ANIMATION
152 | \*------------------------------------*/
153 |
154 | /**
155 | * Transition Speed
156 | */
157 | $fade-quick: 0.15s;
158 | $fade-long: 0.4s;
159 | $anim-ease: ease-in-out;
160 |
161 |
162 |
163 |
164 |
165 | /*------------------------------------*\
166 | #BREAKPOINTS
167 | \*------------------------------------*/
168 |
169 | /**
170 | * Breakpoints used in media queries
171 | */
172 | $bp-small: 24em;
173 | $bp-small-2: 29.75em;
174 | $bp-small-3: 39.8em;
175 | $bp-med: 46.8em;
176 | $bp-med-2: 48em;
177 | $bp-large: 50em;
178 | $bp-large-2: 56em;
179 | $bp-xl: 62em;
180 |
--------------------------------------------------------------------------------
/_sass/base/_body.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #BODY
3 | \*------------------------------------*/
4 |
5 | /**
6 | * HTML base styles
7 | */
8 | html {
9 | height: 100%;
10 | }
11 |
12 | /**
13 | * Body base styles
14 | */
15 | body {
16 | background: $color-white;
17 | font: 100%/1.5 $font;
18 | -webkit-text-size-adjust: 100%;
19 | color: $color-gray-73;
20 | display: flex;
21 | flex-direction: column;
22 | height: 100%;
23 | }
24 |
--------------------------------------------------------------------------------
/_sass/base/_buttons.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #BUTTONS
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Button and submit inputs reset
7 | * 1) These should be styled using c-btn
8 | */
9 | button, input[type=submit] {
10 | cursor: pointer;
11 |
12 | &:focus {
13 | outline: 1px solid $color-gray-27;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/_sass/base/_forms.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #FORMS
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) Form element base styles
7 | */
8 |
9 | /**
10 | * Input placeholder text base styles
11 | */
12 | ::-webkit-input-placeholder {
13 | color: $color-gray-27;
14 | }
15 |
16 | ::-moz-placeholder { /* Firefox 19+ */
17 | color: $color-gray-27;
18 | }
19 |
20 | :-ms-input-placeholder {
21 | color: $color-gray-27;
22 | }
23 |
24 | /**
25 | * Fieldset base styles
26 | */
27 | fieldset {
28 | border: 0;
29 | padding: 0;
30 | margin: 0;
31 | }
32 |
33 | /**
34 | * Legend base styles
35 | */
36 | legend {
37 | text-transform: lowercase;
38 | margin-bottom: 0.25em;
39 | }
40 |
41 | /**
42 | * Label base styles
43 | */
44 | label {
45 | display: block;
46 | padding-bottom: 0.25rem;
47 | }
48 |
49 | /**
50 | * Add font size 100% of form element and margin 0 to these elements
51 | */
52 | button, input, select, textarea {
53 | font-family: inherit;
54 | font-size: 100%;
55 | margin: 0;
56 | }
57 |
58 | /**
59 | * Text area base styles
60 | */
61 | textarea {
62 | resize: none;
63 | }
64 |
65 | /**
66 | * Input and text area base styles
67 | */
68 | input, textarea {
69 | width: 100%;
70 | border: 1px solid $color-gray-50;
71 | padding: 0.5rem 0.65rem;
72 | }
73 |
74 | /**
75 | * Remove webkit appearance styles from these elements
76 | */
77 | input[type=text], input[type=search], input[type=url], input[type=number], textarea {
78 | -webkit-appearance: none;
79 | }
80 |
81 | /**
82 | * Checkbox and radio button base styles
83 | */
84 | input[type="checkbox"],
85 | input[type="radio"] {
86 | width: auto;
87 | margin-right: 0.3em;
88 | }
89 |
90 | /**
91 | * Search input base styles
92 | */
93 | input[type="search"] {
94 | -webkit-appearance: none;
95 | border-radius: 0;
96 | }
97 |
98 | /**
99 | * Remove webkit appearance styles from search input cancel and decoration
100 | */
101 | input[type="search"]::-webkit-search-cancel-button,
102 | input[type="search"]::-webkit-search-decoration {
103 | -webkit-appearance: none;
104 | }
105 |
106 | /**
107 | * Select
108 | * 1) Remove default styling
109 | */
110 | select {
111 | display: block;
112 | font-size: $font-size-sm-2;
113 | height: 2rem;
114 | width: 100%;
115 | border: 1px solid $color-gray-13;
116 | padding: 0.3rem;
117 | border-radius: $border-radius;
118 | background: $color-white;
119 | color: $color-gray-73;
120 | -moz-appearance: none;
121 | -webkit-appearance: none;
122 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgMTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDExOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzgwODA4MCI+PHBhdGggZD0iTTIsNGw0LDRsNC00SDJ6Ii8+PC9zdmc+);
123 | background-position: calc(100% - 0.3rem) 50%;
124 | background-size: 16px 16px;
125 | background-repeat: no-repeat;
126 |
127 | &:focus {
128 | outline: 0;
129 | border-color: $color-gray-50;
130 | }
131 |
132 | /**
133 | * 1) Remove IE select arrow
134 | */
135 | &::-ms-expand { /* 1 */
136 | display: none;
137 | }
138 |
139 | /**
140 | * 1) Style IE value selector
141 | */
142 | &::-ms-value { /* 1 */
143 | background: transparent;
144 | color: $color-gray-50;
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/_sass/base/_headings.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #HEADINGS
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Heading 1 base styles
7 | */
8 | h1 {
9 | font-size: 2.25rem;
10 | line-height: 1;
11 | word-wrap: break-word;
12 |
13 | @media all and (min-width: $bp-med) {
14 | font-size: 2.75rem;
15 | }
16 | }
17 |
18 | /**
19 | * Heading 2 base styles
20 | */
21 | h2 {
22 | font-size: 1.6em;
23 | line-height: 1.2;
24 | letter-spacing: -0.02rem;
25 | margin-bottom: 0.5rem;
26 | word-wrap: break-word;
27 | }
28 |
29 | /**
30 | * Heading 3 base styles
31 | */
32 | h3 {
33 | font-size: 1.2em;
34 | line-height: 1.2;
35 | margin-bottom: 0.3rem;
36 | word-wrap: break-word;
37 | }
38 |
--------------------------------------------------------------------------------
/_sass/base/_links.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #LINKS
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Link base styles
7 | */
8 | a {
9 | color: $color-gray-73;
10 | text-decoration: none;
11 | outline: 0;
12 | transition: color $fade-quick ease-out, box-shadow $fade-quick ease-out;
13 |
14 | &:hover, &:focus {
15 | color: $color-gray-50;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/_sass/base/_lists.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #LISTS
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) List base styles
7 | */
8 |
9 | /**
10 | * Remove list styles from unordered and ordered lists
11 | */
12 | ol, ul {
13 | list-style: none;
14 | }
15 |
--------------------------------------------------------------------------------
/_sass/base/_main.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #MAIN ELEMENT
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Main element
7 | */
8 | [role=main] {
9 | display: block;
10 | flex: 1 0 auto;
11 | padding: 1rem;
12 |
13 | @media all and (min-width: $bp-xl) {
14 | padding-top: 1.5rem;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/_sass/base/_media.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #MEDIA
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Responsive image styling
7 | * 1) Allows for images to flex with varying screen size
8 | */
9 | img {
10 | max-width: 100%;
11 | height: auto;
12 | }
13 |
--------------------------------------------------------------------------------
/_sass/base/_reset.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #RESET
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
7 | */
8 | * {
9 | box-sizing: border-box;
10 | }
11 |
12 | /**
13 | * 1) Zero out margins and padding for elements
14 | */
15 | html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure {
16 | margin: 0;
17 | padding: 0;
18 | }
19 |
20 | /**
21 | * 1) Set HTML5 elements to display: block
22 | */
23 | header, footer, nav, section, article, hgroup, figure {
24 | display: block;
25 | }
26 |
--------------------------------------------------------------------------------
/_sass/base/_tables.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #TABLES
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Table
7 | */
8 | table {
9 | border-collapse: collapse;
10 | border-spacing: 0;
11 | width: 100%;
12 | }
13 |
14 | /**
15 | * Table header cell
16 | */
17 | th {
18 | text-align: left;
19 | }
20 |
21 | /**
22 | * Table row
23 | */
24 | tr {
25 | vertical-align: top;
26 | }
27 |
--------------------------------------------------------------------------------
/_sass/base/_text.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #TEXT
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Paragraph base styles
7 | */
8 | p {
9 | margin-bottom: $space;
10 | }
11 |
12 | /**
13 | * Blockquote base styles
14 | */
15 | blockquote {
16 | font-style:italic;
17 | border-left: 1px solid $color-gray-50;
18 | color: $color-gray-50;
19 | padding-left: 1rem;
20 | margin-bottom: $space;
21 | }
22 |
23 | /**
24 | * Horizontal rule base styles
25 | */
26 | hr {
27 | border: 0;
28 | height: 1px;
29 | background: $color-gray-13;
30 | margin: 1rem 0;
31 | }
32 |
33 | /**
34 | * Selection styles
35 | */
36 | ::-moz-selection {
37 | background: $color-gray-13; /* Gecko Browsers */
38 | }
39 | ::selection {
40 | background: $color-gray-13; /* WebKit/Blink Browsers */
41 | }
42 |
43 | /**
44 | * Code base styles
45 | */
46 | code {
47 | display: inline-block;
48 | background: $color-gray-02;
49 | border: 1px solid $color-gray-13;
50 | padding: .2rem .5rem;
51 | line-height: 1.2;
52 | font-size: .85rem;
53 | }
54 |
55 | /**
56 | * Preformatted text base styles
57 | */
58 | pre {
59 | background: $color-gray-02;
60 | border: 1px solid $color-gray-13;
61 | font-size: $font-size-med;
62 | padding: 1rem;
63 | overflow-x: auto;
64 |
65 | /**
66 | * Remove border from code within preformatted text block
67 | */
68 | code {
69 | border: 0;
70 | }
71 | }
72 |
73 | /**
74 | * Code with languages associated with them
75 | * 1) Override Prism sysles for code blocks with language
76 | */
77 | code[class*="language-"],
78 | pre[class*="language-"] {
79 | font-family:monospace !important;
80 | }
81 |
--------------------------------------------------------------------------------
/_sass/components/_banner.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #BANNER
3 | \*------------------------------------*/
4 |
5 | .c-banner {
6 | @media all and (min-width: $bp-small) {
7 | margin-bottom: 1em;
8 | }
9 | }
10 |
11 | /**
12 | * Heading Within the Banner
13 | */
14 | .c-banner__heading {
15 | @media all and (min-width: $bp-small) {
16 | font-size: 3.2rem;
17 | }
18 |
19 | @media all and (min-width: $bp-large) {
20 | font-size: 4.5rem;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/_sass/components/_block.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #BLOCK
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Block Containing Title and List
7 | */
8 | .c-block {
9 | padding: 1rem;
10 | margin-bottom: 2rem;
11 | border: 1px dotted $color-gray-63;
12 | }
13 |
14 | /**
15 | * Block Heading
16 | */
17 | .c-block__heading {
18 | font-size: 1.4rem;
19 | }
20 |
21 | /**
22 | * List Inside of Block
23 | */
24 | .c-block__list {
25 | list-style: disc;
26 | margin-left: 1em;
27 | }
28 |
29 | /**
30 | * Link Within Block
31 | */
32 | .c-block__link {
33 | text-decoration: underline;
34 | }
35 |
--------------------------------------------------------------------------------
/_sass/components/_breadcrumbs.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #BREADCRUMBS
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) This is an ordered list showing what level you are on in the site
7 | */
8 | .c-breadcrumbs {
9 | display: flex; /* 2 */
10 | flex-wrap: wrap; /* 3 */
11 | margin: 0 0 1rem 0; /* 4 */
12 | }
13 |
14 | /**
15 | * Breadcrumbs list item
16 | * 1) Set to position relative so :after is positioned relative to the breadcrumbs item
17 | */
18 | .c-breadcrumbs__item {
19 | position: relative; /* 1 */
20 | margin-right: 1rem;
21 |
22 | /**
23 | * Icon in between list item
24 | * 1) Set to position absolute so it is positioned relative to its parent container
25 | */
26 | &:after {
27 | content:"\203A";
28 | position: absolute; /* 1 */
29 | top: 0;
30 | right: -10px;
31 | }
32 |
33 | /**
34 | * Last breadcrumbs list item
35 | */
36 | &:last-child {
37 | margin-right: 0;
38 |
39 | /**
40 | * Remove last breadcrumb item icon after
41 | */
42 | &:after {
43 | display: none;
44 | }
45 | }
46 | }
47 |
48 | /**
49 | * Breadcrumbs link
50 | */
51 | .c-breadcrumbs__link {
52 | margin: 0 0.5rem;
53 |
54 | /**
55 | * Breadcrumbs link within first breadcrumb item
56 | */
57 | .c-breadcrumbs__item:first-child & {
58 | margin-left: 0;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/_sass/components/_button-group.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #BUTTON GROUP
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) A button group displays buttons side-by-side.
7 | */
8 | .c-btn-group {
9 | display: flex;
10 | }
11 |
12 | /**
13 | * 1) A button group displays buttons side-by-side.
14 | */
15 | .c-btn-group--responsive {
16 | flex-direction: column;
17 |
18 | @media all and (min-width: $bp-small) {
19 | flex-direction: row;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/_sass/components/_buttons.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #BUTTONS
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) Button or link that has functionality to it
7 | * 2) Remove box-shadow that's globally applied to links
8 | */
9 | .c-btn {
10 | display: inline-block;
11 | background: $color-gray-73;
12 | border-radius: $border-radius;
13 | cursor: pointer;
14 | color: $color-white;
15 | line-height: 1;
16 | font-weight: bold;
17 | padding: 1rem 2rem;
18 | border: 0;
19 | box-shadow: none; /* 2 */
20 | text-align: center;
21 | transition: all $fade-quick ease-out;
22 |
23 | &:hover, &:focus {
24 | background: $color-black;
25 | color: $color-white;
26 | }
27 |
28 | /**
29 | * Button within button group
30 | */
31 | .c-btn-group & {
32 | margin-right: 0.5rem;
33 |
34 | &:last-child {
35 | margin-right: 0;
36 | }
37 | }
38 |
39 | /**
40 | * Button within button group
41 | */
42 | .c-btn-group & {
43 | margin-right: 0.5rem;
44 |
45 | /**
46 | * Remove right margin on last button group button
47 | */
48 | &:last-child {
49 | margin-right: 0;
50 | }
51 | }
52 |
53 | /**
54 | * Button within button group
55 | */
56 | .c-btn-group--responsive & {
57 | margin-right: 0;
58 | margin-bottom: 0.5rem;
59 |
60 | @media all and (min-width: $bp-small) {
61 | margin-right: 0.5rem;
62 | margin-bottom: 0;
63 |
64 | /**
65 | * Remove right margin on last responsive button group button
66 | */
67 | &:last-child {
68 | margin-right: 0;
69 | }
70 | }
71 | }
72 | }
73 |
74 | /**
75 | * Small button
76 | */
77 | .c-btn--small {
78 | padding: .375rem .75rem;
79 | }
80 |
81 | /*
82 | * Inner container of the buton
83 | * Allows for display flex on a button
84 | */
85 | .c-btn__inner {
86 | display: flex;
87 | align-items: center;
88 | justify-content: center;
89 | }
90 |
91 | /*
92 | * Button icon
93 | */
94 | .c-btn__icon {
95 | width: 16px;
96 | height: 16px;
97 | fill: $color-gray-50;
98 | position: relative;
99 | transition: fill $fade-quick $anim-ease;
100 |
101 | /*
102 | * Button icon within button hover
103 | */
104 | .c-btn:hover &, .c-btn:focus & {
105 | fill: $color-gray-73;
106 | }
107 |
108 | /*
109 | * Button icon within active button
110 | */
111 | .c-btn.is-active & {
112 | fill: $color-black;
113 | }
114 | }
115 |
116 |
117 |
118 |
119 |
120 | /*------------------------------------*\
121 | #TEXT BUTTON
122 | \*------------------------------------*/
123 |
124 | /**
125 | * 1) Button that is text only and doesn't contain a border or fill.
126 | */
127 | .c-text-btn {
128 | background: none;
129 | border: 0;
130 | padding: 0;
131 | cursor: pointer;
132 | border-radius: $border-radius;
133 | transition: background $fade-quick $anim-ease;
134 |
135 | &:hover, &:focus {
136 | color: $color-gray-50;
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/_sass/components/_card.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #CARD
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) A card is a block of media followed by a body of text in a vertical format
7 | */
8 | .c-card {
9 | display: flex;
10 | flex-direction: column;
11 | flex: 1 0 auto;
12 | position: relative;
13 | display: flex;
14 | padding: 1.5rem 1rem 1rem 1rem;
15 | border: 1px solid $color-gray-27;
16 | }
17 |
18 | /**
19 | * Card Footer
20 | */
21 | .c-card__header {
22 | background: $color-gray-02;
23 | margin: -1.5rem -1rem 1rem -1rem;
24 | padding: 1rem 1.5rem 1rem 1.5rem;
25 | border-bottom: 1px solid $color-gray-13;
26 | }
27 |
28 | /**
29 | * Card Body
30 | */
31 | .c-card__body {
32 | flex: 1 0 auto;
33 | }
34 |
35 | /**
36 | * Card Title
37 | */
38 | .c-card__title {
39 | display: flex;
40 | align-items: center;
41 | font-size: $font-size-large;
42 | color: $color-gray-73;
43 | margin: 0;
44 | }
45 |
46 |
47 | /**
48 | * Card Footer
49 | */
50 | .c-card__footer {
51 | background: $color-gray-02;
52 | margin: 1rem -1rem -1rem -1rem;
53 | padding: 1rem 1.5rem 1rem 1.5rem;
54 | border-top: 1px solid $color-gray-13;
55 | }
56 |
57 | /**
58 | * Card Actions
59 | * 1) Card actions is a container for links and buttons within a card.
60 | */
61 | .c-card__actions {
62 | margin-top: 1rem;
63 | }
64 |
65 | /**
66 | * Card icon
67 | */
68 | .c-card__icon {
69 | margin-left: auto;
70 | transition: transform $fade-quick $anim-ease;
71 |
72 | /**
73 | * Card icon on card hover
74 | */
75 | .c-card:hover &, .c-card:focus & {
76 | transform: translate(3px);
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/_sass/components/_footer-nav.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #FOOTER NAVIGATION
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) Navigation within the footer
7 | */
8 | .c-footer-nav {
9 | display: flex;
10 | font-size: $font-size-sm;
11 | }
12 |
13 | /**
14 | * Footer navigation link
15 | */
16 | .c-footer-nav__link {
17 | display: block;
18 | padding: 1rem 1rem 0.5rem;
19 | line-height: 1;
20 | color: $color-gray-60;
21 |
22 | &:hover, &:focus {
23 | color: $color-gray-73;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/_sass/components/_footer.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | $FOOTER
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) Global block at the bottom of each page that contains a navigation and other information
7 | */
8 | .c-footer {
9 | text-align: center;
10 | display: flex;
11 | flex-shrink: 0;
12 | border-top: 1px solid $color-gray-07;
13 | padding: 1rem 0;
14 | margin-top: 1rem;
15 | }
16 |
--------------------------------------------------------------------------------
/_sass/components/_grid-nav.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #GRID NAV
3 | \*------------------------------------*/
4 |
5 | .c-grid-nav {
6 | display: flex;
7 | flex-wrap: wrap;
8 | overflow: hidden;
9 | box-shadow: inset 1px 1px 5px white;
10 | position: relative;
11 | flex: 1;
12 |
13 | &:before {
14 | content: "";
15 | position: absolute;
16 | top: 0;
17 | right: 0;
18 | width: 1px;
19 | height: 100%;
20 | background: $color-white;
21 | }
22 |
23 | &:after {
24 | content: "";
25 | position: absolute;
26 | bottom: 0;
27 | left: 0;
28 | width: 100%;
29 | height: 1px;
30 | background: $color-white;
31 | }
32 | }
33 |
34 | /**
35 | * Grid Navigation Item
36 | */
37 | .c-grid-nav__item {
38 | display: flex;
39 | width: 50%;
40 | border-bottom: 1px dotted $color-gray-50;
41 | border-right: 1px dotted $color-gray-50;
42 |
43 | &:last-of-type {
44 | border-bottom: 0;
45 | }
46 |
47 | @media all and (min-width: $bp-med) {
48 | width: 33.33%;
49 | }
50 | }
51 |
52 | /**
53 | * Grid Navigation Link
54 | */
55 | .c-grid-nav__link {
56 | display: flex;
57 | justify-content: center;
58 | align-items: center;
59 | text-align: center;
60 | font-size: 1.4rem;
61 | padding: 3rem 1.5rem;
62 | font-weight: bold;
63 | width: 100%;
64 |
65 | &:hover, &:focus {
66 | transform: scale(1.1);
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/_sass/components/_header.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #HEADER
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Global block at the top of each page containing the navigation, logo, and other potential contents
7 | */
8 | .c-header {
9 | position: relative;
10 | background: $color-gray-07;
11 | }
12 |
13 | /**
14 | * Header inner
15 | */
16 | .c-header__inner {
17 | display: flex;
18 | align-items: center;
19 | padding: 1rem;
20 |
21 | /**
22 | * Header inner within vertical header
23 | */
24 | .c-header--vertical & {
25 | @media all and (min-width: $bp-xl) {
26 | flex-direction: column;
27 | align-items: flex-start;
28 | min-height: 100vh;
29 | }
30 | }
31 | }
32 |
33 | /**
34 | * Header navigation button
35 | * 1) Button used to toggle the navigation on/off on small screens
36 | */
37 | .c-header__nav-btn {
38 | margin-left: auto;
39 |
40 | @media all and (min-width: $bp-xl) {
41 | display: none;
42 | }
43 | }
44 |
45 | /**
46 | * Header navigation conntainer
47 | * 1) Contains the primary navigation and other possible patterns
48 | */
49 | .c-header__nav-container {
50 | display: none;
51 | width: 100%;
52 |
53 | @media all and (min-width: $bp-xl) {
54 | display: block;
55 | margin-left: auto;
56 | }
57 |
58 | /**
59 | * Header navigation conntainer within vertical header
60 | */
61 | .c-header--vertical & {
62 | @media all and (min-width: $bp-xl) {
63 | margin-left: 0;
64 | }
65 | }
66 | }
67 |
68 | /**
69 | * Active header nav container
70 | */
71 | .c-header__nav-container.is-active {
72 | display: block;
73 | position: absolute;
74 | background: $color-gray-07;
75 | top: 100%;
76 | left: 0;
77 | padding: 0 1rem;
78 | width: 100%;
79 | z-index: 5;
80 |
81 | @media all and (min-width: $bp-xl) {
82 | display: block;
83 | position: static;
84 | padding: 0;
85 | margin-left: auto;
86 | width: inherit;
87 | }
88 |
89 | /**
90 | * Active header nav container within vertical header
91 | */
92 | .c-header--vertical &{
93 | @media all and (min-width: $bp-xl) {
94 | margin-left: 0;
95 | width: 100%;
96 | }
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/_sass/components/_hero.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #HERO
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) Block containing headline, description text, that serves as a primary content area
7 | */
8 | .c-hero {
9 | display: block;
10 | background-repeat: no-repeat;
11 | background-size: cover;
12 | background-position: 100% 100%;
13 | position: relative;
14 | margin-bottom: 1rem;
15 | }
16 |
17 | /**
18 | * Hero Image
19 | */
20 | .c-hero__img {
21 | display: block;
22 | width: 100%;
23 | margin-bottom: 1rem;
24 |
25 | @media all and (min-width: $bp-small-2) {
26 | margin: 0;
27 | }
28 | }
29 |
30 | /**
31 | * Hero Body
32 | */
33 | .c-hero__body {
34 | padding: 2rem 1rem;
35 |
36 | /**
37 | * Blue tinted hero
38 | */
39 | .c-hero--blue-tint & {
40 | background: rgba(0, 0, 100, 0.4);
41 | }
42 |
43 | /**
44 | * Red tinted hero
45 | */
46 | .c-hero--red-tint & {
47 | background: rgba(100, 0, 0, 0.4);
48 | }
49 |
50 | @media all and (min-width: $bp-med) {
51 | padding: 4rem 2rem;
52 | }
53 |
54 | @media all and (min-width: $bp-xl) {
55 | padding: 5rem;
56 | }
57 | }
58 |
59 | /**
60 | * Hero Title
61 | */
62 | .c-hero__title {
63 | max-width: 48rem;
64 | margin: 0 0 1rem auto;
65 | font-size: 2rem;
66 | text-align: right;
67 |
68 | @media all and (min-width: $bp-med) {
69 | margin: 0 0 2rem auto;
70 | font-size: 3rem;
71 | }
72 | }
73 |
74 | /**
75 | * Hero Description
76 | */
77 | .c-hero__desc {
78 | margin-bottom: 2rem;
79 | margin-left: auto;
80 | max-width: 34rem;
81 | text-align: right;
82 |
83 | @media all and (min-width: $bp-med) {
84 | font-size: 1.25rem;
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/_sass/components/_icon.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #ICON
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) Small image that represents functionality
7 | */
8 | .c-icon {
9 | height: 16px;
10 | width: 16px;
11 | }
12 |
--------------------------------------------------------------------------------
/_sass/components/_logo.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #LOGO
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Branding image or text of the site
7 | */
8 | .c-logo {
9 |
10 | @media all and (min-width: $bp-xl) {
11 | margin: 0;
12 | }
13 |
14 | /**
15 | * Logo within vertical header
16 | */
17 | .c-header--vertical & {
18 | @media all and (min-width: $bp-xl) {
19 | margin: 1rem 0;
20 | }
21 | }
22 | }
23 |
24 | /**
25 | * Logo link
26 | */
27 | .c-logo__link {
28 | display: block;
29 | }
30 |
31 |
32 | /**
33 | * Logo img
34 | */
35 | .c-logo__img {
36 | display: block;
37 | max-width: 13rem;
38 | height: auto;
39 |
40 | /**
41 | * Logo within vertical header
42 | */
43 | .c-header--vertical & {
44 | @media all and (min-width: $bp-xl) {
45 | max-width: 15.75rem;
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/_sass/components/_nav.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #NAVIGATION
3 | \*------------------------------------*/
4 |
5 | .c-nav {
6 | display: flex;
7 | flex-direction: column;
8 | height: calc(100vh - 4.7em);
9 | background: $color-gray-2;
10 | position: absolute;
11 | overflow: auto;
12 | z-index: 1;
13 |
14 | /**
15 | * Navigation Active State
16 | * 1) Triggered when Menu Button is clicked
17 | */
18 | &--is-active {
19 | top: 4.7em;
20 | left: 0;
21 | width: 12em;
22 |
23 | @media all and (min-width: $bp-small) {
24 | top: 0;
25 | width: initial;
26 | }
27 | }
28 |
29 | @media all and (min-width: $bp-small) {
30 | border-top: 1px dotted $color-gray-13;
31 | position: relative;
32 | width: 12em;
33 | order: 1;
34 | }
35 | }
36 |
37 | /**
38 | * Navigation Trigger Button
39 | */
40 | .c-nav__trigger {
41 | display: block;
42 | position: absolute;
43 | top: 0.85rem;
44 | left: 2em;
45 | color: $color-gray-50;
46 | border: 1px dotted $color-gray-50;
47 | background: transparent;
48 | border-radius: $border-radius;
49 | padding: 0.8em 0.5em;
50 | text-transform: uppercase;
51 | font-weight: bold;
52 | transition: all $anim-fast ease;
53 |
54 | &--is-active {
55 | color: $color-gray-63;
56 | }
57 |
58 | &:hover, &:focus {
59 | color: $color-gray-63;
60 | }
61 |
62 | @media all and (min-width: $bp-small) {
63 | display: none;
64 | }
65 | }
66 |
67 | /**
68 | * Nav List
69 | * 1) This is the primary navigation list
70 | */
71 | .c-nav__list {
72 | display: none;
73 | background: $color-gray-2;
74 |
75 | /**
76 | * Nav list styling when parent nav is active
77 | */
78 | .c-nav--is-active & {
79 | display: block;
80 | top: 48px;
81 | left: 0;
82 |
83 | @media all and (min-width: $bp-small) {
84 | top: 0;
85 | }
86 | }
87 |
88 | @media all and (min-width: $bp-small) {
89 | display: block;
90 | padding: 0;
91 | }
92 | }
93 |
94 | /**
95 | * Nav Sublist
96 | */
97 |
98 | .c-nav__sublist {
99 | display: none;
100 |
101 | &--has-children {
102 | display: block;
103 | max-height: 0px;
104 | overflow: hidden;
105 | background: $color-gray-3;
106 | box-shadow: 0 22px 11px -22px $color-gray-13 inset,
107 | 0 -22px 11px -22px $color-gray-13 inset;
108 | transition: all $anim-fast ease-out;
109 |
110 | /**
111 | * Nav Sublist styling when parent nav item is active
112 | */
113 | .c-nav__item--has-children--is-active & {
114 | max-height: 800px;
115 | padding: 0.3rem 0;
116 | transition-timing-function: ease-in;
117 | }
118 |
119 | }
120 | }
121 |
122 | /**
123 | * Nav list item
124 | */
125 | .c-nav__item {
126 | border-bottom: 1px dotted $color-gray-13;
127 | background: $color-gray-2;
128 | position: relative;
129 |
130 | &--has-children {
131 |
132 | &:after {
133 | content: "";
134 | position: absolute;
135 | top: 26px;
136 | right: 10px;
137 | display: block;
138 | width: 0;
139 | height: 0;
140 | margin-left: -4px;
141 | pointer-events: none;
142 | border-top: 7px solid $color-gray-27;
143 | border-right: 5px solid transparent;
144 | border-left: 5px solid transparent;
145 | }
146 |
147 | &--is-active {
148 |
149 | &:after {
150 | transform: rotate(180deg);
151 | }
152 | }
153 | }
154 | }
155 |
156 | /**
157 | * Nav link
158 | */
159 | .c-nav__link {
160 | display: flex;
161 | padding: 1em;
162 |
163 | &--is-active {
164 | color: $color-brand;
165 | }
166 |
167 | .c-nav__sublist__item & {
168 | display: block;
169 | padding: 0.5em 1em;
170 | }
171 | }
172 |
173 | /**
174 | * Nav link
175 | * 1) Link that uses JavaScript
176 | */
177 | .js-nav__link {
178 | position: relative;
179 | }
180 |
181 | /**
182 | * Secondary Nav
183 | * 1) The secondary nav is a unordered list that contains secondary
184 | * links such as "About" and "Updates"
185 | */
186 | .c-secondary-nav {
187 | margin-top: auto;
188 | display: none;
189 |
190 | /**
191 | * Secondary nav styling when parent nav is active
192 | */
193 | .c-nav--is-active & {
194 | display: block;
195 | }
196 |
197 | @media all and (min-width: $bp-small) {
198 | display: block;
199 | }
200 | }
201 |
--------------------------------------------------------------------------------
/_sass/components/_page-header.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #PAGE HEADER
3 | \*------------------------------------*/
4 | /**
5 | * 1) Container that consists of of a page header title and description
6 | */
7 |
8 | /**
9 | * Page header title
10 | */
11 | .c-page-header__title {
12 | margin-bottom: 0.2rem;
13 | }
14 |
15 | /**
16 | * Page description
17 | */
18 | .c-page-header__desc {
19 | margin-bottom: 2rem;
20 | font-size: $font-size-med-2;
21 | color: $color-gray-50;
22 | max-width: $l-max-width-narrow;
23 | }
24 |
--------------------------------------------------------------------------------
/_sass/components/_primary-nav.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #PRIMARY NAVIGATION
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Primary navigation most likely existing in the header
7 | */
8 | .c-primary-nav {
9 | /**
10 | * Primary navigation list within a vertical header
11 | */
12 | .c-header--vertical & {
13 | margin-left: -1rem;
14 | margin-right: -1rem;
15 | }
16 | }
17 |
18 | /**
19 | * Primary navigation list
20 | */
21 | .c-primary-nav__list {
22 | display: flex;
23 | flex-direction: column;
24 |
25 | /**
26 | * Primary navigation list within a vertical header
27 | */
28 | .c-header--vertical & {
29 | display: block;
30 | }
31 |
32 | @media all and (min-width: $bp-xl) {
33 | flex-direction: row;
34 | }
35 | }
36 |
37 | /**
38 | * Primary navigation item
39 | */
40 | .c-primary-nav__item {
41 | position: relative;
42 |
43 | @media all and (min-width: $bp-xl) {
44 | margin-right: 1rem;
45 |
46 | /**
47 | * Remove margin right from last primary navigation item on large screens
48 | */
49 | &:last-child {
50 | margin-right: 0;
51 | }
52 | }
53 |
54 | /**
55 | * Primary navigation item within vertical header
56 | */
57 | .c-header--vertical & {
58 | margin-right: 0;
59 | }
60 | }
61 |
62 | /**
63 | * Primary navigation link
64 | */
65 | .c-primary-nav__link {
66 | display: block;
67 | padding: 0.5rem 0;
68 | cursor: pointer;
69 |
70 | &:focus {
71 | outline: 1px dotted $color-gray-60;
72 | }
73 |
74 | /**
75 | * Primary navigation link within vertical header
76 | */
77 | .c-header--vertical & {
78 | padding: 0.5rem 1rem;
79 | }
80 | }
81 |
82 | /**
83 | * Active primary navigation link
84 | */
85 | .c-primary-nav__link.is-active {
86 | font-weight: bold;
87 | }
88 |
89 | /**
90 | * Current primary navigation link
91 | */
92 | .c-primary-nav__link.is-current {
93 | font-weight: bold;
94 | }
95 |
96 | /**
97 | * Primary navigation link with subnavigation
98 | */
99 | .c-primary-nav__link--has-children {
100 | display: flex;
101 | align-items: center;
102 |
103 | /**
104 | * Primary navigation link withing active item
105 | */
106 | .c-primary-nav__item.is-active & {
107 | @media all and (min-width: $bp-xl) {
108 | background: $color-gray-73;
109 | color: $color-white;
110 | }
111 | }
112 |
113 | /**
114 | * Primary navigation link within active item in vertical header
115 | */
116 | .c-header--vertical .c-primary-nav__item.is-active & {
117 | background: none;
118 | color: inherit;
119 | }
120 | }
121 |
122 | /**
123 | * Primary navigation list subnavigation
124 | * Targets descendant of the
125 | */
126 | .c-primary-nav__subitem {
127 | /**
128 | * Primary navigation sublist within subitem
129 | */
130 | .c-primary-nav__subitem & {
131 | display: none;
132 | }
133 |
134 | /**
135 | * Primary navigation sublist within active subitem
136 | */
137 | .c-primary-nav__subitem.is-active & {
138 | display: block;
139 | }
140 | }
141 |
142 | /**
143 | * Primary navigation sublist
144 | */
145 | .c-primary-nav__sublist {
146 | border-left: 1px solid $color-gray-27;
147 | }
148 |
149 | /**
150 | * Primary navigation list subnavigation first of type
151 | * 1) First of type is chosen to only choose direct descendant of primary
152 | * navigation item
153 | */
154 | .c-primary-nav__sublist:first-of-type {
155 | display: none;
156 | margin-left: 1rem;
157 |
158 | /**
159 | * Primary navigation sublist within vertical header
160 | */
161 | .c-header--vertical & {
162 | margin-left: 1rem;
163 | }
164 |
165 | /**
166 | * Primary navigation sublist within vertical header active primary nav item
167 | */
168 | .c-header--vertical.is-active > & {
169 | display: block
170 | }
171 |
172 | /**
173 | * Primary navigation sublist within active primary navigation item
174 | */
175 | .c-primary-nav__item.is-active & {
176 | display: block;
177 |
178 | @media all and (min-width: $bp-xl) {
179 | background: $color-gray-73;
180 | padding: .5rem 1rem 1rem;
181 | margin: 0;
182 | position: absolute;
183 | top: 100%;
184 | z-index: 6;
185 | min-width: 8rem;
186 | }
187 | }
188 |
189 | /**
190 | * Primary navigation sublist within active item in vertical header
191 | */
192 | .c-header--vertical .c-primary-nav__item.is-active & {
193 | background: none;
194 |
195 | @media all and (min-width: $bp-xl) {
196 | margin: 0;
197 | margin-left: 1rem;
198 | padding: 0;
199 | position: static;
200 |
201 | }
202 | }
203 |
204 | @media all and (min-width: $bp-xl) {
205 | margin-left: 0;
206 | }
207 | }
208 |
209 | /**
210 | * Primary navigation sublink
211 | */
212 | .c-primary-nav__sublink {
213 | display: flex;
214 | align-items: center;
215 | padding: 0.5rem 1rem;
216 |
217 | &:focus {
218 | outline: 1px dotted $color-gray-60;
219 | }
220 |
221 | /**
222 | * Primary navigation sublink within vertical header
223 | */
224 | .c-header--vertical & {
225 | @media all and (min-width: $bp-xl) {
226 | color: inherit;
227 | }
228 | }
229 | }
230 |
231 | /**
232 | * Active primary navigation link
233 | */
234 | .c-primary-nav__sublink.is-active {
235 | font-weight: bold;
236 | }
237 |
238 | /**
239 | * Current primary navigation link
240 | */
241 | .c-primary-nav__sublink.is-current {
242 | font-weight: bold;
243 | }
244 |
245 | /**
246 | * Primary navigation sublink with subnavigation
247 | */
248 | .c-primary-nav__sublink--has-children {
249 | display: flex;
250 | align-items: center;
251 | }
252 |
253 |
254 |
255 | /**
256 | * Primary navigation icon
257 | */
258 | .c-primary-nav__icon {
259 | fill: $color-gray-73;
260 | transition: fill 0.2s ease;
261 | margin-left: auto;
262 |
263 | /**
264 | * Primary navigation icon within vertical header
265 | */
266 | .c-header--vertical & {
267 | margin-left: auto;
268 | }
269 |
270 | /**
271 | * Primary navigation icon within active link
272 | */
273 | .c-primary-nav__item.is-active & {
274 | fill: $color-white;
275 | transform: rotate(180deg);
276 | }
277 |
278 | /**
279 | * Primary navigation icon within active link within vertical header
280 | */
281 | .c-header--vertical .c-primary-nav__item.is-active & {
282 | fill: $color-gray-73;
283 | transform: rotate(90deg);
284 | }
285 |
286 | /**
287 | * Primary navigation icon within hovered/focused primary navigation link
288 | */
289 | .c-primary-nav__link:hover &, .c-primary-nav__link:focus & {
290 | fill: $color-gray-50;
291 | }
292 | }
293 |
294 | /**
295 | * Primary navigation subicon
296 | */
297 | .c-primary-nav__subicon {
298 | fill: $color-gray-73;
299 | transition: fill 0.2s ease;
300 | margin-left: auto;
301 |
302 | /**
303 | * Primary navigation icon within vertical header
304 | */
305 | .c-header--vertical & {
306 | margin-left: auto;
307 | }
308 |
309 | /**
310 | * Primary navigation subicon within active link
311 | */
312 | .c-primary-nav__subitem.is-active & {
313 | fill: $color-white;
314 | transform: rotate(180deg);
315 | }
316 |
317 | /**
318 | * Primary navigation subicon within active subitem within vertical header
319 | */
320 | .c-header--vertical .c-primary-nav__subitem.is-active & {
321 | fill: $color-gray-73;
322 | transform: rotate(90deg);
323 | }
324 |
325 | /**
326 | * Primary navigation icon within hovered/focused primary navigation link
327 | */
328 | .c-primary-nav__sublink:hover &, .c-primary-nav__sublink:focus & {
329 | fill: $color-gray-50;
330 | }
331 | }
332 |
--------------------------------------------------------------------------------
/_sass/components/_section.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #SECTION
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Section block that helps chunk related items together
7 | */
8 | .c-section {
9 | margin-bottom: 2rem;
10 | }
11 |
12 |
13 |
14 |
15 |
16 | /*------------------------------------*\
17 | #SECTION HEADER
18 | \*------------------------------------*/
19 |
20 | /**
21 | * 1) Block containing section title and description to distinguish section
22 | */
23 | .c-section-header {
24 | margin-bottom: 1rem;
25 | padding-bottom: 0.5rem;
26 | border-bottom: 1px solid $color-gray-07;
27 | }
28 |
29 | /**
30 | * Section header title
31 | */
32 | .c-section-header__title {
33 | font-size: $font-size-large;
34 | }
35 |
36 | /**
37 | * Section description
38 | */
39 | .c-section-header__desc {
40 | font-size: $font-size-med;
41 | margin-bottom: 0;
42 | }
43 |
--------------------------------------------------------------------------------
/_sass/components/_table.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #TABLE
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) Data Table
7 | */
8 | .c-table {
9 | margin-bottom: 1rem;
10 | min-width: 600px; /* 2 */
11 | }
12 |
13 | /**
14 | * Table Header
15 | */
16 | .c-table__header {
17 | background: $color-gray-07;
18 | }
19 |
20 | /**
21 | * Table Header Cell
22 | */
23 | .c-table__header-cell {
24 | padding: 0.8rem;
25 | }
26 |
27 | /**
28 | * Table Row
29 | */
30 | .c-table__row {
31 | border-bottom: 1px solid $color-gray-07;
32 | }
33 |
34 | /**
35 | * Table Cell
36 | */
37 | .c-table__cell {
38 | padding: 1.6rem 0.8rem;
39 | }
40 |
41 | /**
42 | * Table Footer
43 | */
44 | .c-table__footer {
45 |
46 | }
47 |
48 | /**
49 | * Table Footer Cell
50 | */
51 | .c-table__footer-cell {
52 | padding: 0.8rem;
53 | }
54 |
--------------------------------------------------------------------------------
/_sass/components/_tabs.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #TABS
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) Unordered list of links where the each link targets different information
7 | */
8 |
9 | /**
10 | * Vertical tabs
11 | * 1) Displays tabs on the right and the body on the left
12 | */
13 | .c-tabs--vertical {
14 | display: flex;
15 | margin-bottom: 1rem;
16 | }
17 |
18 | /**
19 | * Tabs list
20 | */
21 | .c-tabs__list {
22 | display: flex;
23 | border-bottom: 1px solid $color-gray-27;
24 |
25 | /**
26 | * Tabs list within vertical tabs
27 | */
28 | .c-tabs--vertical & {
29 | border: 1px solid $color-gray-27;
30 | display: block;
31 | order: 1;
32 | }
33 |
34 | }
35 |
36 | /**
37 | * Tabs list
38 | * 1) Overlap the tabs bottom border
39 | */
40 | .c-tabs__link {
41 | display: block;
42 | padding: 0.5rem 1rem;
43 | margin-bottom: -1px;
44 | min-width: 5rem;
45 | text-align: center;
46 |
47 | /**
48 | * Active tabs link
49 | */
50 | &.is-active {
51 | border: 1px solid $color-gray-27;
52 | border-bottom: 1px solid $color-white;
53 | }
54 |
55 | /**
56 | * Tabs link within vertical tabs
57 | */
58 | .c-tabs--vertical & {
59 | border: 0;
60 | border-bottom: 1px solid $color-gray-27;
61 |
62 | /**
63 | * Last tabs item link within vertical tabs
64 | */
65 | .c-tabs__item:last-child & {
66 | border-bottom: 0;
67 | }
68 |
69 | /**
70 | * Active tabs link within vertical tabs
71 | */
72 | &.is-active {
73 | background: $color-gray-13;
74 | }
75 | }
76 | }
77 |
78 |
79 | /**
80 | * Tab Body
81 | */
82 | .c-tabs__body {
83 | padding: 1rem 0;
84 | border-top: 0;
85 |
86 | /**
87 | * Tabs body within vertical tabs
88 | * 1) Take up the remaining space that the actual tabs do not take up
89 | */
90 | .c-tabs--vertical & {
91 | flex: 1; /* 1 */
92 | border: 1px solid $color-gray-27;
93 | border-right: 0;
94 | }
95 |
96 | }
97 |
98 | /**
99 | * Tab Panel
100 | * 1) Display by default, and only hide if JS is available
101 | */
102 | .c-tabs__panel {
103 | display: none;
104 | padding: 1rem;
105 |
106 | /**
107 | * Active tabs panel
108 | */
109 | &.is-active {
110 | display: block;
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/_sass/components/_text-passage.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #TEXT PASSAGE
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) A passage of text, including various components (i.e. article, blog post)
7 | */
8 | .c-text-passage {
9 |
10 | p {
11 | margin-bottom: 1rem;
12 | }
13 |
14 | /**
15 | * Link within the text passage
16 | */
17 | a:not(.c-btn) {
18 | color: $color-gray-50;
19 | text-decoration: underline;
20 |
21 | &:hover, &:focus {
22 | color: $color-gray-73;
23 | }
24 | }
25 |
26 | /**
27 | * Blockquote within text passage
28 | */
29 | blockquote {
30 | padding-left: 0.8rem;
31 | border-left: 3px solid $color-gray-73;
32 | color: $color-gray-50;
33 | font-size: 1rem;
34 | }
35 |
36 | /**
37 | * First-level heading within text passage
38 | */
39 | h1 {
40 | margin-bottom: 1rem;
41 | }
42 |
43 | /**
44 | * Second-level heading within text passage
45 | */
46 | h2 {
47 | margin: 2rem 0 0.5rem;
48 | color: $color-gray-73;
49 | font-weight: bold;
50 | }
51 |
52 | /**
53 | * Third-level heading within text passage
54 | */
55 | h3 {
56 | margin: 1rem 0 1rem;
57 | }
58 |
59 | /**
60 | * Fourth-level heading within text passage
61 | */
62 | h4 {
63 | margin: 1rem 0 1rem;
64 | }
65 |
66 | /**
67 | * Fifth-level heading within text passage
68 | */
69 | h5 {
70 | margin: 1rem 0 1rem;
71 | }
72 |
73 | /**
74 | * Sixth-level heading within text passage
75 | */
76 | h6 {
77 | margin: 1rem 0 1rem;
78 | }
79 |
80 |
81 | /**
82 | * Unordered list within text passage
83 | */
84 | ul {
85 | list-style: disc;
86 | margin-left: 1rem;
87 | margin-bottom: 1rem;
88 |
89 | li:last-child {
90 | margin-bottom: 0;
91 | }
92 | }
93 |
94 | /**
95 | * Ordered list within text passage
96 | */
97 | ol {
98 | list-style: decimal;
99 | margin-left: 1rem;
100 | margin-bottom: 1rem;
101 |
102 | li:last-child {
103 | margin-bottom: 0;
104 | }
105 | }
106 |
107 | li {
108 | margin-bottom: 0.5rem;
109 | line-height: 1.6;
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/_sass/components/_tile.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #TILE
3 | \*------------------------------------*/
4 |
5 | /**
6 | * 1) A block of stylized content containing a key and a value
7 | * 2) The root of a tile is typically tag
8 | */
9 | .c-tile {
10 | display: block;
11 | align-items: center;
12 | padding: 1.5rem;
13 | background: $color-gray-73;
14 | color: $color-white;
15 |
16 | }
17 |
18 | /**
19 | * Tile headline
20 | * 1) Headline of the tile
21 | */
22 | .c-tile__headline {
23 | display: block;
24 | font-size: $font-size-large;
25 | }
26 |
27 |
28 |
29 |
30 |
31 | /*------------------------------------*\
32 | #TILE LIST
33 | \*------------------------------------*/
34 |
--------------------------------------------------------------------------------
/_sass/layout/_layout.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #LAYOUT
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Layout Container
7 | * 1) Caps the width of the content to the maximum width
8 | * and centers the container
9 | */
10 | .l-container {
11 | max-width: $l-max-width;
12 | margin: 0 auto;
13 | }
14 |
15 | /**
16 | * Narrow Layout Container
17 | * 1) This narrow layout container is for lists, forms,
18 | * and other singular objects that aren't dashboard-y
19 | * kinds of displays
20 | */
21 | .l-container--narrow {
22 | max-width: $l-max-width-narrow;
23 | }
24 |
25 | /**
26 | *
27 | * 1) This narrow layout container is for lists, forms,
28 | * and other singular objects that aren't dashboard-y
29 | * kinds of displays
30 | */
31 | .l-linelength-container {
32 | max-width: 35rem;
33 | }
34 |
35 |
36 |
37 |
38 |
39 | /*------------------------------------*\
40 | #LAYOUT SECTIONS
41 | \*------------------------------------*/
42 |
43 | /**
44 | * Main section
45 | * 1) The main section is the primary content container
46 | */
47 | .l-page-layout__main {
48 | display: flex;
49 | height: 100vh;
50 | -ms-flex-direction: column;
51 | flex-direction: column;
52 |
53 | /**
54 | * Main section of 2 column fixed layout
55 | * 1) Margin left equals width of the fixed positioned sidebar
56 | */
57 | .l-page-layout--two-column-fixed > & {
58 | height: 100vh;
59 |
60 | @media all and (min-width: $bp-xl) {
61 | margin-left: 18rem; /* 1 */
62 | }
63 | }
64 | }
65 |
66 | /**
67 | * Secondary section
68 | * 1) The secondary section is an auxiliary container
69 | * Otherwise known as "sidebar", but we try to
70 | * avoid that term to be mindful of the fact in
71 | * responsive environments "sidebar"
72 | */
73 | .l-page-layout__secondary {
74 |
75 | /**
76 | * Secondary section in a two-column fixed layout
77 | * 1) This is a fixed element
78 | */
79 | .l-page-layout--two-column-fixed > & {
80 | @media all and (min-width: $bp-xl) {
81 | position: fixed;
82 | z-index: 2;
83 | overflow: auto;
84 | width: 18rem;
85 | height: 100vh;
86 | }
87 | }
88 | }
89 |
90 |
91 |
92 |
93 |
94 | /*------------------------------------*\
95 | #GRID
96 | \*------------------------------------*/
97 |
98 | /**
99 | * Grid Container
100 | */
101 | .l-grid {
102 | margin: 0 -0.5rem;
103 | display: flex;
104 | flex-wrap: wrap;
105 |
106 | @supports (display: grid) {
107 | display: grid;
108 | grid-gap: 16px;
109 | grid-template-columns: repeat(auto-fill, minmax(285px, 1fr) );
110 | margin: 0;
111 | }
112 | }
113 |
114 | /**
115 | * Abstract grid
116 | * 1) If display: grid is not supported, create evenly distributed grid using display flex
117 | * 2) Otherwise, display abstract grid
118 | */
119 | .l-abstract-grid {
120 | display: flex; /* 1 */
121 | flex-wrap: wrap;
122 | margin: 0 -0.5rem;
123 |
124 | @supports (display: grid) { /* 2 */
125 | display: grid;
126 | grid-gap: 8px;
127 | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
128 | margin: 0;
129 | }
130 | }
131 |
132 | /**
133 | * Grid Item
134 | */
135 | .l-grid__item {
136 | padding: 0.5rem;
137 | display: flex;
138 | flex-direction: column;
139 |
140 | /**
141 | * Grid item within 3-up grid
142 | */
143 | .l-grid--3up & {
144 |
145 | @media all and (min-width: 35em) {
146 | width: 50%;
147 | }
148 |
149 | @media all and (min-width: 45em) {
150 | width: 33.33333%;
151 | }
152 |
153 | /**
154 | * 1) If CSS Grid is supported, set the width
155 | * of grid__items to 100% to fill space
156 | * automatically
157 | */
158 | @supports (display: grid) {
159 | width: 100%; /* 1 */
160 | padding: 0;
161 | }
162 | }
163 |
164 | /**
165 | * Grid item within 3-up grid
166 | */
167 | .l-grid--4up & {
168 | @media all and (min-width: 35em) {
169 | width: 50%;
170 | }
171 |
172 | @media all and (min-width: 55em) {
173 | width: 33.33333%;
174 | }
175 |
176 | @media all and (min-width: 74em) {
177 | width: 25%;
178 | }
179 |
180 | /**
181 | * 1) If CSS Grid is supported, set the width
182 | * of grid__items to 100% to fill space
183 | * automatically
184 | */
185 | @supports (display: grid) {
186 | width: 100%; /* 1 */
187 | padding: 0;
188 | }
189 | }
190 |
191 | /**
192 | * Grid item within an abstract grid
193 | * 1) If grid is not supported, create 3-up grid using display flex
194 | * 2) If grid is supported, create abstract grid
195 | * 3) On xl screens, first item spans 2 columns
196 | * 4) Even items span only 3rd column
197 | * 5) Multiples of 3 items (3, 6, etc.), span only column 1
198 | * 6) Multiples of 4 span columns 2 and 3
199 | */
200 | .l-abstract-grid & { /* 1 */
201 | width: 100%;
202 |
203 | @media all and (min-width: 35em) {
204 | width: 50%;
205 | }
206 |
207 | @media all and (min-width: 45em) {
208 | width: 33.33333%;
209 | }
210 |
211 | /**
212 | * 1) If CSS Grid is supported, set the width
213 | * of grid__items to 100% to fill space
214 | * automatically
215 | */
216 | @supports (display: grid) {
217 | padding: 0;
218 | width: 100%;
219 |
220 | @media all and (min-width: $bp-xl) {
221 | grid-column: 1 / 3; /* 3 */
222 |
223 | &:nth-child(even) {
224 | grid-column: 3;/* 4 */
225 | }
226 |
227 | &:nth-child(3n) {
228 | grid-column: 1;/* 5 */
229 | }
230 |
231 | &:nth-child(4n) {
232 | grid-column: 2/4; /* 6 */
233 | }
234 |
235 | &:last-child {
236 | margin-bottom: 0;
237 | }
238 | }
239 | }
240 | }
241 | }
242 |
--------------------------------------------------------------------------------
/_sass/utilities/_display.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #DISPLAY CLASSES
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Display block
7 | * 1) Add display block by overriding
8 | */
9 | .u-display-block {
10 | display: block !important;
11 | }
12 |
13 | /**
14 | * Margin Bottom Double
15 | * 1) Adds double the base unit of margin
16 | * to the bottom of an element
17 | */
18 | .u-margin-bottom-double {
19 | margin-bottom: 2rem !important;
20 | }
21 |
--------------------------------------------------------------------------------
/_sass/utilities/_visibility.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #VISIBILITY CLASSES
3 | \*------------------------------------*/
4 |
5 | /**
6 | * Is Hidden
7 | * 1) Completely remove from the flow and screen readers.
8 | */
9 | .u-is-hidden {
10 | display: none !important;
11 | visibility: hidden !important;
12 | }
13 |
14 | /**
15 | * Is Visibly Hidden
16 | * 1) Completely remove from the flow but leave available to screen readers.
17 | */
18 | .u-is-vishidden {
19 | position: absolute !important;
20 | overflow: hidden;
21 | width: 1px;
22 | height: 1px;
23 | padding: 0;
24 | border: 0;
25 | clip: rect(1px, 1px, 1px, 1px);
26 | }
27 |
--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: About the design system
4 | description: The about page should provide a bit more high-level information about the system, who's behind it, its back story, and any other info that's helpful to lay out.
5 | ---
6 |
7 | Check out [MailChimp's pattern library about page](http://ux.mailchimp.com/patterns/about) for inspiration.
8 |
--------------------------------------------------------------------------------
/components/01-index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: component-category
3 | title: Components
4 | group: components
5 | permalink: /components/
6 | description: Component overview description
7 | ---
8 |
--------------------------------------------------------------------------------
/components/blocks-and-cards/card.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: component-detail
3 | group: components
4 | subgroup: blocks-and-cards
5 | permalink: /components/blocks-and-cards/card.html
6 |
7 | title: Card
8 | description: This is a card.
9 | status: Complete
10 |
11 |
12 | variations:
13 | - title: Default card
14 | description: Card description
15 | styleModifier: c-card
16 | includeClassification: molecules
17 | includeCategory: 02-blocks
18 | includeName: card
19 | - title: Codepen block
20 | description: Codepen block description
21 | styleModifier: c-card
22 | codepenUser: frostyweather
23 | codepenID: EbgJYG
24 |
25 | usage:
26 | - title: When to use
27 | description: Usage description.
28 | - title: When to consider an alternative
29 | description: Alternative usage.
30 |
31 | classes:
32 | - className: c-hero
33 | required : yes
34 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element.
35 | - className: c-hero--bare
36 | modifier : yes
37 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image.
38 | - className: c-hero--tinted
39 | modifier : yes
40 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint.
41 | - className: c-hero__body
42 | required: yes
43 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient.
44 | - className: c-hero__title
45 | recommended: yes
46 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
6 |
14 |
15 | {% endfor %}
16 |
17 |
18 |
--------------------------------------------------------------------------------
/_layouts/component-category.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 | {% include page-header.html %}
6 |
7 |
7 |
8 | 
9 |
10 |
11 | {{ app.title }}
12 |
13 | -
9 |
10 | {% for componentPage in site.pages %}
11 | {% if componentPage.group == page.group %}
12 | {% if componentPage.subgroup == page.subgroup %}
13 | {% if componentPage.layout != "component-category" and componentPage.layout != "component-category2" and componentPage.status != "Planned" %}
14 |
15 |
-
16 |
17 |
18 | 19 | {{ componentPage.subgroup | replace: '-', ' ' | capitalize }} 20 |21 | 22 |23 | 24 |37 | 38 | 39 | 40 |
25 | {{ componentPage.title }} 26 | {% if componentPage.status %} 27 | {% include badge.html %} 28 | {% endif %} 29 | 32 |
33 | 34 |{{ componentPage.description }}
35 | 36 |
41 |
42 | {% endif %}
43 |
44 | {% endif %}
45 |
46 | {% endif %}
47 |
48 | {% endfor %}
49 |
50 |
12 |
13 |
70 |
71 | -
14 | {% for variation in page.variations %}
15 |
- 16 | {% if variation.title %}{{ variation.title }}{% endif %} 17 | 18 | {% endfor %} 19 | 20 | 21 |
24 |
25 | {% for variation in page.variations %}
26 |
68 |
69 |
27 |
28 |
29 |
30 | {% if variation.title %}{{ variation.title }} {% if variation.styleModifier %}
{% endif %}
31 | {% if variation.description %}
33 |
34 | {% if variation.codepenUser and variation.codepenID %}
35 |
63 |
64 |
65 | {% endfor %}
66 |
67 | {{ variation.title }} {% if variation.styleModifier %}{{ variation.styleModifier }}{% endif %}
{% endif %}
31 | {% if variation.description %}{{ variation.description | markdownify }}
{% endif %}
32 | See the Pen {{ variation.codepenID }} (@{{ variation.codepenID }}) on CodePen.
36 | 37 | {% endif %} 38 | 39 | {% if variation.includeClassification and variation.includeCategory and variation.includeName %} 40 | 41 | {% if variation.includeClassification == 'atoms' %} 42 | {% assign atomicNumber = "00" %} 43 | {% elsif variation.includeClassification == 'molecules' %} 44 | {% assign atomicNumber = "01" %} 45 | {% elsif variation.includeClassification == 'organisms' %} 46 | {% assign atomicNumber = "02" %} 47 | {% endif %} 48 | 49 | {% capture componentString %}{{ atomicNumber }}-{{ variation.includeClassification }}-{{ variation.includeCategory }}-{{ variation.includeName }}{% endcapture %} 50 | 51 | {% capture path %}/patterns/{{ componentString }}/{{ componentString }}.rendered.html{% endcapture %} 52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | {% endif %}
61 |
62 | -
72 | {% for variation in page.variations %}
73 |
74 | {% if variation.includeClassification and variation.includeCategory and variation.includeName %}
75 |
76 | {% if variation.includeClassification == 'atoms' %}
77 | {% assign atomicNumber = "00" %}
78 | {% elsif variation.includeClassification == 'molecules' %}
79 | {% assign atomicNumber = "01" %}
80 | {% elsif variation.includeClassification == 'organisms' %}
81 | {% assign atomicNumber = "02" %}
82 | {% endif %}
83 |
84 | {% capture componentString %}{{ atomicNumber }}-{{ variation.includeClassification }}-{{ variation.includeCategory }}-{{ variation.includeName }}{% endcapture %}
85 |
86 | {% capture path %}/patterns/{{ componentString }}/{{ componentString }}.rendered.html{% endcapture %}
87 |
88 | {% endif %}
89 |
-
90 |
91 | {% if variation.includeClassification and variation.includeCategory and variation.includeName %}
92 | 93 | 94 | 109 | 110 |145 | {% endif %} 146 | 147 |111 | 112 |143 | 144 |113 | 114 | {% capture markupOnlyPath %}/patterns/{{ componentString }}/{{ componentString }}.markup-only.html{% endcapture %} 115 | 116 |122 | 123 | 124 |117 | 118 |120 | 121 |
119 |{% highlight liquid %}{% include {{ markupOnlyPath }} %}{% endhighlight %}125 | 126 |132 | 133 |127 | 128 |130 | 131 |
129 |THIS IS ANGULAR CODE134 | 135 |141 | 142 |136 | 137 |139 | 140 |
138 |THIS IS REACT CODE
148 |
149 | {% endfor %}
150 |
151 |
158 |
159 |
162 |
163 | Usage
160 | 161 |
164 |
165 | {% include definition-list.html %}
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
202 |
203 |
204 |
205 | | Class Name | 177 |Description | 178 |
|---|---|
| 188 | {{ class.className }} 189 | | 190 | 191 |192 | {% capture desc %}{{ class.description }}{% endcapture %} 193 | {% if class.description %}{{ desc | markdownify }}{% endif %} 194 | | 195 | 196 |
210 |
211 |
214 |
215 | Fine print
212 | 213 |
216 | {% for print in page.fine-print %}
217 |
224 |
225 | Discuss this component
226 |
227 | -
218 |
- Version: {{ print.version }} 219 |
- Last Updated: {{ print.update }} 220 |
- Owner: {{ print.owner }} 221 |
-
10 |
11 | {% for componentPage in site.pages %}
12 |
13 |
-
14 |
15 |
16 | 17 | 78 | 79 |18 | 19 |76 | 77 |20 | 21 |74 | 75 |-
22 |
23 | {% for variation in componentPage.variations %}
24 |
25 |
-
26 |
27 |
28 | 65 | 66 |29 | 32 | 33 |{{ variation.title }}
30 |{{ variation.styleModifier }}{{ variation.description }}
31 |34 | 35 |63 | 64 |36 | 37 | {% if variation.includeClassification == 'atoms' %} 38 | {% assign atomicNumber = "00" %} 39 | {% elsif variation.includeClassification == 'molecules' %} 40 | {% assign atomicNumber = "01" %} 41 | {% elsif variation.includeClassification == 'organisms' %} 42 | {% assign atomicNumber = "02" %} 43 | {% endif %} 44 | 45 | {% capture componentString %}{{ atomicNumber }}-{{ variation.includeClassification }}-{{ variation.includeCategory }}-{{ variation.includeName }}{% endcapture %} 46 | 47 | {% capture iframePath %}/patterns/{{ componentString }}/{{ componentString }}.html{% endcapture %} 48 | 49 |59 | 60 | See code and usage 61 | 62 |50 | 51 | 52 | 53 | 54 | 55 |56 | 57 | 58 |
67 |
68 | {% endfor %}
69 |
70 |
80 |
81 | {% endfor %}
82 |
83 | -
26 |
27 |
9 |
10 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/_layouts/landing.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 | {% include page-header.html %}
6 |
7 |
11 |
12 | {% include header.html %}
13 |
14 |
15 |
16 |
17 |
18 |
19 |
25 |
26 | {% include footer.html %}
27 |
28 |
29 |
30 |
8 | {{ content | markdownify }}
9 |
10 |
11 | -
12 |
13 | {% assign the_group = page.group %}
14 |
15 | {% for my_page in site.pages %}
16 | {% if my_page.group == the_group and my_page.layout != "landing" %}
17 |
- 18 | {% include card.html %} 19 | 20 | {% endif %} 21 | {% endfor %} 22 | 23 |
8 |
9 |
14 |
--------------------------------------------------------------------------------
/_layouts/post.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 |
10 | {{ content | markdownify }}
11 |
12 |
13 | `. 47 | - className: c-hero__desc 48 | recommended: yes 49 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 50 | 51 | fine-print: 52 | - version: 0.3 53 | update: April 27, 2017 54 | owner: Jane Doe 55 | --- 56 | -------------------------------------------------------------------------------- /components/blocks-and-cards/hero.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: blocks-and-cards 5 | permalink: /components/blocks-and-cards/hero.html 6 | 7 | title: Hero 8 | status: In Progress 9 | description: Large-format unit to promote content with a high-impact image 10 | 11 | variations: 12 | - title: Default hero 13 | description: Default hero that has no gradient overlay 14 | styleModifier: c-hero 15 | includeClassification: molecules 16 | includeCategory: 02-blocks 17 | includeName: hero 18 | - title: Blue tint hero 19 | description: Hero with a blue gradient overlay 20 | styleModifier: c-hero c-hero--blue-tint 21 | includeClassification: molecules 22 | includeCategory: 02-blocks 23 | includeName: hero-blue-tint 24 | - title: Red tinted hero 25 | description: Hero with a red gradient overlay 26 | styleModifier: c-hero c-hero--red-tint 27 | includeClassification: molecules 28 | includeCategory: 02-blocks 29 | includeName: hero-red-tint 30 | 31 | usage: 32 | - title: When to use 33 | description: Usage description. 34 | - title: When to consider an alternative 35 | description: Alternative usage. 36 | 37 | classes: 38 | - className: c-hero 39 | required : yes 40 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 41 | - className: c-hero--bare 42 | modifier : yes 43 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 44 | - className: c-hero--tinted 45 | modifier : yes 46 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 47 | - className: c-hero__body 48 | required: yes 49 | description: Apply to the container for the card body, which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 50 | - className: c-hero__title 51 | recommended: yes 52 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 53 | - className: c-hero__desc 54 | recommended: yes 55 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 56 | 57 | fine-print: 58 | - version: 0.3 59 | update: April 27, 2017 60 | owner: Jane Doe 61 | --- 62 | -------------------------------------------------------------------------------- /components/blocks-and-cards/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: blocks-and-cards 5 | permalink: /components/blocks-and-cards/ 6 | 7 | title: Blocks and Cards 8 | description: A block component that consists of a header, body, and footer. 9 | --- 10 | -------------------------------------------------------------------------------- /components/blocks-and-cards/tile.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: blocks-and-cards 5 | permalink: /components/blocks-and-cards/tile.html 6 | 7 | title: Tile 8 | status: Deprecated 9 | description: Tile description 10 | 11 | variations: 12 | - title: Tile 13 | description: Tile description 14 | styleModifier: c-tile 15 | includeClassification: molecules 16 | includeCategory: 02-blocks 17 | includeName: card 18 | 19 | usage: 20 | - title: When to use 21 | description: Usage description. 22 | - title: When to consider an alternative 23 | description: Alternative usage. 24 | 25 | classes: 26 | - className: c-hero 27 | required : yes 28 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 29 | - className: c-hero--bare 30 | modifier : yes 31 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 32 | - className: c-hero--tinted 33 | modifier : yes 34 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 35 | - className: c-hero__body 36 | required: yes 37 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 38 | - className: c-hero__title 39 | recommended: yes 40 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 41 | - className: c-hero__desc 42 | recommended: yes 43 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 44 | 45 | fine-print: 46 | - version: 0.3 47 | update: April 27, 2017 48 | owner: Jane Doe 49 | --- 50 | -------------------------------------------------------------------------------- /components/buttons/button-group.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: buttons 5 | permalink: /components/buttons/button-group.html 6 | 7 | title: Button group 8 | description: Button group description 9 | 10 | variations: 11 | - title: Button group 12 | description: Button group description 13 | styleModifier: c-btn-group 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/buttons/button.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: buttons 5 | permalink: /components/buttons/button.html 6 | 7 | title: Button 8 | description: Button description 9 | 10 | variations: 11 | - title: Button 12 | description: Button description 13 | styleModifier: c-btn 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | 49 | --- 50 | -------------------------------------------------------------------------------- /components/buttons/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: buttons 5 | permalink: /components/buttons/ 6 | 7 | title: Buttons 8 | description: Button styles and interactions for every context 9 | --- 10 | -------------------------------------------------------------------------------- /components/buttons/text-button.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: buttons 5 | permalink: /components/buttons/text-button.html 6 | 7 | title: Text button 8 | description: Text button description 9 | 10 | variations: 11 | - title: Text button 12 | description: Text button description 13 | styleModifier: c-text-btn 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/charts-and-graphs/bar-graph.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: charts-and-graphs 5 | permalink: /components/charts-and-graphs/bar-graph.html 6 | 7 | title: Bar graph 8 | description: Bar graph description 9 | 10 | variations: 11 | - title: Bar graph 12 | description: Bar graph description 13 | styleModifier: c-bar-graph 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/charts-and-graphs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: charts-and-graphs 5 | permalink: /components/charts-and-graphs/ 6 | 7 | title: Charts and graphs 8 | description: Essential data-viz patterns 9 | --- 10 | -------------------------------------------------------------------------------- /components/form-controls/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: form-controls 5 | permalink: /components/form-controls/ 6 | 7 | title: Form controls 8 | description: Components for efficient data entry 9 | 10 | --- 11 | -------------------------------------------------------------------------------- /components/form-controls/text-field.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: form-controls 5 | permalink: /components/form-controls/text-field.html 6 | 7 | title: Text field 8 | description: Text field description 9 | 10 | variations: 11 | - title: Text field 12 | description: Text field description 13 | styleModifier: c-text-field 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/headers-and-footers/footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: headers-and-footers 5 | image: ../../images/c-footer.png 6 | permalink: /components/headers-and-footers/footers.html 7 | 8 | title: Footer 9 | description: Logo and housekeeping links displayed at page bottom 10 | 11 | variations: 12 | - title: Footer 13 | description: Footer description 14 | styleModifier: c-footer 15 | includeClassification: molecules 16 | includeCategory: 02-blocks 17 | includeName: card 18 | 19 | usage: 20 | - title: When to use 21 | description: Usage description. 22 | - title: When to consider an alternative 23 | description: Alternative usage. 24 | 25 | classes: 26 | - className: c-hero 27 | required : yes 28 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 29 | - className: c-hero--bare 30 | modifier : yes 31 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 32 | - className: c-hero--tinted 33 | modifier : yes 34 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 35 | - className: c-hero__body 36 | required: yes 37 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 38 | - className: c-hero__title 39 | recommended: yes 40 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 41 | - className: c-hero__desc 42 | recommended: yes 43 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 44 | 45 | fine-print: 46 | - version: 0.3 47 | update: April 27, 2017 48 | owner: Jane Doe 49 | --- 50 | -------------------------------------------------------------------------------- /components/headers-and-footers/horizontal-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: headers-and-footers 5 | image: ../../images/c-header.png 6 | permalink: /components/headers-and-footers/horizontal-header.html 7 | 8 | title: Horizontal header 9 | description: Displays a full-width header on wide screens and a hamburger menu on small screens. 10 | 11 | variations: 12 | - title: Horizontal header 13 | description: Horizontal header description 14 | styleModifier: c-header 15 | includeClassification: molecules 16 | includeCategory: 02-blocks 17 | includeName: card 18 | 19 | usage: 20 | - title: When to use 21 | description: Usage description. 22 | - title: When to consider an alternative 23 | description: Alternative usage. 24 | 25 | classes: 26 | - className: c-hero 27 | required : yes 28 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 29 | - className: c-hero--bare 30 | modifier : yes 31 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 32 | - className: c-hero--tinted 33 | modifier : yes 34 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 35 | - className: c-hero__body 36 | required: yes 37 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 38 | - className: c-hero__title 39 | recommended: yes 40 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 41 | - className: c-hero__desc 42 | recommended: yes 43 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 44 | 45 | fine-print: 46 | - version: 0.3 47 | update: April 27, 2017 48 | owner: Jane Doe 49 | --- 50 | -------------------------------------------------------------------------------- /components/headers-and-footers/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: headers-and-footers 5 | permalink: /components/headers-and-footers/ 6 | 7 | title: Headers and footers 8 | description: Responsive containers for app title, navigation, and search 9 | --- 10 | -------------------------------------------------------------------------------- /components/headers-and-footers/vertical-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: headers-and-footers 5 | image: ../../images/c-header--vertical.png 6 | permalink: /components/headers-and-footers/vertical-header.html 7 | 8 | title: Vertical header 9 | description: Vertical sidebar navigation on wide screens and hamburger navigation on small screens. 10 | 11 | variations: 12 | - title: Vertical header 13 | description: Vertical header 14 | styleModifier: c-header c-header--vertical 15 | includeClassification: molecules 16 | includeCategory: 02-blocks 17 | includeName: card 18 | 19 | usage: 20 | - title: When to use 21 | description: Usage description. 22 | - title: When to consider an alternative 23 | description: Alternative usage. 24 | 25 | classes: 26 | - className: c-hero 27 | required : yes 28 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 29 | - className: c-hero--bare 30 | modifier : yes 31 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 32 | - className: c-hero--tinted 33 | modifier : yes 34 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 35 | - className: c-hero__body 36 | required: yes 37 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 38 | - className: c-hero__title 39 | recommended: yes 40 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 41 | - className: c-hero__desc 42 | recommended: yes 43 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 44 | 45 | fine-print: 46 | - version: 0.3 47 | update: April 27, 2017 48 | owner: Jane Doe 49 | --- 50 | -------------------------------------------------------------------------------- /components/icons/icons.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: icons 5 | permalink: /components/icons/icons.html 6 | 7 | title: Icons 8 | description: Icons description 9 | 10 | variations: 11 | - title: Icons 12 | description: Icons description 13 | styleModifier: c-icon 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/icons/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: icons 5 | permalink: /components/icons/ 6 | 7 | title: Icons 8 | description: Icon reference and usage 9 | --- 10 | -------------------------------------------------------------------------------- /components/interactive/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: interactive 5 | permalink: /components/interactive/ 6 | 7 | title: Interactive 8 | description: Components for revealing/hiding content for more compressed and focused layouts 9 | --- 10 | -------------------------------------------------------------------------------- /components/interactive/tabs.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: interactive 5 | permalink: /components/interactive/tabs.html 6 | 7 | title: Tabs 8 | description: Unordered list of links where the each link targets different information 9 | 10 | variations: 11 | - title: Tabs 12 | description: Tabs description 13 | styleModifier: c-tabs 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/lists-and-collections/card-list.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: lists-and-collections 5 | permalink: /components/lists-and-collections/card-list.html 6 | 7 | title: Card list 8 | description: Card description 9 | 10 | variations: 11 | - title: Default card list 12 | description: Card list description 13 | styleModifier: c-card-list 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/lists-and-collections/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: lists-and-collections 5 | permalink: /components/lists-and-collections/ 6 | 7 | title: Lists and collections 8 | description: From simple text lists to complex card collections 9 | --- 10 | -------------------------------------------------------------------------------- /components/lists-and-collections/tile-list.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: lists-and-collections 5 | permalink: /components/lists-and-collections/tile-list.html 6 | 7 | title: Tile list 8 | description: Tile description 9 | 10 | variations: 11 | - title: Tile list 12 | description: Tile list description 13 | styleModifier: c-tile-list 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/media/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: media 5 | permalink: /components/media/ 6 | 7 | title: Media 8 | description: Images and video 9 | --- 10 | -------------------------------------------------------------------------------- /components/media/video.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: media 5 | permalink: /components/media/video.html 6 | 7 | title: Video 8 | description: Video description 9 | 10 | variations: 11 | - title: Video 12 | description: Video description 13 | styleModifier: c-video 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/messaging/alert.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: messaging 5 | permalink: /components/messaging/alert.html 6 | 7 | title: Alert 8 | description: Alert description 9 | 10 | variations: 11 | - title: Alert 12 | description: Alert description 13 | styleModifier: c-alert 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/messaging/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: messaging 5 | permalink: /components/messaging/ 6 | 7 | title: Messaging 8 | description: Tools for status and info updates, from micro-copy tooltips to high-impact alerts 9 | --- 10 | -------------------------------------------------------------------------------- /components/messaging/tooltip.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: messaging 5 | permalink: /components/messaging/tooltip.html 6 | 7 | title: Tooltip 8 | description: Tooltip description 9 | 10 | variations: 11 | - title: Tooltip 12 | description: Tooltip description 13 | styleModifier: c-tooltip 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/navigation/breadcrumbs.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: navigation 5 | permalink: /components/navigation/breadcrumbs.html 6 | 7 | title: Breadcrumbs 8 | description: Ordered list showing what level you are on in reference to the site 9 | 10 | variations: 11 | - title: Breadcrumbs 12 | description: Breadcrumbs description 13 | styleModifier: c-breadcrumbs 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | 19 | usage: 20 | - title: When to use 21 | description: Usage description. 22 | - title: When to consider an alternative 23 | description: Alternative usage. 24 | 25 | classes: 26 | - className: c-hero 27 | required : yes 28 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 29 | - className: c-hero--bare 30 | modifier : yes 31 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 32 | - className: c-hero--tinted 33 | modifier : yes 34 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 35 | - className: c-hero__body 36 | required: yes 37 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 38 | - className: c-hero__title 39 | recommended: yes 40 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 41 | - className: c-hero__desc 42 | recommended: yes 43 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 44 | 45 | fine-print: 46 | - version: 0.3 47 | update: April 27, 2017 48 | owner: Jane Doe 49 | --- 50 | -------------------------------------------------------------------------------- /components/navigation/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: navigation 5 | permalink: /components/navigation/ 6 | 7 | title: Navigation 8 | description: Components for wayfinding (see also [headers and footers](../headers-and-footers/index.html)) 9 | --- 10 | -------------------------------------------------------------------------------- /components/tables/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: tables 5 | permalink: /components/tables/ 6 | 7 | title: Tables 8 | description: Responsive data display for a range of contexts 9 | --- 10 | -------------------------------------------------------------------------------- /components/tables/table.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: tables 5 | permalink: /components/table/table.html 6 | 7 | title: Table 8 | description: Table description 9 | 10 | variations: 11 | - title: Table 12 | description: Table description 13 | styleModifier: c-table 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/text/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-category 3 | group: components 4 | subgroup: text 5 | permalink: /components/text/ 6 | 7 | title: Text 8 | description: Text components description 9 | 10 | --- 11 | -------------------------------------------------------------------------------- /components/text/page-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: text 5 | permalink: /components/text/page-header.html 6 | 7 | title: Page header 8 | description: Block that consists of of a page header title and description. Used to headline a page. 9 | 10 | variations: 11 | - title: Page header 12 | description: Page header description 13 | styleModifier: c-page-header 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/text/section-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: text 5 | permalink: /components/text/section-header.html 6 | 7 | title: Section header 8 | description: Block that consists of of a section header title and description. Used to headline a section. 9 | 10 | variations: 11 | - title: Section header 12 | description: Section header description 13 | styleModifier: c-section-header 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`. 43 | 44 | fine-print: 45 | - version: 0.3 46 | update: April 27, 2017 47 | owner: Jane Doe 48 | --- 49 | -------------------------------------------------------------------------------- /components/text/text-passage.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: component-detail 3 | group: components 4 | subgroup: text 5 | permalink: /components/text/text-passage.html 6 | 7 | title: Text passage 8 | description: A passage of text, including various components (i.e. article, blog post) 9 | 10 | variations: 11 | - title: Text passage 12 | description: Text passage description 13 | styleModifier: c-text-passage 14 | includeClassification: molecules 15 | includeCategory: 02-blocks 16 | includeName: card 17 | 18 | usage: 19 | - title: When to use 20 | description: Usage description. 21 | - title: When to consider an alternative 22 | description: Alternative usage. 23 | 24 | classes: 25 | - className: c-hero 26 | required : yes 27 | description: Apply to the hero block's containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit's hero image should be applied as a background image to this `c-hero` element. 28 | - className: c-hero--bare 29 | modifier : yes 30 | description: Add to the `c-hero` element to remove the default gradient overlay from the hero image. 31 | - className: c-hero--tinted 32 | modifier : yes 33 | description: Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint. 34 | - className: c-hero__body 35 | required: yes 36 | description: Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card's background gradient. 37 | - className: c-hero__title 38 | recommended: yes 39 | description: Apply to the card's heading inside the card body. The recommended element for this class is `
`. 40 | - className: c-hero__desc 41 | recommended: yes 42 | description: Apply to the card's description text inside the card body. The recommended element for this class is `
`.
43 |
44 | fine-print:
45 | - version: 0.3
46 | update: April 27, 2017
47 | owner: Jane Doe
48 | ---
49 |
--------------------------------------------------------------------------------
/components/view-all.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: component-viewall
3 | group: components
4 | permalink: /components/view-all.html
5 |
6 | title: All Components
7 | description: This is the components overview description.
8 | ---
9 |
--------------------------------------------------------------------------------
/contribute.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: Contributing to the design system
4 | description: This page explains the process (or processes) by which the design system gets updated
5 | ---
6 |
7 | ## People
8 | Describe who's involved in changes to the system. Describe who's expected to do the work and who approves changes.
9 |
10 | ## Process
11 | Describe specifically the process or processes by which the system gets [updated](http://atomicdesign.bradfrost.com/chapter-5/#making-changes-to-patterns). What happens when existing component need modified? What if an entire new component needs created? What happens if a component is deprecated? See [Canonical's fantastic decision tree](http://design.canonical.com/2016/07/getting-vanilla-ready-for-v1-the-roadmap/) for contributing changes to their design system.
12 |
13 | Since a design system is made up of component code, guidelines, documentation, design tools, and resources, keep in mind you'll likely need to define several processes to contribute each of these ingredients.
14 |
15 | ## Support
16 | Cross-linking to the support page is a good idea here.
17 |
--------------------------------------------------------------------------------
/css/main.scss:
--------------------------------------------------------------------------------
1 | ---
2 | # Only the main Sass file needs front matter (the dashes are enough)
3 | ---
4 |
5 | /*------------------------------------*\
6 | #TABLE OF CONTENTS
7 | \*------------------------------------*/
8 | /**
9 | * ABSTRACTS..............................Declarations of Sass variables & mixins
10 | * BASE...................................Default element styles
11 | * .....Body
12 | * .....Links
13 | * .....Headings
14 | * .....Forms
15 | * .....Defaults
16 | * LAYOUT.................................Layout-specific styles
17 | * COMPONENTS.............................Component styles
18 | * UTILITIES..............................Utility classes
19 | */
20 |
21 | @charset "utf-8";
22 |
23 | /*------------------------------------*\
24 | #ABSTRACTS
25 | \*------------------------------------*/
26 | @import "abstracts/variables";
27 | @import "abstracts/mixins";
28 |
29 |
30 |
31 |
32 |
33 | /*------------------------------------*\
34 | #BASE
35 | \*------------------------------------*/
36 | @import "base/body";
37 | @import "base/buttons";
38 | @import "base/forms";
39 | @import "base/headings";
40 | @import "base/links";
41 | @import "base/lists";
42 | @import "base/main";
43 | @import "base/media";
44 | @import "base/reset";
45 | @import "base/tables";
46 | @import "base/text";
47 |
48 |
49 |
50 |
51 |
52 | /*------------------------------------*\
53 | #LAYOUT
54 | \*------------------------------------*/
55 | @import "layout/layout";
56 |
57 |
58 |
59 |
60 |
61 | /*------------------------------------*\
62 | #COMPONENTS
63 | \*------------------------------------*/
64 | @import "components/breadcrumbs";
65 | @import "components/buttons";
66 | @import "components/button-group";
67 | @import "components/card";
68 | @import "components/footer-nav";
69 | @import "components/footer";
70 | @import "components/header";
71 | @import "components/hero";
72 | @import "components/logo";
73 | @import "components/icon";
74 | @import "components/page-header";
75 | @import "components/primary-nav";
76 | @import "components/section";
77 | @import "components/table";
78 | @import "components/tabs";
79 | @import "components/text-passage";
80 | @import "components/tile";
81 |
82 |
83 |
84 |
85 |
86 | /*------------------------------------*\
87 | #UTILITIES
88 | \*------------------------------------*/
89 | @import "utilities/visibility";
90 | @import "utilities/display";
91 |
--------------------------------------------------------------------------------
/css/style-guide.scss:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 |
4 | $color-white: #ffffff;
5 | $color-gray-dark: #333333;
6 | $color-gray-lighter: #f5f5f5;
7 | $color-gray-10: #e5e5e5;
8 | $color-gray-04: #f5f5f5;
9 |
10 | $color-app-red: #d82424;
11 | $color-app-green: #00af53;
12 | $color-app-ruby: #b10040;
13 | $color-app-blue: #225896;
14 | $color-app-sea-blue: #005f7f;
15 | $color-app-torquoise: #00aca8;
16 | $color-app-med-gray: #545459;
17 |
18 | $color-app-blue-light: #e1efff;
19 | $color-app-blue-deep: #111122;
20 |
21 | $anim-base-easing: ease;
22 | $anim-base-duration: .3s;
23 |
24 | /**
25 | * Max Width
26 | */
27 | $l-max-width: 84em;
28 | $l-max-width-text: 38em;
29 |
30 | /**
31 | * Breakpoints
32 | */
33 | $bp-small: 24em;
34 | $bp-small-2: 30em;
35 | $bp-med: 35em;
36 | $bp-large: 47em;
37 | $bp-xl: 62em;
38 | $bp-xl-2: 67em;
39 | $bp-xl-3: $l-max-width;
40 |
41 | /**
42 | * 1) This is an overide to have more text breathing room on home
43 | */
44 | @media all and (min-width: 62em) {
45 | .c-section--home {
46 | padding: 0 3rem;
47 | }
48 | }
49 |
50 | /*------------------------------------*\
51 | #IFFFRAME
52 | \*------------------------------------*/
53 |
54 | /**
55 | * 1) Iffframe creates a resizable component
56 | */
57 |
58 | .iffframe {
59 | padding: 1rem 0.7rem 1rem 0;
60 | width: 100%;
61 | position: relative;
62 | border: 1px solid $color-gray-lighter;
63 | border-left: none;
64 | overflow: hidden;
65 | height: auto;
66 | background-color: $color-white;
67 | margin-bottom: 2rem;
68 | //transition: width 0.6s $anim-base-easing;
69 | }
70 |
71 | .iffframe__iframe {
72 | width: 100%;
73 | overflow: auto;
74 | overflow-x: auto !important;
75 | }
76 |
77 | /**
78 | * Iffframe handle
79 | * 1) Hide resize handle for small screens
80 | */
81 | .iffframe__handle {
82 | display: none; /* 1 */
83 | width: 0.7rem;
84 | height: 100%;
85 | position: absolute;
86 | right: 0;
87 | top: 0;
88 | cursor: col-resize;
89 | background-color: $color-gray-lighter;
90 | transition: background-color $anim-base-duration $anim-base-easing;
91 |
92 | &:after {
93 | content: "";
94 | display: block;
95 | height: 1rem;
96 | width: 2px;
97 | border-right: 1px solid #aaa;
98 | border-left: 1px solid #aaa;
99 | position: absolute;
100 | top: 50%;
101 | left: 50%;
102 | margin-top: -0.5rem;
103 | margin-left: -1px;
104 | }
105 |
106 | &:hover {
107 | background: #e5e5e5;
108 | }
109 |
110 | &:active {
111 | background: #cccccd;
112 | }
113 |
114 | @media all and (min-width: 40em) {
115 | display: block;
116 | }
117 | }
118 |
119 | // Failed attempt to get the icon grid looking better
120 | // li.icon-grid__item.c-well {
121 | // padding: 1rem !important;
122 | // border-color: $color-gray-10;
123 | // background-color: $color-gray-04;
124 |
125 | // h3 {
126 | // margin-top: 2rem;
127 | // }
128 | // }
129 |
130 |
131 |
132 | /*------------------------------------*\
133 | #CODE
134 | \*------------------------------------*/
135 |
136 | /**
137 | * 1) Override some Prism defaults
138 | * 2) Fixed width button for showing and hiding code
139 | * 3) Change background color
140 | * 4) Update the code color to have Exxon colors
141 | */
142 | code[class*="language-"], pre[class*="language-"] {
143 | tab-size: 2;
144 | }
145 |
146 | .pattern-code {
147 | position: relative;
148 | margin-top: 2rem;
149 | }
150 |
151 | /**
152 | * Applied to pre element
153 | */
154 | .pattern-code-block {
155 | margin-top: 0;
156 | max-height: 25rem;
157 | overflow-y: hidden;
158 |
159 | .is-expanded & {
160 | max-height: none;
161 | }
162 | }
163 |
164 | .pattern-code-copy-btn {
165 | position: absolute;
166 | top: 0;
167 | right: 0;
168 | z-index: 2;
169 | }
170 |
171 | /* 3 */
172 | pre[class*="language-"] {
173 | background-color: $color-gray-04;
174 | }
175 |
176 | code[class*="language-"], pre[class*="language-"] {
177 | text-shadow: none;
178 | }
179 |
180 | /**
181 | * Push the button up to be closer to the code-block in the show-more block
182 | */
183 | .c-btn {
184 | .show-more & {
185 | position: relative;
186 | bottom: 2rem;
187 | z-index: 1;
188 | }
189 | }
190 |
191 | /**
192 | * Force last paragraph of page header description to be inline so markdown flows into "Jump To Usage Guidelines Link"
193 | */
194 | .c-page-header__desc {
195 | p {
196 | &:last-of-type {
197 | display: inline;
198 | }
199 | }
200 | }
201 |
202 | /**
203 | * Page header icon
204 | * 1) Add height and width for the page header icon for the "Jump to Usage Guidelines Link"
205 | * 2) Added within the header__desc to cancel out text-passage styles;
206 | */
207 | .c-page-header__icon {
208 |
209 | .c-page-header__desc & {
210 | height: 1rem; /* 1 */
211 | width: 1rem; /* 1 */
212 | }
213 | }
214 |
215 | /**
216 | * Tabs list in reference site
217 | * 1) Wrap tabs
218 | * 2) Remove overflow
219 | * 3) Remove shadows for overflow
220 | */
221 | .c-tabs__list {
222 | @media all and (min-width: $bp-large) {
223 | flex-wrap: wrap; /* 1 */
224 | overflow-x: inherit; /* 2 */
225 | overflow-y: inherit; /* 2 */
226 | }
227 | }
228 |
229 |
230 | /*------------------------------------*\
231 | #BADGES
232 | \*------------------------------------*/
233 | .c-badge {
234 | border-radius: 4px;
235 | color: $color-white;
236 | font-size: .65rem;
237 | margin-left: 4px;
238 | padding: 4px;
239 | vertical-align: middle;
240 | }
241 |
242 | .c-badge--negative {
243 | background-color: $color-app-red;
244 | }
245 |
246 | .c-badge--positive {
247 | background-color: $color-app-green;
248 | }
249 |
250 | .c-badge--caution {
251 | background-color: $color-app-blue;
252 | }
253 |
254 |
255 |
256 |
257 |
258 | /*------------------------------------*\
259 | #BADGES
260 | \*------------------------------------*/
261 | .c-table-container {
262 | width: 100%;
263 | overflow-x: auto;
264 | overflow-y: hidden;
265 | background:
266 | linear-gradient(to right, white 30%, hsla(0,0%,100%,0)),
267 | linear-gradient(to right, hsla(0,0%,100%,0), white 70%) right,
268 | linear-gradient(to right, rgba(0,0,0,0.2) 0%, transparent 70%),
269 | linear-gradient(to left, rgba(0,0,0,0.2) 0%, transparent 70%) right;
270 | background-repeat: no-repeat;
271 | background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
272 | background-attachment: local, local, scroll, scroll;
273 | }
274 |
275 | .c-table__cell:first-child {
276 | white-space: nowrap;
277 | }
278 |
279 |
280 |
281 | /*------------------------------------*\
282 | #LAYOUT TWEAKS
283 | \*------------------------------------*/
284 |
285 | .push-right {
286 | padding-left: 0.5rem;
287 |
288 | @media all and (min-width: 40em) {
289 | padding-left: 8rem;
290 | }
291 | }
292 |
293 | .c-tabs-list__item {
294 | display: none;
295 |
296 | &.is-active {
297 | display: block;
298 | }
299 | }
300 |
--------------------------------------------------------------------------------
/downloads.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: Downloads
4 | description: Links to repositories, design templates, tools, and so on.
5 | ---
6 | Check out [Carbon Design System's wonderful tools and resources page](http://carbondesignsystem.com/resources) for inspiration.
7 |
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradfrost/style-guide-guide/e77ec28a014b3bd7df318bb7e5eecdb63adbbb71/favicon.ico
--------------------------------------------------------------------------------
/feed.xml:
--------------------------------------------------------------------------------
1 | ---
2 | layout: null
3 | ---
4 |
5 |