`.
21 | $font-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
22 | $font-base: $font-sans-serif;
23 | $font-color: #222222 !default;
24 |
25 | $font-size: 1.6rem !default;
26 | $font-size--lg: ceil($font-size * 1.23); // ~20px
27 | $font-size--md: ceil($font-size * 1.14); // ~16px
28 | $font-size--sm: ceil($font-size * 0.92); // ~13px
29 | $font-size--xs: ceil($font-size * 0.85); // ~12px
30 |
31 |
32 | // Gray colors for theme
33 | $gray-lightest: #f6f6f6;
34 | $gray-lighter: #e4e4e4;
35 | $gray-light: #d3d3d3;
36 | $gray: #a8a8a8;
37 | $gray-dark: #7e7e7e;
38 | $gray-darker: #545454;
39 | $gray-darkest: #2a2a2a;
40 |
41 | // Classic brand colors
42 | $color-primary: rgba(52, 152, 219,1.0);
43 | $color-primary--dark: darken($color-primary, 5%) !default;
44 | $color-secondary: $gray-dark !default;
45 |
46 | $color-info: #5BC0EB;
47 | $color-success: #2BC016;
48 | $color-warning: #E67E22;
49 | $color-danger: #C3423F;
50 |
51 | $color-link: #496DDB !default;
52 | $color-link--visited: #9140D4 !default;
53 | $color-link--hover: darken($color-link, 10%) !default;
54 | $color-link--active: #D44076 !default;
55 |
56 | $white: #ffffff !default;
57 |
58 | /// Copy text color
59 | /// @type Color
60 | $text-color: rgb(34, 34, 34) !default;
61 |
62 | /// Main brand color
63 | $color-brand: rgb(229, 0, 80) !default;
64 |
65 | // Z-Index
66 | $z-index-0: -1;
67 | $z-index-1: 10;
68 | $z-index-2: 20;
69 | $z-index-3: 30;
70 | $z-index-4: 40;
71 | $z-index-5: 50;
72 | $z-index-6: 60;
73 | $z-index-7: 70;
74 | $z-index-8: 80;
75 | $z-index-9: 90;
76 | $z-index-10: 100;
77 |
78 |
79 | // Grid Variables
80 | $container-width: 1000px !default;
81 | $container-width-larger-than-mobile: 85% !default;
82 | $container-width-larger-than-phablet: 80% !default;
83 | $total-columns: 12 !default;
84 | $column-width: 100 / $total-columns !default; // calculates individual column width based off of # of columns
85 | $column-margin: 2% !default; // space between column grids
86 |
87 | // Flex Grid Variables
88 | $flex-grid__column--fixed-width: 200px !default;
89 | $flex-grid--column-margin: 2% !default;
90 |
91 | /// Relative or absolute URL where all assets are served from
92 | /// @type String
93 | /// @example scss - When using a CDN
94 | /// $base-url: 'http://cdn.example.com/assets/';
95 | $base-url: '/assets/' !default;
96 |
--------------------------------------------------------------------------------
/docs/examples/landing/css/custom.css:
--------------------------------------------------------------------------------
1 | /* Shared */
2 |
3 | .list-inline {
4 | padding-left: 0;
5 | margin-left: -5px;
6 | list-style: none;
7 | }
8 |
9 | .list-inline > li {
10 | display: inline-block;
11 | padding-right: 5px;
12 | padding-left: 5px;
13 | }
14 |
15 | /* Sections */
16 | .section {
17 | padding: 10rem 0 10rem;
18 | text-align: center;
19 | }
20 |
21 | .section-heading,
22 | .section-description {
23 | margin-bottom: 1.2rem;
24 | }
25 |
26 | /* Hero */
27 | .hero {
28 | background-image: url("../images/bokeh.jpg");
29 | background-size: cover;
30 | background-position: top left;
31 | background-repeat: no-repeat;
32 | webkit-background-size: cover;
33 | -moz-background-size: cover;
34 | -o-background-size: cover;
35 | color: #222;
36 | }
37 |
38 | /* Features */
39 | .features {
40 | background-color: #192023;
41 | color: #BBBAC6;
42 | padding: 6rem 0 6rem;
43 | }
44 |
45 | .features__title {
46 | text-align: center;
47 | margin-bottom: 4rem;
48 | }
49 |
50 | /* Promotion */
51 | .promotion {
52 | background: linear-gradient(rgba(25, 32, 35, 0.85), rgba(0, 119, 76, 0.75) ), url("../images/aurora.jpg");
53 | background-size: cover;
54 | color: #fff;
55 | padding: 6rem 0 6rem;
56 | }
57 |
58 | .promotion__title {
59 | margin-bottom: 5rem;
60 | }
61 |
62 | .promotion__icon {
63 | margin-bottom: .5rem;
64 | color: #ddd;
65 | }
66 |
67 | .promotion__heading {
68 | margin-bottom: 1rem;
69 | }
70 |
71 | .promotion__description {
72 | opacity: .8;
73 | font-weight: 300;
74 | }
75 |
76 | /* Help */
77 | .get-started {
78 | color: #BBBAC6;
79 | background-color: #192023;
80 | }
81 |
82 | /* About */
83 | .about {
84 | background-image: url("../images/grass.jpg");
85 | background-size: cover;
86 | background-position: top left;
87 | background-repeat: no-repeat;
88 | webkit-background-size: cover;
89 | -moz-background-size: cover;
90 | -o-background-size: cover;
91 | color: #333;
92 | }
93 |
94 | .about .container {
95 | background: rgba(255, 255, 255, 0.25);
96 | border: solid 1px rgba(255, 255, 255, 0.5);
97 | border-radius: 0.5em;
98 | padding: 1.75em 2.5em 1.75em 2.5em;
99 | display: inline-block;
100 | position: relative;
101 | }
102 |
103 | .about .section-description {
104 | margin-bottom: 4rem;
105 | }
106 |
107 |
108 | /* Footer */
109 | footer {
110 | background-color: #192023;
111 | padding: 25px 0;
112 | }
113 |
114 | footer ul, section.contact ul.list-social {
115 | margin-bottom: 0;
116 | }
117 |
118 | footer, footer ul li a {
119 | color: rgba(255,255,255,.3);
120 | }
121 |
122 | footer, section.contact {
123 | text-align: center;
124 | }
125 |
126 | footer p {
127 | margin: 0;
128 | }
129 |
130 |
131 | /* Bigger than 550 */
132 | @media (min-width: 550px) {
133 | .section {
134 | padding: 10rem 0 10rem;
135 | }
136 | .hero {
137 | padding: 5rem 0 8rem;
138 | text-align: left;
139 | }
140 | .hero-heading {
141 | font-size: 2.4rem;
142 | }
143 | }
144 |
145 | /* Bigger than 750 */
146 | @media (min-width: 750px) {
147 | .hero {
148 | padding: 8rem 0 8rem;
149 | }
150 | .hero-heading {
151 | font-size: 2.6rem;
152 | }
153 | .section {
154 | padding: 14rem 0 14rem;
155 | }
156 | .hero {
157 | padding: 10rem 0 27rem;
158 | }
159 | .section-description {
160 | max-width: 60%;
161 | margin-left: auto;
162 | margin-right: auto;
163 | }
164 | }
165 |
166 | /* Bigger than 1000 */
167 | @media (min-width: 1000px) {
168 | .section {
169 | padding: 10rem 0 10rem;
170 | }
171 | .hero {
172 | padding: 12rem 0 32rem;
173 | }
174 | .hero-heading {
175 | font-size: 3.0rem;
176 | }
177 | }
--------------------------------------------------------------------------------
/src/sass/layout/_grid.scss:
--------------------------------------------------------------------------------
1 | // Grid
2 |
3 | /*
4 | Containers
5 |
6 | Use containers when you need a content area that has standard maximum width and centered on the page.
7 |
8 | Markup:
9 | Container
10 |
11 | .container - Default container size = $container-width
12 | .container--sm - Small Container
13 | .container--lg - Large Container
14 | */
15 |
16 |
17 | .container {
18 | margin: 0 auto;
19 | max-width: $container-width;
20 | padding: 0 10px;
21 | position: relative;
22 | width: 100%;
23 | box-sizing: border-box;
24 | }
25 |
26 | .container--lg {
27 | margin: 0 auto;
28 | max-width: 1200px;
29 | padding: 3.2rem 1rem;
30 | }
31 |
32 | .container--sm {
33 | margin: 0 auto;
34 | max-width: 640px;
35 | padding: 2.4rem 2rem;
36 | }
37 |
38 | // Column
39 | .col {
40 | width: 100%;
41 | float: left;
42 | box-sizing: border-box;
43 | }
44 |
45 | // For devices larger than 400px
46 | @media (#{$bp-larger-than-mobile}) {
47 | .container {
48 | width: $container-width-larger-than-mobile;
49 | padding: 0;
50 | }
51 | }
52 |
53 | // For devices larger than 550px
54 | @media (#{$bp-larger-than-phablet}) {
55 | .container {
56 | width: $container-width-larger-than-phablet;
57 | }
58 | .col {
59 | margin-left: $column-margin;
60 |
61 | &:first-child {
62 | margin-left: 0;
63 | }
64 | }
65 |
66 | .col--1 { width: grid-column-width(1); }
67 | .col--2 { width: grid-column-width(2); }
68 | .col--3 { width: grid-column-width(3); }
69 | .col--4 { width: grid-column-width(4); }
70 | .col--5 { width: grid-column-width(5); }
71 | .col--6 { width: grid-column-width(6); }
72 | .col--7 { width: grid-column-width(7); }
73 | .col--8 { width: grid-column-width(8); }
74 | .col--9 { width: grid-column-width(9); }
75 | .col--10 { width: grid-column-width(10); }
76 | .col--11 { width: grid-column-width(11); }
77 | .col--12 { width: 100%; margin-left: 0; }
78 | // Shortcut Offsets: 1/3, 2/3, 1/2
79 | .col--1-3 { width: grid-column-width(4); }
80 | .col--2-3 { width: grid-column-width(8); }
81 | .col--1-2 { width: grid-column-width(6); }
82 |
83 |
84 | // Offsets
85 | .col--offset-1 { margin-left: grid-offset-length(1) !important; }
86 | .col--offset-2 { margin-left: grid-offset-length(2) !important; }
87 | .col--offset-3 { margin-left: grid-offset-length(3) !important; }
88 | .col--offset-4 { margin-left: grid-offset-length(4) !important; }
89 | .col--offset-5 { margin-left: grid-offset-length(5) !important; }
90 | .col--offset-6 { margin-left: grid-offset-length(6) !important; }
91 | .col--offset-7 { margin-left: grid-offset-length(7) !important; }
92 | .col--offset-8 { margin-left: grid-offset-length(8) !important; }
93 | .col--offset-9 { margin-left: grid-offset-length(9) !important; }
94 | .col--offset-10 { margin-left: grid-offset-length(10) !important; }
95 | .col--offset-11 { margin-left: grid-offset-length(11) !important; }
96 | // Shortcut Offsets: 1/3, 2/3, 1/2
97 | .col--offset-1-3 { margin-left: grid-offset-length(4) !important; }
98 | .col--offset-2-3 { margin-left: grid-offset-length(8) !important; }
99 | .col--offset-1-2 { margin-left: grid-offset-length(6) !important; }
100 |
101 |
102 | }
103 |
104 | // Clearing
105 | //––––––––––––––––––––––––––––––––––––––––––––––––––
106 |
107 | /* Self Clearing Goodness */
108 | .container:after,
109 | .row:after {
110 | clear: both;
111 | content: "";
112 | display: table;
113 | }
114 |
--------------------------------------------------------------------------------
/src/sass/components/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Buttons
2 | //––––––––––––––––––––––––––––––––––––––––––––––––––
3 |
4 | .btn,
5 | .button {
6 | background-color: transparent;
7 | border-radius: $global-radius;
8 | border: 1px solid $border-color;
9 | color: $color-secondary;
10 | cursor: pointer;
11 | display: inline-block;
12 | font-size: inherit;
13 | font-weight: 100;
14 | height: 38px;
15 | letter-spacing: .1rem;
16 | line-height: 38px;
17 | margin-bottom: 1rem;
18 | padding: 0 30px;
19 | text-align: center;
20 | text-decoration: none;
21 | transition-duration: 200ms;
22 | white-space: nowrap;
23 |
24 | &:focus,
25 | &:hover {
26 | @include hover-style;
27 | }
28 |
29 | &:focus{
30 | outline: .1rem dotted $gray;
31 | }
32 |
33 | &:active{
34 | background-color: $color-primary;
35 | }
36 | }
37 |
38 | // Basic Colors
39 | //
40 | .btn--primary {
41 | color: $white;
42 | background-color: $color-primary;
43 | border-color: $color-primary;
44 |
45 | &:focus,
46 | &:hover {
47 | color: $white;
48 | background-color: darken($color-primary, 10%);
49 | border-color: $color-primary;
50 | }
51 | }
52 |
53 | .btn--secondary {
54 | color: $gray-lighter;
55 | background-color: $color-secondary;
56 | border-color: $color-secondary;
57 |
58 | &:focus,
59 | &:hover {
60 | color: $gray-lighter;
61 | background-color: darken($color-secondary, 15%);
62 | border-color: $color-secondary;
63 | }
64 | }
65 |
66 | .btn--success {
67 | background-color: $color-success;
68 | border-color: $color-success;
69 | color: $white;
70 |
71 | &:focus,
72 | &:hover {
73 | color: $white;
74 | background-color: darken($color-success, 5%);
75 | border-color: $color-success;
76 | }
77 | }
78 |
79 | .btn--info {
80 | background-color: $color-info;
81 | border-color: $color-info;
82 | color: $white;
83 |
84 | &:focus,
85 | &:hover {
86 | color: $white;
87 | background-color: darken($color-info, 10%);
88 | border-color: $color-info;
89 | }
90 | }
91 |
92 | .btn--warning {
93 | background-color: $color-warning;
94 | border-color: $color-warning;
95 | color: $white;
96 |
97 | &:focus,
98 | &:hover {
99 | color: $white;
100 | background-color: darken($color-warning, 10%);
101 | border-color: $color-warning;
102 | }
103 | }
104 |
105 | .btn--danger {
106 | background-color: $color-danger;
107 | border-color: $color-danger;
108 | color: $white;
109 |
110 | &:focus,
111 | &:hover {
112 | color: $white;
113 | background-color: darken($color-danger, 10%);
114 | border-color: $color-danger;
115 | }
116 | }
117 |
118 | // Outline Style
119 |
120 | .btn-outline--primary {
121 | background-color: transparent;
122 | border-color: $color-primary;
123 | color: $color-primary;
124 |
125 | &:focus,
126 | &:hover {
127 | color: $white;
128 | background-color: $color-primary;
129 | border-color: $color-primary;
130 | }
131 | }
132 |
133 | .btn-outline--secondary {
134 | background-color: transparent;
135 | border-color: $color-secondary;
136 | color: $color-secondary;
137 |
138 | &:focus,
139 | &:hover {
140 | color: $gray-light;
141 | background-color: $gray-darker;
142 | border-color: $color-secondary;
143 | }
144 | }
145 |
146 |
147 | .btn-outline--success {
148 | background-color: transparent;
149 | border-color: $color-success;
150 | color: $color-success;
151 |
152 | &:focus,
153 | &:hover {
154 | color: $white;
155 | background-color: $color-success !important;
156 | border-color: $color-success;
157 | }
158 | }
159 |
160 | .btn-outline--info {
161 | background-color: transparent;
162 | border-color: $color-info;
163 | color: $color-info;
164 |
165 | &:focus,
166 | &:hover {
167 | color: $white;
168 | background-color: $color-info;
169 | border-color: $color-info;
170 | }
171 | }
172 |
173 | .btn-outline--warning {
174 | background-color: transparent;
175 | border-color: $color-warning;
176 | color: $color-warning;
177 |
178 | &:focus,
179 | &:hover {
180 | color: $white;
181 | background-color: $color-warning;
182 | border-color: $color-warning;
183 | }
184 | }
185 |
186 | .btn-outline--danger {
187 | background-color: transparent;
188 | border-color: $color-danger;
189 | color: $color-danger;
190 |
191 | &:focus,
192 | &:hover {
193 | color: $white;
194 | background-color: $color-danger;
195 | border-color: $color-danger;
196 | }
197 | }
198 |
199 |
200 | // Large-Sized
201 | .btn--lg {
202 | font-size: inherit;
203 | font-weight: 100;
204 | height: 5.8rem;
205 | line-height: 5.8rem;
206 | vertical-align: middle;
207 | padding: 0 4rem;
208 | }
209 |
210 | // Raised Style
211 | .btn--raised {
212 | border-width: 0;
213 | border-bottom-width: 3px;
214 | border-bottom-color: rgba(0,0,0,0.15);
215 | }
216 |
217 | [type="submit"],
218 | [type="reset"],
219 | [type="button"] {
220 | @extend .btn;
221 | }
222 |
223 |
--------------------------------------------------------------------------------
/src/sass/base/_base.scss:
--------------------------------------------------------------------------------
1 | // Contains all basic styles of elements.
2 | // -----------------------------------------------------------------------------
3 | // Make all elements from the DOM inherit from the parent box-sizing
4 | // Since `*` has a specificity of 0, it does not override the `html` value
5 | // making all elements inheriting from the root box-sizing value
6 | // See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
7 |
8 |
9 | // Apply a natural box layout model to all elements, but allowing components
10 | // to change. Html is set to 62.5% so that all the REM measurements throughout
11 | // are based on 10px sizing. So basically 1.4rem = 14px
12 |
13 | // html {
14 | // font-size: 62.5%;
15 | // }
16 |
17 | // body {
18 | // font-size: 1.5em; // currently ems cause chrome bug misinterpreting rems on body element
19 | // line-height: 1.6;
20 | // font-weight: 400;
21 | // font-family: $font-sans-serif;
22 | // color: $font-color;
23 | // }
24 |
25 | html {
26 | box-sizing: border-box;
27 | font-size: 62.5%;
28 | height: 100%;
29 | }
30 |
31 | *,
32 | *:before,
33 | *:after {
34 | box-sizing: inherit;
35 | }
36 |
37 | body {
38 | font-size: $font-size;
39 | line-height: $line-height;
40 | font-weight: 400;
41 | font-family: $font-base;
42 | color: $font-color;
43 | }
44 |
45 | // Links
46 | a {
47 | color: $color-link;
48 | text-decoration: none;
49 | word-wrap: break-word;
50 |
51 | &:hover {
52 | color: shade($color-link, 15%);
53 | }
54 | }
55 |
56 |
57 | // Misc
58 | //––––––––––––––––––––––––––––––––––––––––––––––––––
59 | hr {
60 | margin-top: 3rem;
61 | margin-bottom: 3.5rem;
62 | border-width: 0;
63 | border-top: 1px solid $gray-light;
64 | }
65 |
66 | // Lists
67 | //––––––––––––––––––––––––––––––––––––––––––––––––––
68 |
69 | ul {
70 | list-style: circle inside;
71 | }
72 |
73 | ol {
74 | list-style: decimal inside;
75 | padding-left: 0;
76 | margin-top: 0;
77 | }
78 |
79 | ul {
80 | padding-left: 0;
81 | margin-top: 0;
82 | ul, ol {
83 | margin: 1.5rem 0 1.5rem 3rem;
84 | font-size: 90%;
85 | }
86 | }
87 |
88 | ol {
89 | ol, ul {
90 | margin: 1.5rem 0 1.5rem 3rem;
91 | font-size: 90%;
92 | }
93 | }
94 |
95 | li {
96 | margin-bottom: 1rem;
97 | }
98 |
99 | dt {
100 | font-style: italic;
101 | }
102 |
103 | dd {
104 | padding-left: 2rem;
105 | }
106 |
107 | // Images/Video
108 | //––––––––––––––––––––––––––––––––––––––––––––––––––
109 | img,
110 | video {
111 | display: table;
112 | max-width: 100%;
113 | }
114 |
115 | figure {
116 | margin: 0 auto;
117 | padding-bottom: 2.4rem;
118 |
119 | img {
120 | display: table;
121 | margin: 0 auto;
122 | }
123 | }
124 |
125 | caption,
126 | figcaption {
127 | font-size: $font-size--sm;
128 | font-style: italic;
129 | text-align: center;
130 | }
131 |
132 | // Tables
133 | //––––––––––––––––––––––––––––––––––––––––––––––––––
134 |
135 |
136 | table {
137 | // border-spacing: 0;
138 | // border: 0;
139 | border-collapse: collapse;
140 | border-color: gray;
141 | border-spacing: 2px;
142 | max-width: 100%;
143 | width: 100%;
144 |
145 | thead th {
146 | vertical-align: bottom;
147 | border-bottom: 1px solid $gray-light;
148 | }
149 |
150 | th,
151 | td {
152 | padding: 0.6rem;
153 | vertical-align: top;
154 | border-top: 1px solid #ccc;
155 | }
156 |
157 | th,
158 | tfoot td {
159 | font-weight: 700;
160 | text-align: left;
161 | }
162 |
163 | td {
164 | border-bottom: 1px solid $gray-light;
165 | padding: .6rem;
166 | text-align: left;
167 | vertical-align: top;
168 | }
169 | }
170 |
171 | // Forms
172 | //––––––––––––––––––––––––––––––––––––––––––––––––––
173 |
174 | textarea,
175 | select {
176 | height: 38px;
177 | padding: 6px 10px; // The 6px vertically centers text on FF, ignored by Webkit
178 | background-color: #fff;
179 | border: 1px solid lighten($border-color, 8.8%);
180 | border-radius: $global-radius;
181 | box-shadow: none;
182 |
183 | &:focus {
184 | border: 1px solid $color-primary;
185 | outline: 0;
186 | }
187 | }
188 |
189 | // Removes awkward default styles on some inputs for iOS
190 | input {
191 | &[type="email"],
192 | &[type="number"],
193 | &[type="search"],
194 | &[type="text"],
195 | &[type="tel"],
196 | &[type="url"],
197 | &[type="password"] {
198 | appearance: none;
199 | background-color: #fff;
200 | border-radius: $global-radius;
201 | border: 1px solid lighten($border-color, 8.8%);
202 | box-shadow: none;
203 | box-sizing: border-box;
204 | height: 38px;
205 | padding: 6px 10px; // The 6px vertically centers text on FF, ignored by Webkit
206 | -moz-appearance: none;
207 | -webkit-appearance: none;
208 |
209 | &:focus {
210 | border: 1px solid $color-primary;
211 | outline: 0;
212 | }
213 | }
214 | }
215 |
216 | textarea {
217 | appearance: none;
218 | min-height: 65px;
219 | padding-bottom: 6px;
220 | padding-top: 6px;
221 | -moz-appearance: none;
222 | -webkit-appearance: none;
223 | }
224 |
225 | label,
226 | legend {
227 | display: block;
228 | font-weight: 600;
229 | margin-bottom: .5rem;
230 | }
231 |
232 | fieldset {
233 | padding: 0;
234 | border-width: 0;
235 | }
236 |
237 | input {
238 | &[type="checkbox"],
239 | &[type="radio"] {
240 | display: inline;
241 | }
242 | }
243 |
244 | label > .label-body {
245 | display: inline-block;
246 | font-weight: normal;
247 | margin-left: .5rem;
248 | }
249 |
250 | // Code
251 | //––––––––––––––––––––––––––––––––––––––––––––––––––
252 |
253 | // Contain overflow in all browsers.
254 | pre {
255 | overflow: auto;
256 | }
257 |
258 | code {
259 | background: lighten($gray-light, 6.4%);
260 | border-radius: $global-radius;
261 | border: 1px solid $gray-light;
262 | font-size: 90%;
263 | margin: 0 .2rem;
264 | padding: .2rem .5rem;
265 | white-space: nowrap;
266 | }
267 |
268 | pre > code {
269 | display: block;
270 | padding: 1rem 1.5rem;
271 | white-space: pre;
272 | }
273 |
--------------------------------------------------------------------------------
/docs/examples/landing/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | BEMSkel - A Lightweight CSS Framework built using BEM and SASS
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | Build user interfaces that are easy to customize and scale.
30 |
31 | Try BEMSkel
32 |
33 |
34 |
35 |
36 |
37 |
38 | Main Features
39 |
40 |
41 |
42 |
43 | BEM
44 |
45 |
46 | Written using BEM (Block, Element, Modifier) convention to make your front-end code easier to read and understand.
47 |
48 |
49 |
50 |
51 |
52 | SASS
53 |
54 |
55 | Uses 7-1 Architecture pattern for maintainable and scalable SASS.
56 |
57 |
58 |
59 |
60 |
61 | Flex Grid
62 |
63 |
64 | Two ways of creating grids - CSS Grid and Flexbox.
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | Lightweight
73 |
74 |
75 | Only includes the most important features to minimize code bloat.
76 |
77 |
78 |
79 |
80 |
81 | Gulp Build System
82 |
83 |
84 | Includes a Gulp build system to automate building of SASS files
85 |
86 |
87 |
88 |
89 |
90 | Easy To Extend
91 |
92 |
93 | Designed to be scalable and easy to customize. Use it as a standalone library or use it a starting point to build your next application.
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | Not Just Another CSS Framework
104 |
105 |
106 |
107 | Built To Scale
108 | Written using the BEM naming convention and 7-1 SASS Architecture, BEMSkel provides a solid foundation for building your next large-scale web application or website.
109 |
110 |
111 |
112 | Modular
113 | Includes carefully crafted modules that you can easily customize and extend.
114 |
115 |
116 |
117 | No Bloat
118 | Unlike popular CSS frameworks, BEMSkel only includes the most essential features and basic styles, and letting you to customize and extend without too much overriding existing styles.
119 |
120 |
121 |
122 | Open Source
123 | BEMSkel is released under the MIT license. Do whatever the hell you want with it.
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | Getting Started
132 | BEMSkel provides a solid foundation to build apps and websites with scalability and modularity in mind. To learn more, just visit the documentation.
133 | View Docs
134 |
135 |
136 |
137 |
138 |
139 |
140 | About
141 | BEMSkel was initially based on Skeleton boilerplate but was rewritten using the BEM naming convention and added with new useful features for building component-based applications. As I was building React applications, I needed a CSS framework that will complement the component-based nature of React, and hence, BEMSkel was created.
142 |
143 |
144 |
145 |
161 |
162 |
163 |
164 |
165 |
--------------------------------------------------------------------------------
/src/sass/vendors/normalize.scss:
--------------------------------------------------------------------------------
1 | /*! SCSS version of normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /**
4 | * 1. Change the default font family in all browsers (opinionated).
5 | * 2. Correct the line height in all browsers.
6 | * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
7 | */
8 |
9 | /* Document
10 | ========================================================================== */
11 |
12 | html {
13 | font-family: sans-serif;
14 | /* 1 */
15 | line-height: 1.15;
16 | /* 2 */
17 | -ms-text-size-adjust: 100%;
18 | /* 3 */
19 | -webkit-text-size-adjust: 100%;
20 | /* 3 */
21 | }
22 |
23 | /* Sections
24 | ========================================================================== */
25 |
26 | /**
27 | * Remove the margin in all browsers (opinionated).
28 | */
29 |
30 | body {
31 | margin: 0;
32 | }
33 |
34 | /**
35 | * Add the correct display in IE 9-.
36 | */
37 |
38 | article, aside, footer, header, nav, section {
39 | display: block;
40 | }
41 |
42 | /**
43 | * Correct the font size and margin on `h1` elements within `section` and
44 | * `article` contexts in Chrome, Firefox, and Safari.
45 | */
46 |
47 | h1 {
48 | font-size: 2em;
49 | margin: 0.67em 0;
50 | }
51 |
52 | /* Grouping content
53 | ========================================================================== */
54 |
55 | /**
56 | * Add the correct display in IE 9-.
57 | * 1. Add the correct display in IE.
58 | */
59 |
60 | figcaption, figure, main {
61 | /* 1 */
62 | display: block;
63 | }
64 |
65 | /**
66 | * Add the correct margin in IE 8.
67 | */
68 |
69 | figure {
70 | margin: 1em 40px;
71 | }
72 |
73 | /**
74 | * 1. Add the correct box sizing in Firefox.
75 | * 2. Show the overflow in Edge and IE.
76 | */
77 |
78 | hr {
79 | box-sizing: content-box;
80 | /* 1 */
81 | height: 0;
82 | /* 1 */
83 | overflow: visible;
84 | /* 2 */
85 | }
86 |
87 | /**
88 | * 1. Correct the inheritance and scaling of font size in all browsers.
89 | * 2. Correct the odd `em` font sizing in all browsers.
90 | */
91 |
92 | pre {
93 | font-family: monospace, monospace;
94 | /* 1 */
95 | font-size: 1em;
96 | /* 2 */
97 | }
98 |
99 | /* Text-level semantics
100 | ========================================================================== */
101 |
102 | /**
103 | * 1. Remove the gray background on active links in IE 10.
104 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
105 | */
106 |
107 | a {
108 | background-color: transparent;
109 | /* 1 */
110 | -webkit-text-decoration-skip: objects;
111 | /* 2 */
112 | &:active, &:hover {
113 | outline-width: 0;
114 | }
115 | }
116 |
117 | /**
118 | * Remove the outline on focused links when they are also active or hovered
119 | * in all browsers (opinionated).
120 | */
121 |
122 | /**
123 | * 1. Remove the bottom border in Firefox 39-.
124 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
125 | */
126 |
127 | abbr[title] {
128 | border-bottom: none;
129 | /* 1 */
130 | text-decoration: underline;
131 | /* 2 */
132 | text-decoration: underline dotted;
133 | /* 2 */
134 | }
135 |
136 | /**
137 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
138 | */
139 |
140 | b, strong {
141 | font-weight: inherit;
142 | }
143 |
144 | /**
145 | * Add the correct font weight in Chrome, Edge, and Safari.
146 | */
147 |
148 | b, strong {
149 | font-weight: bolder;
150 | }
151 |
152 | /**
153 | * 1. Correct the inheritance and scaling of font size in all browsers.
154 | * 2. Correct the odd `em` font sizing in all browsers.
155 | */
156 |
157 | code, kbd, samp {
158 | font-family: monospace, monospace;
159 | /* 1 */
160 | font-size: 1em;
161 | /* 2 */
162 | }
163 |
164 | /**
165 | * Add the correct font style in Android 4.3-.
166 | */
167 |
168 | dfn {
169 | font-style: italic;
170 | }
171 |
172 | /**
173 | * Add the correct background and color in IE 9-.
174 | */
175 |
176 | mark {
177 | background-color: #ff0;
178 | color: #000;
179 | }
180 |
181 | /**
182 | * Add the correct font size in all browsers.
183 | */
184 |
185 | small {
186 | font-size: 80%;
187 | }
188 |
189 | /**
190 | * Prevent `sub` and `sup` elements from affecting the line height in
191 | * all browsers.
192 | */
193 |
194 | sub, sup {
195 | font-size: 75%;
196 | line-height: 0;
197 | position: relative;
198 | vertical-align: baseline;
199 | }
200 |
201 | sub {
202 | bottom: -0.25em;
203 | }
204 |
205 | sup {
206 | top: -0.5em;
207 | }
208 |
209 | /* Embedded content
210 | ========================================================================== */
211 |
212 | /**
213 | * Add the correct display in IE 9-.
214 | */
215 |
216 | audio, video {
217 | display: inline-block;
218 | }
219 |
220 | /**
221 | * Add the correct display in iOS 4-7.
222 | */
223 |
224 | audio:not([controls]) {
225 | display: none;
226 | height: 0;
227 | }
228 |
229 | /**
230 | * Remove the border on images inside links in IE 10-.
231 | */
232 |
233 | img {
234 | border-style: none;
235 | }
236 |
237 | /**
238 | * Hide the overflow in IE.
239 | */
240 |
241 | svg:not(:root) {
242 | overflow: hidden;
243 | }
244 |
245 | /* Forms
246 | ========================================================================== */
247 |
248 | /**
249 | * 1. Change font properties to `inherit` in all browsers (opinionated).
250 | * 2. Remove the margin in Firefox and Safari.
251 | */
252 |
253 | button, input, optgroup, select, textarea {
254 | font: inherit;
255 | /* 1 */
256 | margin: 0;
257 | /* 2 */
258 | }
259 |
260 | /**
261 | * Restore the font weight unset by the previous rule.
262 | */
263 |
264 | optgroup {
265 | font-weight: bold;
266 | }
267 |
268 | /**
269 | * Show the overflow in IE.
270 | * 1. Show the overflow in Edge.
271 | */
272 |
273 | button, input {
274 | /* 1 */
275 | overflow: visible;
276 | }
277 |
278 | /**
279 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
280 | * 1. Remove the inheritance of text transform in Firefox.
281 | */
282 |
283 | button, select {
284 | /* 1 */
285 | text-transform: none;
286 | }
287 |
288 | /**
289 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
290 | * controls in Android 4.
291 | * 2. Correct the inability to style clickable types in iOS and Safari.
292 | */
293 |
294 | button, html [type="button"], [type="reset"], [type="submit"] {
295 | -webkit-appearance: button;
296 | /* 2 */
297 | }
298 |
299 | /**
300 | * Remove the inner border and padding in Firefox.
301 | */
302 |
303 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
304 | border-style: none;
305 | padding: 0;
306 | }
307 |
308 | /**
309 | * Restore the focus styles unset by the previous rule.
310 | */
311 |
312 | button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
313 | outline: 1px dotted ButtonText;
314 | }
315 |
316 | /**
317 | * Change the border, margin, and padding in all browsers (opinionated).
318 | */
319 |
320 | fieldset {
321 | border: 1px solid #c0c0c0;
322 | margin: 0 2px;
323 | padding: 0.35em 0.625em 0.75em;
324 | }
325 |
326 | /**
327 | * 1. Correct the text wrapping in Edge and IE.
328 | * 2. Correct the color inheritance from `fieldset` elements in IE.
329 | * 3. Remove the padding so developers are not caught out when they zero out
330 | * `fieldset` elements in all browsers.
331 | */
332 |
333 | legend {
334 | box-sizing: border-box;
335 | /* 1 */
336 | color: inherit;
337 | /* 2 */
338 | display: table;
339 | /* 1 */
340 | max-width: 100%;
341 | /* 1 */
342 | padding: 0;
343 | /* 3 */
344 | white-space: normal;
345 | /* 1 */
346 | }
347 |
348 | /**
349 | * 1. Add the correct display in IE 9-.
350 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
351 | */
352 |
353 | progress {
354 | display: inline-block;
355 | /* 1 */
356 | vertical-align: baseline;
357 | /* 2 */
358 | }
359 |
360 | /**
361 | * Remove the default vertical scrollbar in IE.
362 | */
363 |
364 | textarea {
365 | overflow: auto;
366 | }
367 |
368 | /**
369 | * 1. Add the correct box sizing in IE 10-.
370 | * 2. Remove the padding in IE 10-.
371 | */
372 |
373 | [type="checkbox"], [type="radio"] {
374 | box-sizing: border-box;
375 | /* 1 */
376 | padding: 0;
377 | /* 2 */
378 | }
379 |
380 | /**
381 | * Correct the cursor style of increment and decrement buttons in Chrome.
382 | */
383 |
384 | [type="number"] {
385 | &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
386 | height: auto;
387 | }
388 | }
389 |
390 | /**
391 | * 1. Correct the odd appearance in Chrome and Safari.
392 | * 2. Correct the outline style in Safari.
393 | */
394 |
395 | [type="search"] {
396 | -webkit-appearance: textfield;
397 | /* 1 */
398 | outline-offset: -2px;
399 | /* 2 */
400 | &::-webkit-search-cancel-button, &::-webkit-search-decoration {
401 | -webkit-appearance: none;
402 | }
403 | }
404 |
405 | /**
406 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
407 | */
408 |
409 | /**
410 | * 1. Correct the inability to style clickable types in iOS and Safari.
411 | * 2. Change font properties to `inherit` in Safari.
412 | */
413 |
414 | ::-webkit-file-upload-button {
415 | -webkit-appearance: button;
416 | /* 1 */
417 | font: inherit;
418 | /* 2 */
419 | }
420 |
421 | /* Interactive
422 | ========================================================================== */
423 |
424 | /*
425 | * Add the correct display in IE 9-.
426 | * 1. Add the correct display in Edge, IE, and Firefox.
427 | */
428 |
429 | details, menu {
430 | display: block;
431 | }
432 |
433 | /*
434 | * Add the correct display in all browsers.
435 | */
436 |
437 | summary {
438 | display: list-item;
439 | }
440 |
441 | /* Scripting
442 | ========================================================================== */
443 |
444 | /**
445 | * Add the correct display in IE 9-.
446 | */
447 |
448 | canvas {
449 | display: inline-block;
450 | }
451 |
452 | /**
453 | * Add the correct display in IE.
454 | */
455 |
456 | template, [hidden] {
457 | display: none;
458 | }
459 |
--------------------------------------------------------------------------------
/docs/css/custom.css:
--------------------------------------------------------------------------------
1 | /* Custom CSS */
2 | body {
3 | background-color: #ffffff;
4 | color: #666;
5 | }
6 |
7 | code {
8 | border: 0px;
9 | }
10 |
11 | .project-header {
12 | background-color: #192023;
13 | background-color: #c00;
14 | background-repeat: repeat;
15 | background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSIjMTExIj48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgc3Ryb2tlLXdpZHRoPSIyIj48L3BhdGg+CjxwYXRoIGQ9Ik0yOCAwTDI4IDM0TDAgNTBMMCA4NEwyOCAxMDBMNTYgODRMNTYgNTBMMjggMzQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgc3Ryb2tlLXdpZHRoPSIyIj48L3BhdGg+Cjwvc3ZnPg=="),linear-gradient(to left, #192023, #7b4397);
16 | color: #fff;
17 | font-weight: 100;
18 | padding: 16rem 0 16rem;
19 | }
20 |
21 | .project-header__buttons a {
22 | font-weight: 700;
23 | }
24 |
25 | .project-header__title {
26 | font-weight: 100;
27 | font-size: 4.5rem;
28 | display: block;
29 | margin-bottom: 2rem;
30 | color: #ddd;
31 | letter-spacing: .2rem;
32 | }
33 |
34 | .project-header__description {
35 | font-size: 2.5rem;
36 | font-weight: 100;
37 | line-height: 3rem;
38 | letter-spacing: 0.1rem;
39 | display: block;
40 | margin-bottom: 2rem;
41 | color: #ccc;
42 | }
43 |
44 | .features {
45 | font-weight: 400;
46 | padding-top: 2rem;
47 | padding-bottom: 2rem;
48 | background-color: #C3423F;
49 | color: #333;
50 | }
51 |
52 | .features h2 {
53 | text-align: center;
54 | margin-bottom: 2.1rem;
55 | }
56 |
57 | .features h5 {
58 | text-align: left;
59 | font-weight: 400;
60 | margin-bottom: .2rem;
61 | font-size: 1.9rem;
62 | }
63 |
64 | .features p {
65 | text-align: left;
66 | margin-bottom: 2.3rem;
67 | line-height: 2.1rem;
68 | letter-spacing: .1rem;
69 | }
70 |
71 | .features a {
72 | color: #333;
73 | font-weight: 700;
74 | border-bottom: 3px solid #E84855;
75 | }
76 |
77 | .features a:hover {
78 | color: #111;
79 | border-bottom: 3px solid #FC6471;
80 | transition-duration: 200;
81 | }
82 |
83 | .features__list {
84 | margin-top: 4rem;
85 | margin-bottom: 4rem;
86 | }
87 |
88 | .code-section {
89 | background-color: #000;
90 | }
91 |
92 | .docs-section {
93 | padding: 2rem 0;
94 | margin-bottom: 0;
95 | }
96 |
97 | .docs-section__header {
98 | font-weight: 100;
99 | letter-spacing: .1rem;
100 | text-transform: uppercase;
101 | }
102 |
103 | .demo-grid .col {
104 | background: #888;
105 | border-radius: .1rem;
106 | color: #eee;
107 | font-size: 1rem;
108 | font-weight: 600;
109 | height: 30px;
110 | letter-spacing: .1rem;
111 | line-height: 30px;
112 | margin-bottom: .75rem;
113 | text-align: center;
114 | text-transform: uppercase;
115 | }
116 |
117 | .demo-grid .flex-grid__col {
118 | background: #888;
119 | border-radius: .2rem;
120 | color: #eee;
121 | display: block;
122 | font-size: 1rem;
123 | font-weight: 600;
124 | height: 30px;
125 | letter-spacing: .1rem;
126 | line-height: 30px;
127 | margin-bottom: .755rem;
128 | text-align: center;
129 | text-transform: uppercase;
130 | }
131 |
132 | .docs-sample .row,
133 | .docs-sample.row,
134 | .docs-sample form {
135 | margin-bottom: 0;
136 | }
137 |
138 | .docs-sample h1,
139 | .docs-sample h2,
140 | .docs-sample h3,
141 | .docs-sample h4,
142 | .docs-sample h5,
143 | .docs-sample h6 {
144 | margin-bottom: 1rem;
145 | }
146 |
147 | .heading-font-size {
148 | font-size: 1.2rem;
149 | color: #999;
150 | letter-spacing: normal;
151 | }
152 |
153 | .code-sample {
154 | margin-top: 1.5rem;
155 | margin-bottom: 0;
156 | }
157 |
158 | .code-sample__body {
159 | white-space: pre;
160 | word-wrap: break-word
161 | }
162 |
163 | /* Bu/Coming Soons Section */
164 |
165 | .built-with {
166 | background-color: #4A4090;
167 | color: #eee;
168 | }
169 |
170 | .built-with__links {
171 | text-align: center;
172 | margin-top: 1.5rem;
173 | }
174 |
175 | .sample {
176 | position: relative;
177 | margin-top: 4rem;
178 | }
179 |
180 | .sample__header {
181 | font-weight: 600;
182 | margin-top: 1.5rem;
183 | margin-bottom: .5rem;
184 | }
185 |
186 | .sample__description {
187 | margin-bottom: 1.5rem;
188 | }
189 |
190 | .sample__screenshot-container {
191 | border-radius: 50rem;
192 | display: block;
193 | position: relative;
194 | }
195 |
196 | .sample__screenshot {
197 | width: 100%;
198 | height: 100%;
199 | }
200 |
201 | .coming-soon {
202 | position: relative;
203 | margin-top: 4rem;
204 | text-align: center;
205 | }
206 |
207 | .coming-soon__title {
208 | font-weight: 100;
209 | letter-spacing: .1rem;
210 | text-transform: uppercase;
211 | }
212 |
213 | .coming-soon__description {
214 | margin-bottom: 1.5rem;
215 | }
216 |
217 | /* Navbar */
218 | .navbar {
219 | display: none;
220 | }
221 |
222 |
223 | /* Footer */
224 | .list-inline {
225 | padding-left: 0;
226 | margin-left: -5px;
227 | list-style: none;
228 | }
229 |
230 | .list-inline > li {
231 | display: inline-block;
232 | padding-right: 5px;
233 | padding-left: 5px;
234 | }
235 |
236 | footer {
237 | background-color: #192023;
238 | padding: 25px 0;
239 | }
240 |
241 | footer ul, section.contact ul.list-social {
242 | margin-bottom: 0;
243 | }
244 |
245 | footer, footer ul li a {
246 | color: rgba(255,255,255,.3);
247 | }
248 |
249 | footer, section.contact {
250 | text-align: center;
251 | }
252 |
253 | footer p {
254 | margin: 0;
255 | }
256 |
257 | /* Scrollbars */
258 | ::-webkit-scrollbar {
259 | width: 8px;
260 | }
261 |
262 | ::-webkit-scrollbar-button {
263 | width: 8px;
264 | height: 5px;
265 | }
266 |
267 | ::-webkit-scrollbar-track {
268 | background: #333;
269 | border: thin solid #111;
270 | border-radius: 10px;
271 | }
272 |
273 | ::-webkit-scrollbar-thumb {
274 | background: #222;
275 | border: thin solid #222;
276 | border-radius: 10px;
277 | }
278 |
279 | ::-webkit-scrollbar-thumb:hover {
280 | background: #333;
281 | border: thin solid #222;
282 | border-radius: 10px;
283 | }
284 |
285 |
286 | /* Larger than phone */
287 | @media (min-width: 550px) {
288 |
289 | .features {
290 | padding-top: 4rem;
291 | padding-bottom: 4rem;
292 | }
293 |
294 | .demo-grid .col {
295 | margin-bottom: 1.5rem;
296 | }
297 |
298 | .demo-grid .flex-grid__col {
299 | margin-bottom: 1.5rem;
300 | }
301 |
302 | .docs-section {
303 | padding: 6rem 0;
304 | }
305 |
306 | .sample__send-yourself-copy {
307 | float: right;
308 | margin-top: 12px;
309 | }
310 |
311 | .sample__screenshot-container {
312 | width: 100%;
313 | height: 100%;
314 | left: 0;
315 | }
316 | }
317 |
318 | /* Larger than tablet */
319 | @media (min-width: 750px) {
320 | /* Navbar */
321 | .navbar + .docs-section {
322 | border-top-width: 0;
323 | }
324 |
325 | .navbar,
326 | .navbar-spacer {
327 | background: rgba(0,0,0,.8);
328 | border-bottom: 1px solid #C3423F;
329 | color: #fff;
330 | display: block;
331 | height: 4.5rem;
332 | padding-left: 1rem;
333 | width: 100%;
334 | z-index: 9999;
335 | }
336 |
337 | .navbar-spacer {
338 | display: none;
339 | }
340 |
341 | .navbar > .container {
342 | width: 100%;
343 | }
344 |
345 | .navbar--list {
346 | list-style: none;
347 | margin-bottom: 0;
348 | }
349 |
350 | .navbar__item {
351 | position: relative;
352 | float: left;
353 | margin-bottom: 0;
354 | }
355 |
356 | .navbar--link {
357 | text-transform: uppercase;
358 | font-size: 1.5rem;
359 | font-weight: 100;
360 | letter-spacing: .2rem;
361 | margin-right: 35px;
362 | text-decoration: none;
363 | line-height: 4.5rem;
364 | color: #eee;
365 | }
366 |
367 | .navbar--link.active {
368 | color: #496DDB;
369 | }
370 |
371 | .has-docked-nav .navbar {
372 | position: fixed;
373 | top: 0;
374 | left: 0;
375 | }
376 |
377 | .has-docked-nav .navbar-spacer {
378 | display: block;
379 | }
380 |
381 | /* Re-overiding the width 100% declaration to match size of % based container */
382 | .has-docked-nav .navbar > .container {
383 | width: 80%;
384 | }
385 |
386 | /* Popover */
387 | .popover.open {
388 | display: block;
389 | }
390 |
391 | .popover {
392 | display: none;
393 | position: absolute;
394 | top: 0;
395 | left: 0;
396 | background: #fff;
397 | border: 1px solid #eee;
398 | border-radius: 4px;
399 | top: 92%;
400 | z-index: 999;
401 | /*left: -50%;*/
402 | -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
403 | -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
404 | filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
405 | }
406 |
407 | .popover__item:first-child .popover--link:after,
408 | .popover__item:first-child .popover--link:before {
409 | bottom: 100%;
410 | left: 50%;
411 | border: solid transparent;
412 | content: " ";
413 | height: 0;
414 | width: 0;
415 | position: absolute;
416 | pointer-events: none;
417 | }
418 |
419 | .popover__item:first-child .popover--link:after {
420 | border-color: rgba(255, 255, 255, 0);
421 | border-bottom-color: #fff;
422 | border-width: 10px;
423 | margin-left: -10px;
424 | }
425 | .popover__item:first-child .popover--link:before {
426 | border-color: rgba(238, 238, 238, 0);
427 | border-bottom-color: #eee;
428 | border-width: 11px;
429 | margin-left: -11px;
430 | }
431 |
432 | .popover--list {
433 | padding: 0;
434 | margin: 0;
435 | list-style: none;
436 | }
437 |
438 | .popover__item {
439 | padding: 0;
440 | margin: 0;
441 | }
442 |
443 | .popover--link {
444 | border-bottom: 1px solid #eee;
445 | color: #222;
446 | display: block;
447 | font-size: 1.0rem;
448 | font-weight: 600;
449 | letter-spacing: .1rem;
450 | padding: 8px 20px;
451 | position: relative;
452 | text-align: center;
453 | text-decoration: none;
454 | text-transform: uppercase;
455 | }
456 |
457 | .popover__item:first-child .popover--link {
458 | border-radius: 4px 4px 0 0;
459 | }
460 |
461 | .popover__item:last-child .popover--link {
462 | border-radius: 0 0 4px 4px;
463 | border-bottom-width: 0;
464 | }
465 |
466 | .popover--link:hover {
467 | color: #fff;
468 | background: #FE4A49;
469 | }
470 |
471 | .popover--link:hover,
472 | .popover__item:first-child .popover--link:hover:after {
473 | border-bottom-color: #FE4A49;
474 | }
475 | }
476 |
--------------------------------------------------------------------------------
/dist/bemskel.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * bemskel - A Lightweight CSS Framework written in BEM and SASS for building scalable component-based user interfaces
3 | * @version v1.0.0
4 | * @homepage https://github.com/karloespiritu/bemskel#readme
5 | * @copyright 2018 Karlo Espiritu
6 | * @license MIT
7 | */
8 |
9 | /*! SCSS version of normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}html{box-sizing:border-box;font-size:62.5%;height:100%}*,:after,:before{box-sizing:inherit}body{font-size:1.6rem;line-height:2.4rem;font-weight:400;font-family:Roboto,Helvetica,Arial,sans-serif;color:#222}a{color:#496ddb;text-decoration:none;word-wrap:break-word}a:hover{color:shade(#496ddb,15%)}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #d3d3d3}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}dt{font-style:italic}dd{padding-left:2rem}img,video{display:table;max-width:100%}figure{margin:0 auto;padding-bottom:2.4rem}figure img{display:table;margin:0 auto}table{border-collapse:collapse;border-color:gray;border-spacing:2px;max-width:100%;width:100%}table thead th{vertical-align:bottom;border-bottom:1px solid #d3d3d3}table td,table th{padding:.6rem;vertical-align:top;border-top:1px solid #ccc}table tfoot td,table th{font-weight:700;text-align:left}table td{border-bottom:1px solid #d3d3d3;padding:.6rem;text-align:left;vertical-align:top}select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #d1d1d1;border-radius:.2rem;box-shadow:none}select:focus,textarea:focus{border:1px solid #3498db;outline:0}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url]{appearance:none;background-color:#fff;border-radius:.2rem;border:1px solid #d1d1d1;box-shadow:none;box-sizing:border-box;height:38px;padding:6px 10px;-moz-appearance:none;-webkit-appearance:none}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus{border:1px solid #3498db;outline:0}textarea{appearance:none;min-height:65px;padding-bottom:6px;padding-top:6px;-moz-appearance:none;-webkit-appearance:none}label,legend{display:block;font-weight:600;margin-bottom:.5rem}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;font-weight:400;margin-left:.5rem}pre{overflow:auto}code{background:#e3e3e3;border-radius:.2rem;border:1px solid #d3d3d3;font-size:90%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}.u-full-width{width:100%}.u-max-full-width{max-width:100%}.u-pull--right{float:right}.u-pull--left{float:left}.u-disabled{cursor:default;opacity:.5;pointer-events:none}.u-clearfix:after{clear:both;content:"";display:table}.u-hide-text{overflow:hidden;padding:0;text-indent:101%;white-space:nowrap}.u-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.u-ta-left{text-align:left;text-align:center}.u-ta-right{text-align:right}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300;word-wrap:break-word}h1{font-size:4rem;line-height:1.2}h1,h2{letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width:550px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}blockquote{margin:0 0 2.4rem 1.2rem;border-left:.3rem solid #545454;padding:2.4rem 1.2rem}blockquote p:last-child{padding-bottom:0}small,sub,sup{font-size:2rem;line-height:1}caption,figcaption{font-size:2rem;font-style:italic;text-align:center}cite,em,i{font-style:italic}q:after,q:before{content:"'"}q>q{font-style:italic}abbr,dfn{border-bottom:.1rem dotted #d3d3d3;cursor:default}button,input{margin-bottom:1rem}fieldset,select,textarea{margin-bottom:1.4rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.4rem}li{margin-bottom:1rem}label{margin-bottom:.25rem}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}@page{margin:.5cm}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.container{margin:0 auto;max-width:1000px;padding:0 10px;position:relative;width:100%;box-sizing:border-box}.container--lg{margin:0 auto;max-width:1200px;padding:3.2rem 1rem}.container--sm{margin:0 auto;max-width:640px;padding:2.4rem 2rem}.col{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.col{margin-left:2%}.col:first-child{margin-left:0}.col--1{width:6.5%}.col--2{width:15%}.col--3{width:23.5%}.col--4{width:32%}.col--5{width:40.5%}.col--6{width:49%}.col--7{width:57.5%}.col--8{width:66%}.col--9{width:74.5%}.col--10{width:83%}.col--11{width:91.5%}.col--12{width:100%;margin-left:0}.col--1-3{width:32%}.col--2-3{width:66%}.col--1-2{width:49%}.col--offset-1{margin-left:8.5%!important}.col--offset-2{margin-left:17%!important}.col--offset-3{margin-left:25.5%!important}.col--offset-4{margin-left:34%!important}.col--offset-5{margin-left:42.5%!important}.col--offset-6{margin-left:51%!important}.col--offset-7{margin-left:59.5%!important}.col--offset-8{margin-left:68%!important}.col--offset-9{margin-left:76.5%!important}.col--offset-10{margin-left:85%!important}.col--offset-11{margin-left:93.5%!important}.col--offset-1-3{margin-left:34%!important}.col--offset-2-3{margin-left:68%!important}.col--offset-1-2{margin-left:51%!important}}.container:after,.row:after{clear:both;content:"";display:table}.flex-grid{display:flex}.flex-grid>*{flex:1}.flex-grid>.flex-grid__col{flex-grow:4;margin-left:2%}.flex-grid>.flex-grid__col--fixed-width{flex:0 0 200px}.flex-grid>.flex-grid__col--sm{flex-grow:2}.flex-grid>.flex-grid__col--lg{flex-grow:8}.flex-grid>:first-child{margin-left:0}.flex-grid>:last-child{margin-right:0}@media (max-width:549px){.flex-grid--md{display:block}.flex-grid--md>*{padding-left:0;padding-right:0}.flex-grid--md>.flex-grid__col{margin-left:0}}@media (max-width:959px){.flex-grid--lg{display:block}.flex-grid--lg>*{padding-left:0;padding-right:0}.flex-grid--lg>.flex-grid__col{margin-left:0}}.btn,.button,[type=button],[type=reset],[type=submit]{background-color:transparent;border-radius:.2rem;border:1px solid #bbb;color:#7e7e7e;cursor:pointer;display:inline-block;font-size:inherit;font-weight:100;height:38px;letter-spacing:.1rem;line-height:38px;margin-bottom:1rem;padding:0 30px;text-align:center;text-decoration:none;transition-duration:.2s;white-space:nowrap}.btn:focus,.btn:hover,.button:focus,.button:hover,[type=button]:focus,[type=button]:hover,[type=reset]:focus,[type=reset]:hover,[type=submit]:focus,[type=submit]:hover{color:#7e7e7e;border-color:#d3d3d3;outline:0}.btn:focus,.button:focus,[type=button]:focus,[type=reset]:focus,[type=submit]:focus{outline:.1rem dotted #a8a8a8}.btn:active,.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active{background-color:#3498db}.btn--primary{color:#fff;background-color:#3498db;border-color:#3498db}.btn--primary:focus,.btn--primary:hover{color:#fff;background-color:#217dbb;border-color:#3498db}.btn--secondary{color:#e4e4e4;background-color:#7e7e7e;border-color:#7e7e7e}.btn--secondary:focus,.btn--secondary:hover{color:#e4e4e4;background-color:#585858;border-color:#7e7e7e}.btn--success{background-color:#2bc016;border-color:#2bc016;color:#fff}.btn--success:focus,.btn--success:hover{color:#fff;background-color:#26a913;border-color:#2bc016}.btn--info{background-color:#5bc0eb;border-color:#5bc0eb;color:#fff}.btn--info:focus,.btn--info:hover{color:#fff;background-color:#2eafe5;border-color:#5bc0eb}.btn--warning{background-color:#e67e22;border-color:#e67e22;color:#fff}.btn--warning:focus,.btn--warning:hover{color:#fff;background-color:#bf6516;border-color:#e67e22}.btn--danger{background-color:#c3423f;border-color:#c3423f;color:#fff}.btn--danger:focus,.btn--danger:hover{color:#fff;background-color:#9e3431;border-color:#c3423f}.btn-outline--primary{background-color:transparent;border-color:#3498db;color:#3498db}.btn-outline--primary:focus,.btn-outline--primary:hover{color:#fff;background-color:#3498db;border-color:#3498db}.btn-outline--secondary{background-color:transparent;border-color:#7e7e7e;color:#7e7e7e}.btn-outline--secondary:focus,.btn-outline--secondary:hover{color:#d3d3d3;background-color:#545454;border-color:#7e7e7e}.btn-outline--success{background-color:transparent;border-color:#2bc016;color:#2bc016}.btn-outline--success:focus,.btn-outline--success:hover{color:#fff;background-color:#2bc016!important;border-color:#2bc016}.btn-outline--info{background-color:transparent;border-color:#5bc0eb;color:#5bc0eb}.btn-outline--info:focus,.btn-outline--info:hover{color:#fff;background-color:#5bc0eb;border-color:#5bc0eb}.btn-outline--warning{background-color:transparent;border-color:#e67e22;color:#e67e22}.btn-outline--warning:focus,.btn-outline--warning:hover{color:#fff;background-color:#e67e22;border-color:#e67e22}.btn-outline--danger{background-color:transparent;border-color:#c3423f;color:#c3423f}.btn-outline--danger:focus,.btn-outline--danger:hover{color:#fff;background-color:#c3423f;border-color:#c3423f}.btn--lg{font-size:inherit;font-weight:100;height:5.8rem;line-height:5.8rem;vertical-align:middle;padding:0 4rem}.btn--raised{border-width:0;border-bottom-width:3px;border-bottom-color:rgba(0,0,0,.15)}.pager{list-style:none;margin-bottom:1.5rem;margin-left:0;text-align:center}.pager li{margin:0;display:inline-block}.pager li:last-child{margin-right:0}.pager li:hover{background-color:tint(#d3d3d3,30%)}.pager li a{display:inline-block;padding:0 1rem}.pager li a:hover{background-color:#e4e4e4;text-decoration:none}.pager li.pager--current{background-color:#3498db}.pager li.pager--current a{color:#fff;padding:0 1rem;margin-bottom:0}.pager li.pager--current a:hover{background-color:#3498db;padding:0 1rem}.table thead>tr{border-bottom:.2rem solid #d3d3d3}.table--bordered td,.table--bordered th{border:.05rem solid #d3d3d3}.table--hover tbody tr:hover,.table--striped tbody>tr:nth-child(odd)>td{background-color:#e4e4e4}.table--compact thead>tr{border-bottom:.2rem solid #d3d3d3}.table--compact td,.table--compact th{padding:.3rem}.table-responsive{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.table-responsive table{margin-bottom:.5rem}.dark{background-color:#1d1d1d}
--------------------------------------------------------------------------------
/docs/css/bemskel/bemskel.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * bemskel - A Lightweight CSS Framework written in BEM and SASS for building scalable component-based user interfaces
3 | * @version v1.0.0
4 | * @homepage https://github.com/karloespiritu/bemskel#readme
5 | * @copyright 2018 Karlo Espiritu
6 | * @license MIT
7 | */
8 |
9 | /*! SCSS version of normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}html{box-sizing:border-box;font-size:62.5%;height:100%}*,:after,:before{box-sizing:inherit}body{font-size:1.6rem;line-height:2.4rem;font-weight:400;font-family:Roboto,Helvetica,Arial,sans-serif;color:#222}a{color:#496ddb;text-decoration:none;word-wrap:break-word}a:hover{color:shade(#496ddb,15%)}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #d3d3d3}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}dt{font-style:italic}dd{padding-left:2rem}img,video{display:table;max-width:100%}figure{margin:0 auto;padding-bottom:2.4rem}figure img{display:table;margin:0 auto}table{border-collapse:collapse;border-color:gray;border-spacing:2px;max-width:100%;width:100%}table thead th{vertical-align:bottom;border-bottom:1px solid #d3d3d3}table td,table th{padding:.6rem;vertical-align:top;border-top:1px solid #ccc}table tfoot td,table th{font-weight:700;text-align:left}table td{border-bottom:1px solid #d3d3d3;padding:.6rem;text-align:left;vertical-align:top}select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #d1d1d1;border-radius:.2rem;box-shadow:none}select:focus,textarea:focus{border:1px solid #3498db;outline:0}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url]{appearance:none;background-color:#fff;border-radius:.2rem;border:1px solid #d1d1d1;box-shadow:none;box-sizing:border-box;height:38px;padding:6px 10px;-moz-appearance:none;-webkit-appearance:none}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus{border:1px solid #3498db;outline:0}textarea{appearance:none;min-height:65px;padding-bottom:6px;padding-top:6px;-moz-appearance:none;-webkit-appearance:none}label,legend{display:block;font-weight:600;margin-bottom:.5rem}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;font-weight:400;margin-left:.5rem}pre{overflow:auto}code{background:#e3e3e3;border-radius:.2rem;border:1px solid #d3d3d3;font-size:90%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}.u-full-width{width:100%}.u-max-full-width{max-width:100%}.u-pull--right{float:right}.u-pull--left{float:left}.u-disabled{cursor:default;opacity:.5;pointer-events:none}.u-clearfix:after{clear:both;content:"";display:table}.u-hide-text{overflow:hidden;padding:0;text-indent:101%;white-space:nowrap}.u-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.u-ta-left{text-align:left;text-align:center}.u-ta-right{text-align:right}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300;word-wrap:break-word}h1{font-size:4rem;line-height:1.2}h1,h2{letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width:550px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}blockquote{margin:0 0 2.4rem 1.2rem;border-left:.3rem solid #545454;padding:2.4rem 1.2rem}blockquote p:last-child{padding-bottom:0}small,sub,sup{font-size:2rem;line-height:1}caption,figcaption{font-size:2rem;font-style:italic;text-align:center}cite,em,i{font-style:italic}q:after,q:before{content:"'"}q>q{font-style:italic}abbr,dfn{border-bottom:.1rem dotted #d3d3d3;cursor:default}button,input{margin-bottom:1rem}fieldset,select,textarea{margin-bottom:1.4rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.4rem}li{margin-bottom:1rem}label{margin-bottom:.25rem}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}@page{margin:.5cm}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.container{margin:0 auto;max-width:1000px;padding:0 10px;position:relative;width:100%;box-sizing:border-box}.container--lg{margin:0 auto;max-width:1200px;padding:3.2rem 1rem}.container--sm{margin:0 auto;max-width:640px;padding:2.4rem 2rem}.col{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.col{margin-left:2%}.col:first-child{margin-left:0}.col--1{width:6.5%}.col--2{width:15%}.col--3{width:23.5%}.col--4{width:32%}.col--5{width:40.5%}.col--6{width:49%}.col--7{width:57.5%}.col--8{width:66%}.col--9{width:74.5%}.col--10{width:83%}.col--11{width:91.5%}.col--12{width:100%;margin-left:0}.col--1-3{width:32%}.col--2-3{width:66%}.col--1-2{width:49%}.col--offset-1{margin-left:8.5%!important}.col--offset-2{margin-left:17%!important}.col--offset-3{margin-left:25.5%!important}.col--offset-4{margin-left:34%!important}.col--offset-5{margin-left:42.5%!important}.col--offset-6{margin-left:51%!important}.col--offset-7{margin-left:59.5%!important}.col--offset-8{margin-left:68%!important}.col--offset-9{margin-left:76.5%!important}.col--offset-10{margin-left:85%!important}.col--offset-11{margin-left:93.5%!important}.col--offset-1-3{margin-left:34%!important}.col--offset-2-3{margin-left:68%!important}.col--offset-1-2{margin-left:51%!important}}.container:after,.row:after{clear:both;content:"";display:table}.flex-grid{display:flex}.flex-grid>*{flex:1}.flex-grid>.flex-grid__col{flex-grow:4;margin-left:2%}.flex-grid>.flex-grid__col--fixed-width{flex:0 0 200px}.flex-grid>.flex-grid__col--sm{flex-grow:2}.flex-grid>.flex-grid__col--lg{flex-grow:8}.flex-grid>:first-child{margin-left:0}.flex-grid>:last-child{margin-right:0}@media (max-width:549px){.flex-grid--md{display:block}.flex-grid--md>*{padding-left:0;padding-right:0}.flex-grid--md>.flex-grid__col{margin-left:0}}@media (max-width:959px){.flex-grid--lg{display:block}.flex-grid--lg>*{padding-left:0;padding-right:0}.flex-grid--lg>.flex-grid__col{margin-left:0}}.btn,.button,[type=button],[type=reset],[type=submit]{background-color:transparent;border-radius:.2rem;border:1px solid #bbb;color:#7e7e7e;cursor:pointer;display:inline-block;font-size:inherit;font-weight:100;height:38px;letter-spacing:.1rem;line-height:38px;margin-bottom:1rem;padding:0 30px;text-align:center;text-decoration:none;transition-duration:.2s;white-space:nowrap}.btn:focus,.btn:hover,.button:focus,.button:hover,[type=button]:focus,[type=button]:hover,[type=reset]:focus,[type=reset]:hover,[type=submit]:focus,[type=submit]:hover{color:#7e7e7e;border-color:#d3d3d3;outline:0}.btn:focus,.button:focus,[type=button]:focus,[type=reset]:focus,[type=submit]:focus{outline:.1rem dotted #a8a8a8}.btn:active,.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active{background-color:#3498db}.btn--primary{color:#fff;background-color:#3498db;border-color:#3498db}.btn--primary:focus,.btn--primary:hover{color:#fff;background-color:#217dbb;border-color:#3498db}.btn--secondary{color:#e4e4e4;background-color:#7e7e7e;border-color:#7e7e7e}.btn--secondary:focus,.btn--secondary:hover{color:#e4e4e4;background-color:#585858;border-color:#7e7e7e}.btn--success{background-color:#2bc016;border-color:#2bc016;color:#fff}.btn--success:focus,.btn--success:hover{color:#fff;background-color:#26a913;border-color:#2bc016}.btn--info{background-color:#5bc0eb;border-color:#5bc0eb;color:#fff}.btn--info:focus,.btn--info:hover{color:#fff;background-color:#2eafe5;border-color:#5bc0eb}.btn--warning{background-color:#e67e22;border-color:#e67e22;color:#fff}.btn--warning:focus,.btn--warning:hover{color:#fff;background-color:#bf6516;border-color:#e67e22}.btn--danger{background-color:#c3423f;border-color:#c3423f;color:#fff}.btn--danger:focus,.btn--danger:hover{color:#fff;background-color:#9e3431;border-color:#c3423f}.btn-outline--primary{background-color:transparent;border-color:#3498db;color:#3498db}.btn-outline--primary:focus,.btn-outline--primary:hover{color:#fff;background-color:#3498db;border-color:#3498db}.btn-outline--secondary{background-color:transparent;border-color:#7e7e7e;color:#7e7e7e}.btn-outline--secondary:focus,.btn-outline--secondary:hover{color:#d3d3d3;background-color:#545454;border-color:#7e7e7e}.btn-outline--success{background-color:transparent;border-color:#2bc016;color:#2bc016}.btn-outline--success:focus,.btn-outline--success:hover{color:#fff;background-color:#2bc016!important;border-color:#2bc016}.btn-outline--info{background-color:transparent;border-color:#5bc0eb;color:#5bc0eb}.btn-outline--info:focus,.btn-outline--info:hover{color:#fff;background-color:#5bc0eb;border-color:#5bc0eb}.btn-outline--warning{background-color:transparent;border-color:#e67e22;color:#e67e22}.btn-outline--warning:focus,.btn-outline--warning:hover{color:#fff;background-color:#e67e22;border-color:#e67e22}.btn-outline--danger{background-color:transparent;border-color:#c3423f;color:#c3423f}.btn-outline--danger:focus,.btn-outline--danger:hover{color:#fff;background-color:#c3423f;border-color:#c3423f}.btn--lg{font-size:inherit;font-weight:100;height:5.8rem;line-height:5.8rem;vertical-align:middle;padding:0 4rem}.btn--raised{border-width:0;border-bottom-width:3px;border-bottom-color:rgba(0,0,0,.15)}.pager{list-style:none;margin-bottom:1.5rem;margin-left:0;text-align:center}.pager li{margin:0;display:inline-block}.pager li:last-child{margin-right:0}.pager li:hover{background-color:tint(#d3d3d3,30%)}.pager li a{display:inline-block;padding:0 1rem}.pager li a:hover{background-color:#e4e4e4;text-decoration:none}.pager li.pager--current{background-color:#3498db}.pager li.pager--current a{color:#fff;padding:0 1rem;margin-bottom:0}.pager li.pager--current a:hover{background-color:#3498db;padding:0 1rem}.table thead>tr{border-bottom:.2rem solid #d3d3d3}.table--bordered td,.table--bordered th{border:.05rem solid #d3d3d3}.table--hover tbody tr:hover,.table--striped tbody>tr:nth-child(odd)>td{background-color:#e4e4e4}.table--compact thead>tr{border-bottom:.2rem solid #d3d3d3}.table--compact td,.table--compact th{padding:.3rem}.table-responsive{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.table-responsive table{margin-bottom:.5rem}.dark{background-color:#1d1d1d}
--------------------------------------------------------------------------------
/dist/bemskel.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | /*! SCSS version of normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
3 | /**
4 | * 1. Change the default font family in all browsers (opinionated).
5 | * 2. Correct the line height in all browsers.
6 | * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
7 | */
8 | /* Document
9 | ========================================================================== */
10 | html {
11 | font-family: sans-serif;
12 | /* 1 */
13 | line-height: 1.15;
14 | /* 2 */
15 | -ms-text-size-adjust: 100%;
16 | /* 3 */
17 | -webkit-text-size-adjust: 100%;
18 | /* 3 */ }
19 |
20 | /* Sections
21 | ========================================================================== */
22 | /**
23 | * Remove the margin in all browsers (opinionated).
24 | */
25 | body {
26 | margin: 0; }
27 |
28 | /**
29 | * Add the correct display in IE 9-.
30 | */
31 | article, aside, footer, header, nav, section {
32 | display: block; }
33 |
34 | /**
35 | * Correct the font size and margin on `h1` elements within `section` and
36 | * `article` contexts in Chrome, Firefox, and Safari.
37 | */
38 | h1 {
39 | font-size: 2em;
40 | margin: 0.67em 0; }
41 |
42 | /* Grouping content
43 | ========================================================================== */
44 | /**
45 | * Add the correct display in IE 9-.
46 | * 1. Add the correct display in IE.
47 | */
48 | figcaption, figure, main {
49 | /* 1 */
50 | display: block; }
51 |
52 | /**
53 | * Add the correct margin in IE 8.
54 | */
55 | figure {
56 | margin: 1em 40px; }
57 |
58 | /**
59 | * 1. Add the correct box sizing in Firefox.
60 | * 2. Show the overflow in Edge and IE.
61 | */
62 | hr {
63 | box-sizing: content-box;
64 | /* 1 */
65 | height: 0;
66 | /* 1 */
67 | overflow: visible;
68 | /* 2 */ }
69 |
70 | /**
71 | * 1. Correct the inheritance and scaling of font size in all browsers.
72 | * 2. Correct the odd `em` font sizing in all browsers.
73 | */
74 | pre {
75 | font-family: monospace, monospace;
76 | /* 1 */
77 | font-size: 1em;
78 | /* 2 */ }
79 |
80 | /* Text-level semantics
81 | ========================================================================== */
82 | /**
83 | * 1. Remove the gray background on active links in IE 10.
84 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
85 | */
86 | a {
87 | background-color: transparent;
88 | /* 1 */
89 | -webkit-text-decoration-skip: objects;
90 | /* 2 */ }
91 |
92 | a:active, a:hover {
93 | outline-width: 0; }
94 |
95 | /**
96 | * Remove the outline on focused links when they are also active or hovered
97 | * in all browsers (opinionated).
98 | */
99 | /**
100 | * 1. Remove the bottom border in Firefox 39-.
101 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
102 | */
103 | abbr[title] {
104 | border-bottom: none;
105 | /* 1 */
106 | text-decoration: underline;
107 | /* 2 */
108 | text-decoration: underline dotted;
109 | /* 2 */ }
110 |
111 | /**
112 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
113 | */
114 | b, strong {
115 | font-weight: inherit; }
116 |
117 | /**
118 | * Add the correct font weight in Chrome, Edge, and Safari.
119 | */
120 | b, strong {
121 | font-weight: bolder; }
122 |
123 | /**
124 | * 1. Correct the inheritance and scaling of font size in all browsers.
125 | * 2. Correct the odd `em` font sizing in all browsers.
126 | */
127 | code, kbd, samp {
128 | font-family: monospace, monospace;
129 | /* 1 */
130 | font-size: 1em;
131 | /* 2 */ }
132 |
133 | /**
134 | * Add the correct font style in Android 4.3-.
135 | */
136 | dfn {
137 | font-style: italic; }
138 |
139 | /**
140 | * Add the correct background and color in IE 9-.
141 | */
142 | mark {
143 | background-color: #ff0;
144 | color: #000; }
145 |
146 | /**
147 | * Add the correct font size in all browsers.
148 | */
149 | small {
150 | font-size: 80%; }
151 |
152 | /**
153 | * Prevent `sub` and `sup` elements from affecting the line height in
154 | * all browsers.
155 | */
156 | sub, sup {
157 | font-size: 75%;
158 | line-height: 0;
159 | position: relative;
160 | vertical-align: baseline; }
161 |
162 | sub {
163 | bottom: -0.25em; }
164 |
165 | sup {
166 | top: -0.5em; }
167 |
168 | /* Embedded content
169 | ========================================================================== */
170 | /**
171 | * Add the correct display in IE 9-.
172 | */
173 | audio, video {
174 | display: inline-block; }
175 |
176 | /**
177 | * Add the correct display in iOS 4-7.
178 | */
179 | audio:not([controls]) {
180 | display: none;
181 | height: 0; }
182 |
183 | /**
184 | * Remove the border on images inside links in IE 10-.
185 | */
186 | img {
187 | border-style: none; }
188 |
189 | /**
190 | * Hide the overflow in IE.
191 | */
192 | svg:not(:root) {
193 | overflow: hidden; }
194 |
195 | /* Forms
196 | ========================================================================== */
197 | /**
198 | * 1. Change font properties to `inherit` in all browsers (opinionated).
199 | * 2. Remove the margin in Firefox and Safari.
200 | */
201 | button, input, optgroup, select, textarea {
202 | font: inherit;
203 | /* 1 */
204 | margin: 0;
205 | /* 2 */ }
206 |
207 | /**
208 | * Restore the font weight unset by the previous rule.
209 | */
210 | optgroup {
211 | font-weight: bold; }
212 |
213 | /**
214 | * Show the overflow in IE.
215 | * 1. Show the overflow in Edge.
216 | */
217 | button, input {
218 | /* 1 */
219 | overflow: visible; }
220 |
221 | /**
222 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
223 | * 1. Remove the inheritance of text transform in Firefox.
224 | */
225 | button, select {
226 | /* 1 */
227 | text-transform: none; }
228 |
229 | /**
230 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
231 | * controls in Android 4.
232 | * 2. Correct the inability to style clickable types in iOS and Safari.
233 | */
234 | button, html [type="button"], [type="reset"], [type="submit"] {
235 | -webkit-appearance: button;
236 | /* 2 */ }
237 |
238 | /**
239 | * Remove the inner border and padding in Firefox.
240 | */
241 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
242 | border-style: none;
243 | padding: 0; }
244 |
245 | /**
246 | * Restore the focus styles unset by the previous rule.
247 | */
248 | button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
249 | outline: 1px dotted ButtonText; }
250 |
251 | /**
252 | * Change the border, margin, and padding in all browsers (opinionated).
253 | */
254 | fieldset {
255 | border: 1px solid #c0c0c0;
256 | margin: 0 2px;
257 | padding: 0.35em 0.625em 0.75em; }
258 |
259 | /**
260 | * 1. Correct the text wrapping in Edge and IE.
261 | * 2. Correct the color inheritance from `fieldset` elements in IE.
262 | * 3. Remove the padding so developers are not caught out when they zero out
263 | * `fieldset` elements in all browsers.
264 | */
265 | legend {
266 | box-sizing: border-box;
267 | /* 1 */
268 | color: inherit;
269 | /* 2 */
270 | display: table;
271 | /* 1 */
272 | max-width: 100%;
273 | /* 1 */
274 | padding: 0;
275 | /* 3 */
276 | white-space: normal;
277 | /* 1 */ }
278 |
279 | /**
280 | * 1. Add the correct display in IE 9-.
281 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
282 | */
283 | progress {
284 | display: inline-block;
285 | /* 1 */
286 | vertical-align: baseline;
287 | /* 2 */ }
288 |
289 | /**
290 | * Remove the default vertical scrollbar in IE.
291 | */
292 | textarea {
293 | overflow: auto; }
294 |
295 | /**
296 | * 1. Add the correct box sizing in IE 10-.
297 | * 2. Remove the padding in IE 10-.
298 | */
299 | [type="checkbox"], [type="radio"] {
300 | box-sizing: border-box;
301 | /* 1 */
302 | padding: 0;
303 | /* 2 */ }
304 |
305 | /**
306 | * Correct the cursor style of increment and decrement buttons in Chrome.
307 | */
308 | [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
309 | height: auto; }
310 |
311 | /**
312 | * 1. Correct the odd appearance in Chrome and Safari.
313 | * 2. Correct the outline style in Safari.
314 | */
315 | [type="search"] {
316 | -webkit-appearance: textfield;
317 | /* 1 */
318 | outline-offset: -2px;
319 | /* 2 */ }
320 |
321 | [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
322 | -webkit-appearance: none; }
323 |
324 | /**
325 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
326 | */
327 | /**
328 | * 1. Correct the inability to style clickable types in iOS and Safari.
329 | * 2. Change font properties to `inherit` in Safari.
330 | */
331 | ::-webkit-file-upload-button {
332 | -webkit-appearance: button;
333 | /* 1 */
334 | font: inherit;
335 | /* 2 */ }
336 |
337 | /* Interactive
338 | ========================================================================== */
339 | /*
340 | * Add the correct display in IE 9-.
341 | * 1. Add the correct display in Edge, IE, and Firefox.
342 | */
343 | details, menu {
344 | display: block; }
345 |
346 | /*
347 | * Add the correct display in all browsers.
348 | */
349 | summary {
350 | display: list-item; }
351 |
352 | /* Scripting
353 | ========================================================================== */
354 | /**
355 | * Add the correct display in IE 9-.
356 | */
357 | canvas {
358 | display: inline-block; }
359 |
360 | /**
361 | * Add the correct display in IE.
362 | */
363 | template, [hidden] {
364 | display: none; }
365 |
366 | html {
367 | box-sizing: border-box;
368 | font-size: 62.5%;
369 | height: 100%; }
370 |
371 | *,
372 | *:before,
373 | *:after {
374 | box-sizing: inherit; }
375 |
376 | body {
377 | font-size: 1.6rem;
378 | line-height: 2.4rem;
379 | font-weight: 400;
380 | font-family: "Roboto", Helvetica, Arial, sans-serif;
381 | color: #222222; }
382 |
383 | a {
384 | color: #496DDB;
385 | text-decoration: none;
386 | word-wrap: break-word; }
387 |
388 | a:hover {
389 | color: shade(#496DDB, 15%); }
390 |
391 | hr {
392 | margin-top: 3rem;
393 | margin-bottom: 3.5rem;
394 | border-width: 0;
395 | border-top: 1px solid #d3d3d3; }
396 |
397 | ul {
398 | list-style: circle inside; }
399 |
400 | ol {
401 | list-style: decimal inside;
402 | padding-left: 0;
403 | margin-top: 0; }
404 |
405 | ul {
406 | padding-left: 0;
407 | margin-top: 0; }
408 |
409 | ul ul, ul ol {
410 | margin: 1.5rem 0 1.5rem 3rem;
411 | font-size: 90%; }
412 |
413 | ol ol, ol ul {
414 | margin: 1.5rem 0 1.5rem 3rem;
415 | font-size: 90%; }
416 |
417 | li {
418 | margin-bottom: 1rem; }
419 |
420 | dt {
421 | font-style: italic; }
422 |
423 | dd {
424 | padding-left: 2rem; }
425 |
426 | img,
427 | video {
428 | display: table;
429 | max-width: 100%; }
430 |
431 | figure {
432 | margin: 0 auto;
433 | padding-bottom: 2.4rem; }
434 |
435 | figure img {
436 | display: table;
437 | margin: 0 auto; }
438 |
439 | caption,
440 | figcaption {
441 | font-size: 2rem;
442 | font-style: italic;
443 | text-align: center; }
444 |
445 | table {
446 | border-collapse: collapse;
447 | border-color: gray;
448 | border-spacing: 2px;
449 | max-width: 100%;
450 | width: 100%; }
451 |
452 | table thead th {
453 | vertical-align: bottom;
454 | border-bottom: 1px solid #d3d3d3; }
455 |
456 | table th,
457 | table td {
458 | padding: 0.6rem;
459 | vertical-align: top;
460 | border-top: 1px solid #ccc; }
461 |
462 | table th,
463 | table tfoot td {
464 | font-weight: 700;
465 | text-align: left; }
466 |
467 | table td {
468 | border-bottom: 1px solid #d3d3d3;
469 | padding: .6rem;
470 | text-align: left;
471 | vertical-align: top; }
472 |
473 | textarea,
474 | select {
475 | height: 38px;
476 | padding: 6px 10px;
477 | background-color: #fff;
478 | border: 1px solid #d1d1d1;
479 | border-radius: 0.2rem;
480 | box-shadow: none; }
481 |
482 | textarea:focus,
483 | select:focus {
484 | border: 1px solid #3498db;
485 | outline: 0; }
486 |
487 | input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
488 | appearance: none;
489 | background-color: #fff;
490 | border-radius: 0.2rem;
491 | border: 1px solid #d1d1d1;
492 | box-shadow: none;
493 | box-sizing: border-box;
494 | height: 38px;
495 | padding: 6px 10px;
496 | -moz-appearance: none;
497 | -webkit-appearance: none; }
498 |
499 | input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus {
500 | border: 1px solid #3498db;
501 | outline: 0; }
502 |
503 | textarea {
504 | appearance: none;
505 | min-height: 65px;
506 | padding-bottom: 6px;
507 | padding-top: 6px;
508 | -moz-appearance: none;
509 | -webkit-appearance: none; }
510 |
511 | label,
512 | legend {
513 | display: block;
514 | font-weight: 600;
515 | margin-bottom: .5rem; }
516 |
517 | fieldset {
518 | padding: 0;
519 | border-width: 0; }
520 |
521 | input[type="checkbox"], input[type="radio"] {
522 | display: inline; }
523 |
524 | label > .label-body {
525 | display: inline-block;
526 | font-weight: normal;
527 | margin-left: .5rem; }
528 |
529 | pre {
530 | overflow: auto; }
531 |
532 | code {
533 | background: #e3e3e3;
534 | border-radius: 0.2rem;
535 | border: 1px solid #d3d3d3;
536 | font-size: 90%;
537 | margin: 0 .2rem;
538 | padding: .2rem .5rem;
539 | white-space: nowrap; }
540 |
541 | pre > code {
542 | display: block;
543 | padding: 1rem 1.5rem;
544 | white-space: pre; }
545 |
546 | .u-full-width {
547 | width: 100%; }
548 |
549 | .u-max-full-width {
550 | max-width: 100%; }
551 |
552 | .u-pull--right {
553 | float: right; }
554 |
555 | .u-pull--left {
556 | float: left; }
557 |
558 | .u-disabled {
559 | cursor: default;
560 | opacity: .5;
561 | pointer-events: none; }
562 |
563 | /**
564 | * Clear inner floats
565 | */
566 | .u-clearfix:after {
567 | clear: both;
568 | content: "";
569 | display: table; }
570 |
571 | /**
572 | * Hide text while making it readable for screen readers
573 | * 1. Needed in WebKit-based browsers because of an implementation bug;
574 | * See: https://code.google.com/p/chromium/issues/detail?id=457146
575 | */
576 | .u-hide-text {
577 | overflow: hidden;
578 | padding: 0;
579 | /* 1 */
580 | text-indent: 101%;
581 | white-space: nowrap; }
582 |
583 | /**
584 | * Hide element while making it readable for screen readers
585 | * Shamelessly borrowed from HTML5Boilerplate:
586 | * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
587 | */
588 | .u-visually-hidden {
589 | border: 0;
590 | clip: rect(0 0 0 0);
591 | height: 1px;
592 | margin: -1px;
593 | overflow: hidden;
594 | padding: 0;
595 | position: absolute;
596 | width: 1px; }
597 |
598 | .u-ta-left {
599 | text-align: left; }
600 |
601 | .u-ta-left {
602 | text-align: center; }
603 |
604 | .u-ta-right {
605 | text-align: right; }
606 |
607 | /**
608 | * Basic typography style for text
609 | */
610 | h1, h2, h3, h4, h5, h6 {
611 | margin-top: 0;
612 | margin-bottom: 2rem;
613 | font-weight: 300;
614 | word-wrap: break-word; }
615 |
616 | h1 {
617 | font-size: 4.0rem;
618 | line-height: 1.2;
619 | letter-spacing: -.1rem; }
620 |
621 | h2 {
622 | font-size: 3.6rem;
623 | line-height: 1.25;
624 | letter-spacing: -.1rem; }
625 |
626 | h3 {
627 | font-size: 3.0rem;
628 | line-height: 1.3;
629 | letter-spacing: -.1rem; }
630 |
631 | h4 {
632 | font-size: 2.4rem;
633 | line-height: 1.35;
634 | letter-spacing: -.08rem; }
635 |
636 | h5 {
637 | font-size: 1.8rem;
638 | line-height: 1.5;
639 | letter-spacing: -.05rem; }
640 |
641 | h6 {
642 | font-size: 1.5rem;
643 | line-height: 1.6;
644 | letter-spacing: 0; }
645 |
646 | @media (min-width: 550px) {
647 | h1 {
648 | font-size: 5.0rem; }
649 | h2 {
650 | font-size: 4.2rem; }
651 | h3 {
652 | font-size: 3.6rem; }
653 | h4 {
654 | font-size: 3.0rem; }
655 | h5 {
656 | font-size: 2.4rem; }
657 | h6 {
658 | font-size: 1.5rem; } }
659 |
660 | p {
661 | margin-top: 0; }
662 |
663 | blockquote {
664 | margin: 0 0 2.4rem 1.2rem;
665 | border-left: 0.3rem solid #545454;
666 | padding: 2.4rem 1.2rem; }
667 |
668 | blockquote p:last-child {
669 | padding-bottom: 0; }
670 |
671 | small,
672 | sub,
673 | sup {
674 | font-size: 2rem;
675 | line-height: 1; }
676 |
677 | caption,
678 | figcaption {
679 | font-size: 2rem;
680 | font-style: italic;
681 | text-align: center; }
682 |
683 | em,
684 | cite,
685 | i {
686 | font-style: italic; }
687 |
688 | q:before {
689 | content: "'"; }
690 |
691 | q:after {
692 | content: "'"; }
693 |
694 | q > q {
695 | font-style: italic; }
696 |
697 | dfn,
698 | abbr {
699 | border-bottom: 0.1rem dotted #d3d3d3;
700 | cursor: default; }
701 |
702 | dfn,
703 | abbr {
704 | border-bottom: 0.1rem dotted #d3d3d3;
705 | cursor: default; }
706 |
707 | button, input {
708 | margin-bottom: 1rem; }
709 |
710 | fieldset,
711 | select,
712 | textarea {
713 | margin-bottom: 1.4rem; }
714 |
715 | blockquote,
716 | dl,
717 | figure,
718 | form,
719 | ol,
720 | p,
721 | pre,
722 | table,
723 | ul {
724 | margin-bottom: 2.4rem; }
725 |
726 | li {
727 | margin-bottom: 1rem; }
728 |
729 | label {
730 | margin-bottom: .25rem; }
731 |
732 | @media print {
733 | * {
734 | background: transparent !important;
735 | color: #000 !important;
736 | box-shadow: none !important;
737 | text-shadow: none !important; }
738 | @page {
739 | margin: 0.5cm; }
740 | a,
741 | a:visited {
742 | text-decoration: underline; }
743 | a[href]:after {
744 | content: " (" attr(href) ")"; }
745 | abbr[title]:after {
746 | content: " (" attr(title) ")"; }
747 | .ir a:after,
748 | a[href^="javascript:"]:after,
749 | a[href^="#"]:after {
750 | content: ""; }
751 | pre,
752 | blockquote {
753 | border: 1px solid #999;
754 | page-break-inside: avoid; }
755 | thead {
756 | display: table-header-group; }
757 | tr,
758 | img {
759 | page-break-inside: avoid; }
760 | img {
761 | max-width: 100% !important; }
762 | p,
763 | h2,
764 | h3 {
765 | orphans: 3;
766 | widows: 3; }
767 | h2,
768 | h3 {
769 | page-break-after: avoid; } }
770 |
771 | /*
772 | Containers
773 |
774 | Use containers when you need a content area that has standard maximum width and centered on the page.
775 |
776 | Markup:
777 | Container
778 |
779 | .container - Default container size = $container-width
780 | .container--sm - Small Container
781 | .container--lg - Large Container
782 | */
783 | .container {
784 | margin: 0 auto;
785 | max-width: 1000px;
786 | padding: 0 10px;
787 | position: relative;
788 | width: 100%;
789 | box-sizing: border-box; }
790 |
791 | .container--lg {
792 | margin: 0 auto;
793 | max-width: 1200px;
794 | padding: 3.2rem 1rem; }
795 |
796 | .container--sm {
797 | margin: 0 auto;
798 | max-width: 640px;
799 | padding: 2.4rem 2rem; }
800 |
801 | .col {
802 | width: 100%;
803 | float: left;
804 | box-sizing: border-box; }
805 |
806 | @media (min-width: 400px) {
807 | .container {
808 | width: 85%;
809 | padding: 0; } }
810 |
811 | @media (min-width: 550px) {
812 | .container {
813 | width: 80%; }
814 | .col {
815 | margin-left: 2%; }
816 | .col:first-child {
817 | margin-left: 0; }
818 | .col--1 {
819 | width: 6.5%; }
820 | .col--2 {
821 | width: 15%; }
822 | .col--3 {
823 | width: 23.5%; }
824 | .col--4 {
825 | width: 32%; }
826 | .col--5 {
827 | width: 40.5%; }
828 | .col--6 {
829 | width: 49%; }
830 | .col--7 {
831 | width: 57.5%; }
832 | .col--8 {
833 | width: 66%; }
834 | .col--9 {
835 | width: 74.5%; }
836 | .col--10 {
837 | width: 83%; }
838 | .col--11 {
839 | width: 91.5%; }
840 | .col--12 {
841 | width: 100%;
842 | margin-left: 0; }
843 | .col--1-3 {
844 | width: 32%; }
845 | .col--2-3 {
846 | width: 66%; }
847 | .col--1-2 {
848 | width: 49%; }
849 | .col--offset-1 {
850 | margin-left: 8.5% !important; }
851 | .col--offset-2 {
852 | margin-left: 17% !important; }
853 | .col--offset-3 {
854 | margin-left: 25.5% !important; }
855 | .col--offset-4 {
856 | margin-left: 34% !important; }
857 | .col--offset-5 {
858 | margin-left: 42.5% !important; }
859 | .col--offset-6 {
860 | margin-left: 51% !important; }
861 | .col--offset-7 {
862 | margin-left: 59.5% !important; }
863 | .col--offset-8 {
864 | margin-left: 68% !important; }
865 | .col--offset-9 {
866 | margin-left: 76.5% !important; }
867 | .col--offset-10 {
868 | margin-left: 85% !important; }
869 | .col--offset-11 {
870 | margin-left: 93.5% !important; }
871 | .col--offset-1-3 {
872 | margin-left: 34% !important; }
873 | .col--offset-2-3 {
874 | margin-left: 68% !important; }
875 | .col--offset-1-2 {
876 | margin-left: 51% !important; } }
877 |
878 | /* Self Clearing Goodness */
879 | .container:after,
880 | .row:after {
881 | clear: both;
882 | content: "";
883 | display: table; }
884 |
885 | /*
886 |
887 | Grid
888 |
889 | This is a grid made using flexbox. Use the ff classes to setup a flexbox grid:
890 |
891 | .flex-grid - Grid is always shown, even in small screens
892 |
893 | // Modifier classes for `.flex-grid`.
894 | // Use these classes to set the screen width when the grid is visible.
895 |
896 | // Grid Modifiers
897 | .flex-grid--md - Grid starts at medium sized screens
898 | .flex-grid--lg - Grid starts at large and up screens
899 |
900 |
901 | Use `.flex-grid__col` to define a column inside a `.flex-grid` grid.
902 | Direct children of `.flex-grid` are columns with the class,
903 | `.flex-grid__col`
904 |
905 | Markup:
906 |
907 |
908 | Cell 1
909 | Cell 2
910 | Cell 3
911 |
912 |
913 | Half-width column
914 | Default width column
915 |
916 |
917 |
918 | Cell 1
919 | Cell 2
920 |
921 |
922 | Double-width column
923 | Default width column
924 |
925 |
926 |
927 | // Column modifiers
928 |
929 | .flex-grid__col--sm - half the width of default column
930 | .flex-grid__col--lg - double the width of default column
931 | .flex-grid__col--fixed-width - fixed-width column (default = 200px)
932 | */
933 | .flex-grid {
934 | display: flex; }
935 |
936 | .flex-grid > * {
937 | flex: 1; }
938 |
939 | .flex-grid > *.flex-grid__col {
940 | flex-grow: 4;
941 | margin-left: 2%; }
942 |
943 | .flex-grid > *.flex-grid__col--fixed-width {
944 | flex: 0 0 200px; }
945 |
946 | .flex-grid > *.flex-grid__col--sm {
947 | flex-grow: 2; }
948 |
949 | .flex-grid > *.flex-grid__col--lg {
950 | flex-grow: 8; }
951 |
952 | .flex-grid > *:first-child {
953 | margin-left: 0rem; }
954 |
955 | .flex-grid > *:last-child {
956 | margin-right: 0rem; }
957 |
958 | @media (max-width: 549px) {
959 | .flex-grid--md {
960 | display: block; }
961 | .flex-grid--md > * {
962 | padding-left: 0;
963 | padding-right: 0; }
964 | .flex-grid--md > *.flex-grid__col {
965 | margin-left: 0; } }
966 |
967 | @media (max-width: 959px) {
968 | .flex-grid--lg {
969 | display: block; }
970 | .flex-grid--lg > * {
971 | padding-left: 0;
972 | padding-right: 0; }
973 | .flex-grid--lg > *.flex-grid__col {
974 | margin-left: 0; } }
975 |
976 | .btn, [type="submit"],
977 | [type="reset"],
978 | [type="button"],
979 | .button {
980 | background-color: transparent;
981 | border-radius: 0.2rem;
982 | border: 1px solid #bbb;
983 | color: #7e7e7e;
984 | cursor: pointer;
985 | display: inline-block;
986 | font-size: inherit;
987 | font-weight: 100;
988 | height: 38px;
989 | letter-spacing: .1rem;
990 | line-height: 38px;
991 | margin-bottom: 1rem;
992 | padding: 0 30px;
993 | text-align: center;
994 | text-decoration: none;
995 | transition-duration: 200ms;
996 | white-space: nowrap; }
997 |
998 | .btn:focus, [type="submit"]:focus,
999 | [type="reset"]:focus,
1000 | [type="button"]:focus, .btn:hover, [type="submit"]:hover,
1001 | [type="reset"]:hover,
1002 | [type="button"]:hover,
1003 | .button:focus,
1004 | .button:hover {
1005 | color: #7e7e7e;
1006 | border-color: lightgray;
1007 | outline: 0; }
1008 |
1009 | .btn:focus, [type="submit"]:focus,
1010 | [type="reset"]:focus,
1011 | [type="button"]:focus,
1012 | .button:focus {
1013 | outline: 0.1rem dotted #a8a8a8; }
1014 |
1015 | .btn:active, [type="submit"]:active,
1016 | [type="reset"]:active,
1017 | [type="button"]:active,
1018 | .button:active {
1019 | background-color: #3498db; }
1020 |
1021 | .btn--primary {
1022 | color: #ffffff;
1023 | background-color: #3498db;
1024 | border-color: #3498db; }
1025 |
1026 | .btn--primary:focus, .btn--primary:hover {
1027 | color: #ffffff;
1028 | background-color: #217dbb;
1029 | border-color: #3498db; }
1030 |
1031 | .btn--secondary {
1032 | color: #e4e4e4;
1033 | background-color: #7e7e7e;
1034 | border-color: #7e7e7e; }
1035 |
1036 | .btn--secondary:focus, .btn--secondary:hover {
1037 | color: #e4e4e4;
1038 | background-color: #585858;
1039 | border-color: #7e7e7e; }
1040 |
1041 | .btn--success {
1042 | background-color: #2BC016;
1043 | border-color: #2BC016;
1044 | color: #ffffff; }
1045 |
1046 | .btn--success:focus, .btn--success:hover {
1047 | color: #ffffff;
1048 | background-color: #26a913;
1049 | border-color: #2BC016; }
1050 |
1051 | .btn--info {
1052 | background-color: #5BC0EB;
1053 | border-color: #5BC0EB;
1054 | color: #ffffff; }
1055 |
1056 | .btn--info:focus, .btn--info:hover {
1057 | color: #ffffff;
1058 | background-color: #2eafe5;
1059 | border-color: #5BC0EB; }
1060 |
1061 | .btn--warning {
1062 | background-color: #E67E22;
1063 | border-color: #E67E22;
1064 | color: #ffffff; }
1065 |
1066 | .btn--warning:focus, .btn--warning:hover {
1067 | color: #ffffff;
1068 | background-color: #bf6516;
1069 | border-color: #E67E22; }
1070 |
1071 | .btn--danger {
1072 | background-color: #C3423F;
1073 | border-color: #C3423F;
1074 | color: #ffffff; }
1075 |
1076 | .btn--danger:focus, .btn--danger:hover {
1077 | color: #ffffff;
1078 | background-color: #9e3431;
1079 | border-color: #C3423F; }
1080 |
1081 | .btn-outline--primary {
1082 | background-color: transparent;
1083 | border-color: #3498db;
1084 | color: #3498db; }
1085 |
1086 | .btn-outline--primary:focus, .btn-outline--primary:hover {
1087 | color: #ffffff;
1088 | background-color: #3498db;
1089 | border-color: #3498db; }
1090 |
1091 | .btn-outline--secondary {
1092 | background-color: transparent;
1093 | border-color: #7e7e7e;
1094 | color: #7e7e7e; }
1095 |
1096 | .btn-outline--secondary:focus, .btn-outline--secondary:hover {
1097 | color: #d3d3d3;
1098 | background-color: #545454;
1099 | border-color: #7e7e7e; }
1100 |
1101 | .btn-outline--success {
1102 | background-color: transparent;
1103 | border-color: #2BC016;
1104 | color: #2BC016; }
1105 |
1106 | .btn-outline--success:focus, .btn-outline--success:hover {
1107 | color: #ffffff;
1108 | background-color: #2BC016 !important;
1109 | border-color: #2BC016; }
1110 |
1111 | .btn-outline--info {
1112 | background-color: transparent;
1113 | border-color: #5BC0EB;
1114 | color: #5BC0EB; }
1115 |
1116 | .btn-outline--info:focus, .btn-outline--info:hover {
1117 | color: #ffffff;
1118 | background-color: #5BC0EB;
1119 | border-color: #5BC0EB; }
1120 |
1121 | .btn-outline--warning {
1122 | background-color: transparent;
1123 | border-color: #E67E22;
1124 | color: #E67E22; }
1125 |
1126 | .btn-outline--warning:focus, .btn-outline--warning:hover {
1127 | color: #ffffff;
1128 | background-color: #E67E22;
1129 | border-color: #E67E22; }
1130 |
1131 | .btn-outline--danger {
1132 | background-color: transparent;
1133 | border-color: #C3423F;
1134 | color: #C3423F; }
1135 |
1136 | .btn-outline--danger:focus, .btn-outline--danger:hover {
1137 | color: #ffffff;
1138 | background-color: #C3423F;
1139 | border-color: #C3423F; }
1140 |
1141 | .btn--lg {
1142 | font-size: inherit;
1143 | font-weight: 100;
1144 | height: 5.8rem;
1145 | line-height: 5.8rem;
1146 | vertical-align: middle;
1147 | padding: 0 4rem; }
1148 |
1149 | .btn--raised {
1150 | border-width: 0;
1151 | border-bottom-width: 3px;
1152 | border-bottom-color: rgba(0, 0, 0, 0.15); }
1153 |
1154 | .pager {
1155 | list-style: none;
1156 | margin-bottom: 1.5rem;
1157 | margin-left: 0;
1158 | text-align: center; }
1159 |
1160 | .pager li {
1161 | margin: 0;
1162 | display: inline-block; }
1163 |
1164 | .pager li:last-child {
1165 | margin-right: 0; }
1166 |
1167 | .pager li:hover {
1168 | background-color: tint(#d3d3d3, 30%); }
1169 |
1170 | .pager li a {
1171 | display: inline-block;
1172 | padding: 0rem 1rem; }
1173 |
1174 | .pager li a:hover {
1175 | background-color: #e4e4e4;
1176 | text-decoration: none; }
1177 |
1178 | .pager li.pager--current {
1179 | background-color: #3498db; }
1180 |
1181 | .pager li.pager--current a {
1182 | color: #fff;
1183 | padding: 0 1rem;
1184 | margin-bottom: 0rem; }
1185 |
1186 | .pager li.pager--current a:hover {
1187 | background-color: #3498db;
1188 | padding: 0rem 1rem; }
1189 |
1190 | .table thead > tr {
1191 | border-bottom: 0.2rem solid #d3d3d3; }
1192 |
1193 | .table--bordered th,
1194 | .table--bordered td {
1195 | border: 0.05rem solid #d3d3d3; }
1196 |
1197 | .table--striped tbody > tr:nth-child(odd) > td {
1198 | background-color: #e4e4e4; }
1199 |
1200 | .table--hover tbody tr:hover {
1201 | background-color: #e4e4e4; }
1202 |
1203 | .table--compact thead > tr {
1204 | border-bottom: 0.2rem solid #d3d3d3; }
1205 |
1206 | .table--compact th,
1207 | .table--compact td {
1208 | padding: .3rem; }
1209 |
1210 | .table-responsive {
1211 | overflow-x: auto;
1212 | width: 100%;
1213 | -webkit-overflow-scrolling: touch; }
1214 |
1215 | .table-responsive table {
1216 | margin-bottom: .5rem; }
1217 |
1218 | /* Media Queries
1219 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
1220 | /*
1221 | Note: The best way to structure the use of media queries is to create the queries
1222 | near the relevant code. For example, if you wanted to change the styles for buttons
1223 | on small devices, paste the mobile query code up in the buttons section and style it
1224 | there.
1225 | */
1226 | .dark {
1227 | background-color: #1d1d1d; }
1228 |
--------------------------------------------------------------------------------
/docs/css/bemskel/bemskel.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | /*! SCSS version of normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
3 | /**
4 | * 1. Change the default font family in all browsers (opinionated).
5 | * 2. Correct the line height in all browsers.
6 | * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
7 | */
8 | /* Document
9 | ========================================================================== */
10 | html {
11 | font-family: sans-serif;
12 | /* 1 */
13 | line-height: 1.15;
14 | /* 2 */
15 | -ms-text-size-adjust: 100%;
16 | /* 3 */
17 | -webkit-text-size-adjust: 100%;
18 | /* 3 */ }
19 |
20 | /* Sections
21 | ========================================================================== */
22 | /**
23 | * Remove the margin in all browsers (opinionated).
24 | */
25 | body {
26 | margin: 0; }
27 |
28 | /**
29 | * Add the correct display in IE 9-.
30 | */
31 | article, aside, footer, header, nav, section {
32 | display: block; }
33 |
34 | /**
35 | * Correct the font size and margin on `h1` elements within `section` and
36 | * `article` contexts in Chrome, Firefox, and Safari.
37 | */
38 | h1 {
39 | font-size: 2em;
40 | margin: 0.67em 0; }
41 |
42 | /* Grouping content
43 | ========================================================================== */
44 | /**
45 | * Add the correct display in IE 9-.
46 | * 1. Add the correct display in IE.
47 | */
48 | figcaption, figure, main {
49 | /* 1 */
50 | display: block; }
51 |
52 | /**
53 | * Add the correct margin in IE 8.
54 | */
55 | figure {
56 | margin: 1em 40px; }
57 |
58 | /**
59 | * 1. Add the correct box sizing in Firefox.
60 | * 2. Show the overflow in Edge and IE.
61 | */
62 | hr {
63 | box-sizing: content-box;
64 | /* 1 */
65 | height: 0;
66 | /* 1 */
67 | overflow: visible;
68 | /* 2 */ }
69 |
70 | /**
71 | * 1. Correct the inheritance and scaling of font size in all browsers.
72 | * 2. Correct the odd `em` font sizing in all browsers.
73 | */
74 | pre {
75 | font-family: monospace, monospace;
76 | /* 1 */
77 | font-size: 1em;
78 | /* 2 */ }
79 |
80 | /* Text-level semantics
81 | ========================================================================== */
82 | /**
83 | * 1. Remove the gray background on active links in IE 10.
84 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
85 | */
86 | a {
87 | background-color: transparent;
88 | /* 1 */
89 | -webkit-text-decoration-skip: objects;
90 | /* 2 */ }
91 |
92 | a:active, a:hover {
93 | outline-width: 0; }
94 |
95 | /**
96 | * Remove the outline on focused links when they are also active or hovered
97 | * in all browsers (opinionated).
98 | */
99 | /**
100 | * 1. Remove the bottom border in Firefox 39-.
101 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
102 | */
103 | abbr[title] {
104 | border-bottom: none;
105 | /* 1 */
106 | text-decoration: underline;
107 | /* 2 */
108 | text-decoration: underline dotted;
109 | /* 2 */ }
110 |
111 | /**
112 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
113 | */
114 | b, strong {
115 | font-weight: inherit; }
116 |
117 | /**
118 | * Add the correct font weight in Chrome, Edge, and Safari.
119 | */
120 | b, strong {
121 | font-weight: bolder; }
122 |
123 | /**
124 | * 1. Correct the inheritance and scaling of font size in all browsers.
125 | * 2. Correct the odd `em` font sizing in all browsers.
126 | */
127 | code, kbd, samp {
128 | font-family: monospace, monospace;
129 | /* 1 */
130 | font-size: 1em;
131 | /* 2 */ }
132 |
133 | /**
134 | * Add the correct font style in Android 4.3-.
135 | */
136 | dfn {
137 | font-style: italic; }
138 |
139 | /**
140 | * Add the correct background and color in IE 9-.
141 | */
142 | mark {
143 | background-color: #ff0;
144 | color: #000; }
145 |
146 | /**
147 | * Add the correct font size in all browsers.
148 | */
149 | small {
150 | font-size: 80%; }
151 |
152 | /**
153 | * Prevent `sub` and `sup` elements from affecting the line height in
154 | * all browsers.
155 | */
156 | sub, sup {
157 | font-size: 75%;
158 | line-height: 0;
159 | position: relative;
160 | vertical-align: baseline; }
161 |
162 | sub {
163 | bottom: -0.25em; }
164 |
165 | sup {
166 | top: -0.5em; }
167 |
168 | /* Embedded content
169 | ========================================================================== */
170 | /**
171 | * Add the correct display in IE 9-.
172 | */
173 | audio, video {
174 | display: inline-block; }
175 |
176 | /**
177 | * Add the correct display in iOS 4-7.
178 | */
179 | audio:not([controls]) {
180 | display: none;
181 | height: 0; }
182 |
183 | /**
184 | * Remove the border on images inside links in IE 10-.
185 | */
186 | img {
187 | border-style: none; }
188 |
189 | /**
190 | * Hide the overflow in IE.
191 | */
192 | svg:not(:root) {
193 | overflow: hidden; }
194 |
195 | /* Forms
196 | ========================================================================== */
197 | /**
198 | * 1. Change font properties to `inherit` in all browsers (opinionated).
199 | * 2. Remove the margin in Firefox and Safari.
200 | */
201 | button, input, optgroup, select, textarea {
202 | font: inherit;
203 | /* 1 */
204 | margin: 0;
205 | /* 2 */ }
206 |
207 | /**
208 | * Restore the font weight unset by the previous rule.
209 | */
210 | optgroup {
211 | font-weight: bold; }
212 |
213 | /**
214 | * Show the overflow in IE.
215 | * 1. Show the overflow in Edge.
216 | */
217 | button, input {
218 | /* 1 */
219 | overflow: visible; }
220 |
221 | /**
222 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
223 | * 1. Remove the inheritance of text transform in Firefox.
224 | */
225 | button, select {
226 | /* 1 */
227 | text-transform: none; }
228 |
229 | /**
230 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
231 | * controls in Android 4.
232 | * 2. Correct the inability to style clickable types in iOS and Safari.
233 | */
234 | button, html [type="button"], [type="reset"], [type="submit"] {
235 | -webkit-appearance: button;
236 | /* 2 */ }
237 |
238 | /**
239 | * Remove the inner border and padding in Firefox.
240 | */
241 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
242 | border-style: none;
243 | padding: 0; }
244 |
245 | /**
246 | * Restore the focus styles unset by the previous rule.
247 | */
248 | button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
249 | outline: 1px dotted ButtonText; }
250 |
251 | /**
252 | * Change the border, margin, and padding in all browsers (opinionated).
253 | */
254 | fieldset {
255 | border: 1px solid #c0c0c0;
256 | margin: 0 2px;
257 | padding: 0.35em 0.625em 0.75em; }
258 |
259 | /**
260 | * 1. Correct the text wrapping in Edge and IE.
261 | * 2. Correct the color inheritance from `fieldset` elements in IE.
262 | * 3. Remove the padding so developers are not caught out when they zero out
263 | * `fieldset` elements in all browsers.
264 | */
265 | legend {
266 | box-sizing: border-box;
267 | /* 1 */
268 | color: inherit;
269 | /* 2 */
270 | display: table;
271 | /* 1 */
272 | max-width: 100%;
273 | /* 1 */
274 | padding: 0;
275 | /* 3 */
276 | white-space: normal;
277 | /* 1 */ }
278 |
279 | /**
280 | * 1. Add the correct display in IE 9-.
281 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
282 | */
283 | progress {
284 | display: inline-block;
285 | /* 1 */
286 | vertical-align: baseline;
287 | /* 2 */ }
288 |
289 | /**
290 | * Remove the default vertical scrollbar in IE.
291 | */
292 | textarea {
293 | overflow: auto; }
294 |
295 | /**
296 | * 1. Add the correct box sizing in IE 10-.
297 | * 2. Remove the padding in IE 10-.
298 | */
299 | [type="checkbox"], [type="radio"] {
300 | box-sizing: border-box;
301 | /* 1 */
302 | padding: 0;
303 | /* 2 */ }
304 |
305 | /**
306 | * Correct the cursor style of increment and decrement buttons in Chrome.
307 | */
308 | [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
309 | height: auto; }
310 |
311 | /**
312 | * 1. Correct the odd appearance in Chrome and Safari.
313 | * 2. Correct the outline style in Safari.
314 | */
315 | [type="search"] {
316 | -webkit-appearance: textfield;
317 | /* 1 */
318 | outline-offset: -2px;
319 | /* 2 */ }
320 |
321 | [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
322 | -webkit-appearance: none; }
323 |
324 | /**
325 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
326 | */
327 | /**
328 | * 1. Correct the inability to style clickable types in iOS and Safari.
329 | * 2. Change font properties to `inherit` in Safari.
330 | */
331 | ::-webkit-file-upload-button {
332 | -webkit-appearance: button;
333 | /* 1 */
334 | font: inherit;
335 | /* 2 */ }
336 |
337 | /* Interactive
338 | ========================================================================== */
339 | /*
340 | * Add the correct display in IE 9-.
341 | * 1. Add the correct display in Edge, IE, and Firefox.
342 | */
343 | details, menu {
344 | display: block; }
345 |
346 | /*
347 | * Add the correct display in all browsers.
348 | */
349 | summary {
350 | display: list-item; }
351 |
352 | /* Scripting
353 | ========================================================================== */
354 | /**
355 | * Add the correct display in IE 9-.
356 | */
357 | canvas {
358 | display: inline-block; }
359 |
360 | /**
361 | * Add the correct display in IE.
362 | */
363 | template, [hidden] {
364 | display: none; }
365 |
366 | html {
367 | box-sizing: border-box;
368 | font-size: 62.5%;
369 | height: 100%; }
370 |
371 | *,
372 | *:before,
373 | *:after {
374 | box-sizing: inherit; }
375 |
376 | body {
377 | font-size: 1.6rem;
378 | line-height: 2.4rem;
379 | font-weight: 400;
380 | font-family: "Roboto", Helvetica, Arial, sans-serif;
381 | color: #222222; }
382 |
383 | a {
384 | color: #496DDB;
385 | text-decoration: none;
386 | word-wrap: break-word; }
387 |
388 | a:hover {
389 | color: shade(#496DDB, 15%); }
390 |
391 | hr {
392 | margin-top: 3rem;
393 | margin-bottom: 3.5rem;
394 | border-width: 0;
395 | border-top: 1px solid #d3d3d3; }
396 |
397 | ul {
398 | list-style: circle inside; }
399 |
400 | ol {
401 | list-style: decimal inside;
402 | padding-left: 0;
403 | margin-top: 0; }
404 |
405 | ul {
406 | padding-left: 0;
407 | margin-top: 0; }
408 |
409 | ul ul, ul ol {
410 | margin: 1.5rem 0 1.5rem 3rem;
411 | font-size: 90%; }
412 |
413 | ol ol, ol ul {
414 | margin: 1.5rem 0 1.5rem 3rem;
415 | font-size: 90%; }
416 |
417 | li {
418 | margin-bottom: 1rem; }
419 |
420 | dt {
421 | font-style: italic; }
422 |
423 | dd {
424 | padding-left: 2rem; }
425 |
426 | img,
427 | video {
428 | display: table;
429 | max-width: 100%; }
430 |
431 | figure {
432 | margin: 0 auto;
433 | padding-bottom: 2.4rem; }
434 |
435 | figure img {
436 | display: table;
437 | margin: 0 auto; }
438 |
439 | caption,
440 | figcaption {
441 | font-size: 2rem;
442 | font-style: italic;
443 | text-align: center; }
444 |
445 | table {
446 | border-collapse: collapse;
447 | border-color: gray;
448 | border-spacing: 2px;
449 | max-width: 100%;
450 | width: 100%; }
451 |
452 | table thead th {
453 | vertical-align: bottom;
454 | border-bottom: 1px solid #d3d3d3; }
455 |
456 | table th,
457 | table td {
458 | padding: 0.6rem;
459 | vertical-align: top;
460 | border-top: 1px solid #ccc; }
461 |
462 | table th,
463 | table tfoot td {
464 | font-weight: 700;
465 | text-align: left; }
466 |
467 | table td {
468 | border-bottom: 1px solid #d3d3d3;
469 | padding: .6rem;
470 | text-align: left;
471 | vertical-align: top; }
472 |
473 | textarea,
474 | select {
475 | height: 38px;
476 | padding: 6px 10px;
477 | background-color: #fff;
478 | border: 1px solid #d1d1d1;
479 | border-radius: 0.2rem;
480 | box-shadow: none; }
481 |
482 | textarea:focus,
483 | select:focus {
484 | border: 1px solid #3498db;
485 | outline: 0; }
486 |
487 | input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
488 | appearance: none;
489 | background-color: #fff;
490 | border-radius: 0.2rem;
491 | border: 1px solid #d1d1d1;
492 | box-shadow: none;
493 | box-sizing: border-box;
494 | height: 38px;
495 | padding: 6px 10px;
496 | -moz-appearance: none;
497 | -webkit-appearance: none; }
498 |
499 | input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus {
500 | border: 1px solid #3498db;
501 | outline: 0; }
502 |
503 | textarea {
504 | appearance: none;
505 | min-height: 65px;
506 | padding-bottom: 6px;
507 | padding-top: 6px;
508 | -moz-appearance: none;
509 | -webkit-appearance: none; }
510 |
511 | label,
512 | legend {
513 | display: block;
514 | font-weight: 600;
515 | margin-bottom: .5rem; }
516 |
517 | fieldset {
518 | padding: 0;
519 | border-width: 0; }
520 |
521 | input[type="checkbox"], input[type="radio"] {
522 | display: inline; }
523 |
524 | label > .label-body {
525 | display: inline-block;
526 | font-weight: normal;
527 | margin-left: .5rem; }
528 |
529 | pre {
530 | overflow: auto; }
531 |
532 | code {
533 | background: #e3e3e3;
534 | border-radius: 0.2rem;
535 | border: 1px solid #d3d3d3;
536 | font-size: 90%;
537 | margin: 0 .2rem;
538 | padding: .2rem .5rem;
539 | white-space: nowrap; }
540 |
541 | pre > code {
542 | display: block;
543 | padding: 1rem 1.5rem;
544 | white-space: pre; }
545 |
546 | .u-full-width {
547 | width: 100%; }
548 |
549 | .u-max-full-width {
550 | max-width: 100%; }
551 |
552 | .u-pull--right {
553 | float: right; }
554 |
555 | .u-pull--left {
556 | float: left; }
557 |
558 | .u-disabled {
559 | cursor: default;
560 | opacity: .5;
561 | pointer-events: none; }
562 |
563 | /**
564 | * Clear inner floats
565 | */
566 | .u-clearfix:after {
567 | clear: both;
568 | content: "";
569 | display: table; }
570 |
571 | /**
572 | * Hide text while making it readable for screen readers
573 | * 1. Needed in WebKit-based browsers because of an implementation bug;
574 | * See: https://code.google.com/p/chromium/issues/detail?id=457146
575 | */
576 | .u-hide-text {
577 | overflow: hidden;
578 | padding: 0;
579 | /* 1 */
580 | text-indent: 101%;
581 | white-space: nowrap; }
582 |
583 | /**
584 | * Hide element while making it readable for screen readers
585 | * Shamelessly borrowed from HTML5Boilerplate:
586 | * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
587 | */
588 | .u-visually-hidden {
589 | border: 0;
590 | clip: rect(0 0 0 0);
591 | height: 1px;
592 | margin: -1px;
593 | overflow: hidden;
594 | padding: 0;
595 | position: absolute;
596 | width: 1px; }
597 |
598 | .u-ta-left {
599 | text-align: left; }
600 |
601 | .u-ta-left {
602 | text-align: center; }
603 |
604 | .u-ta-right {
605 | text-align: right; }
606 |
607 | /**
608 | * Basic typography style for text
609 | */
610 | h1, h2, h3, h4, h5, h6 {
611 | margin-top: 0;
612 | margin-bottom: 2rem;
613 | font-weight: 300;
614 | word-wrap: break-word; }
615 |
616 | h1 {
617 | font-size: 4.0rem;
618 | line-height: 1.2;
619 | letter-spacing: -.1rem; }
620 |
621 | h2 {
622 | font-size: 3.6rem;
623 | line-height: 1.25;
624 | letter-spacing: -.1rem; }
625 |
626 | h3 {
627 | font-size: 3.0rem;
628 | line-height: 1.3;
629 | letter-spacing: -.1rem; }
630 |
631 | h4 {
632 | font-size: 2.4rem;
633 | line-height: 1.35;
634 | letter-spacing: -.08rem; }
635 |
636 | h5 {
637 | font-size: 1.8rem;
638 | line-height: 1.5;
639 | letter-spacing: -.05rem; }
640 |
641 | h6 {
642 | font-size: 1.5rem;
643 | line-height: 1.6;
644 | letter-spacing: 0; }
645 |
646 | @media (min-width: 550px) {
647 | h1 {
648 | font-size: 5.0rem; }
649 | h2 {
650 | font-size: 4.2rem; }
651 | h3 {
652 | font-size: 3.6rem; }
653 | h4 {
654 | font-size: 3.0rem; }
655 | h5 {
656 | font-size: 2.4rem; }
657 | h6 {
658 | font-size: 1.5rem; } }
659 |
660 | p {
661 | margin-top: 0; }
662 |
663 | blockquote {
664 | margin: 0 0 2.4rem 1.2rem;
665 | border-left: 0.3rem solid #545454;
666 | padding: 2.4rem 1.2rem; }
667 |
668 | blockquote p:last-child {
669 | padding-bottom: 0; }
670 |
671 | small,
672 | sub,
673 | sup {
674 | font-size: 2rem;
675 | line-height: 1; }
676 |
677 | caption,
678 | figcaption {
679 | font-size: 2rem;
680 | font-style: italic;
681 | text-align: center; }
682 |
683 | em,
684 | cite,
685 | i {
686 | font-style: italic; }
687 |
688 | q:before {
689 | content: "'"; }
690 |
691 | q:after {
692 | content: "'"; }
693 |
694 | q > q {
695 | font-style: italic; }
696 |
697 | dfn,
698 | abbr {
699 | border-bottom: 0.1rem dotted #d3d3d3;
700 | cursor: default; }
701 |
702 | dfn,
703 | abbr {
704 | border-bottom: 0.1rem dotted #d3d3d3;
705 | cursor: default; }
706 |
707 | button, input {
708 | margin-bottom: 1rem; }
709 |
710 | fieldset,
711 | select,
712 | textarea {
713 | margin-bottom: 1.4rem; }
714 |
715 | blockquote,
716 | dl,
717 | figure,
718 | form,
719 | ol,
720 | p,
721 | pre,
722 | table,
723 | ul {
724 | margin-bottom: 2.4rem; }
725 |
726 | li {
727 | margin-bottom: 1rem; }
728 |
729 | label {
730 | margin-bottom: .25rem; }
731 |
732 | @media print {
733 | * {
734 | background: transparent !important;
735 | color: #000 !important;
736 | box-shadow: none !important;
737 | text-shadow: none !important; }
738 | @page {
739 | margin: 0.5cm; }
740 | a,
741 | a:visited {
742 | text-decoration: underline; }
743 | a[href]:after {
744 | content: " (" attr(href) ")"; }
745 | abbr[title]:after {
746 | content: " (" attr(title) ")"; }
747 | .ir a:after,
748 | a[href^="javascript:"]:after,
749 | a[href^="#"]:after {
750 | content: ""; }
751 | pre,
752 | blockquote {
753 | border: 1px solid #999;
754 | page-break-inside: avoid; }
755 | thead {
756 | display: table-header-group; }
757 | tr,
758 | img {
759 | page-break-inside: avoid; }
760 | img {
761 | max-width: 100% !important; }
762 | p,
763 | h2,
764 | h3 {
765 | orphans: 3;
766 | widows: 3; }
767 | h2,
768 | h3 {
769 | page-break-after: avoid; } }
770 |
771 | /*
772 | Containers
773 |
774 | Use containers when you need a content area that has standard maximum width and centered on the page.
775 |
776 | Markup:
777 | Container
778 |
779 | .container - Default container size = $container-width
780 | .container--sm - Small Container
781 | .container--lg - Large Container
782 | */
783 | .container {
784 | margin: 0 auto;
785 | max-width: 1000px;
786 | padding: 0 10px;
787 | position: relative;
788 | width: 100%;
789 | box-sizing: border-box; }
790 |
791 | .container--lg {
792 | margin: 0 auto;
793 | max-width: 1200px;
794 | padding: 3.2rem 1rem; }
795 |
796 | .container--sm {
797 | margin: 0 auto;
798 | max-width: 640px;
799 | padding: 2.4rem 2rem; }
800 |
801 | .col {
802 | width: 100%;
803 | float: left;
804 | box-sizing: border-box; }
805 |
806 | @media (min-width: 400px) {
807 | .container {
808 | width: 85%;
809 | padding: 0; } }
810 |
811 | @media (min-width: 550px) {
812 | .container {
813 | width: 80%; }
814 | .col {
815 | margin-left: 2%; }
816 | .col:first-child {
817 | margin-left: 0; }
818 | .col--1 {
819 | width: 6.5%; }
820 | .col--2 {
821 | width: 15%; }
822 | .col--3 {
823 | width: 23.5%; }
824 | .col--4 {
825 | width: 32%; }
826 | .col--5 {
827 | width: 40.5%; }
828 | .col--6 {
829 | width: 49%; }
830 | .col--7 {
831 | width: 57.5%; }
832 | .col--8 {
833 | width: 66%; }
834 | .col--9 {
835 | width: 74.5%; }
836 | .col--10 {
837 | width: 83%; }
838 | .col--11 {
839 | width: 91.5%; }
840 | .col--12 {
841 | width: 100%;
842 | margin-left: 0; }
843 | .col--1-3 {
844 | width: 32%; }
845 | .col--2-3 {
846 | width: 66%; }
847 | .col--1-2 {
848 | width: 49%; }
849 | .col--offset-1 {
850 | margin-left: 8.5% !important; }
851 | .col--offset-2 {
852 | margin-left: 17% !important; }
853 | .col--offset-3 {
854 | margin-left: 25.5% !important; }
855 | .col--offset-4 {
856 | margin-left: 34% !important; }
857 | .col--offset-5 {
858 | margin-left: 42.5% !important; }
859 | .col--offset-6 {
860 | margin-left: 51% !important; }
861 | .col--offset-7 {
862 | margin-left: 59.5% !important; }
863 | .col--offset-8 {
864 | margin-left: 68% !important; }
865 | .col--offset-9 {
866 | margin-left: 76.5% !important; }
867 | .col--offset-10 {
868 | margin-left: 85% !important; }
869 | .col--offset-11 {
870 | margin-left: 93.5% !important; }
871 | .col--offset-1-3 {
872 | margin-left: 34% !important; }
873 | .col--offset-2-3 {
874 | margin-left: 68% !important; }
875 | .col--offset-1-2 {
876 | margin-left: 51% !important; } }
877 |
878 | /* Self Clearing Goodness */
879 | .container:after,
880 | .row:after {
881 | clear: both;
882 | content: "";
883 | display: table; }
884 |
885 | /*
886 |
887 | Grid
888 |
889 | This is a grid made using flexbox. Use the ff classes to setup a flexbox grid:
890 |
891 | .flex-grid - Grid is always shown, even in small screens
892 |
893 | // Modifier classes for `.flex-grid`.
894 | // Use these classes to set the screen width when the grid is visible.
895 |
896 | // Grid Modifiers
897 | .flex-grid--md - Grid starts at medium sized screens
898 | .flex-grid--lg - Grid starts at large and up screens
899 |
900 |
901 | Use `.flex-grid__col` to define a column inside a `.flex-grid` grid.
902 | Direct children of `.flex-grid` are columns with the class,
903 | `.flex-grid__col`
904 |
905 | Markup:
906 |
907 |
908 | Cell 1
909 | Cell 2
910 | Cell 3
911 |
912 |
913 | Half-width column
914 | Default width column
915 |
916 |
917 |
918 | Cell 1
919 | Cell 2
920 |
921 |
922 | Double-width column
923 | Default width column
924 |
925 |
926 |
927 | // Column modifiers
928 |
929 | .flex-grid__col--sm - half the width of default column
930 | .flex-grid__col--lg - double the width of default column
931 | .flex-grid__col--fixed-width - fixed-width column (default = 200px)
932 | */
933 | .flex-grid {
934 | display: flex; }
935 |
936 | .flex-grid > * {
937 | flex: 1; }
938 |
939 | .flex-grid > *.flex-grid__col {
940 | flex-grow: 4;
941 | margin-left: 2%; }
942 |
943 | .flex-grid > *.flex-grid__col--fixed-width {
944 | flex: 0 0 200px; }
945 |
946 | .flex-grid > *.flex-grid__col--sm {
947 | flex-grow: 2; }
948 |
949 | .flex-grid > *.flex-grid__col--lg {
950 | flex-grow: 8; }
951 |
952 | .flex-grid > *:first-child {
953 | margin-left: 0rem; }
954 |
955 | .flex-grid > *:last-child {
956 | margin-right: 0rem; }
957 |
958 | @media (max-width: 549px) {
959 | .flex-grid--md {
960 | display: block; }
961 | .flex-grid--md > * {
962 | padding-left: 0;
963 | padding-right: 0; }
964 | .flex-grid--md > *.flex-grid__col {
965 | margin-left: 0; } }
966 |
967 | @media (max-width: 959px) {
968 | .flex-grid--lg {
969 | display: block; }
970 | .flex-grid--lg > * {
971 | padding-left: 0;
972 | padding-right: 0; }
973 | .flex-grid--lg > *.flex-grid__col {
974 | margin-left: 0; } }
975 |
976 | .btn, [type="submit"],
977 | [type="reset"],
978 | [type="button"],
979 | .button {
980 | background-color: transparent;
981 | border-radius: 0.2rem;
982 | border: 1px solid #bbb;
983 | color: #7e7e7e;
984 | cursor: pointer;
985 | display: inline-block;
986 | font-size: inherit;
987 | font-weight: 100;
988 | height: 38px;
989 | letter-spacing: .1rem;
990 | line-height: 38px;
991 | margin-bottom: 1rem;
992 | padding: 0 30px;
993 | text-align: center;
994 | text-decoration: none;
995 | transition-duration: 200ms;
996 | white-space: nowrap; }
997 |
998 | .btn:focus, [type="submit"]:focus,
999 | [type="reset"]:focus,
1000 | [type="button"]:focus, .btn:hover, [type="submit"]:hover,
1001 | [type="reset"]:hover,
1002 | [type="button"]:hover,
1003 | .button:focus,
1004 | .button:hover {
1005 | color: #7e7e7e;
1006 | border-color: lightgray;
1007 | outline: 0; }
1008 |
1009 | .btn:focus, [type="submit"]:focus,
1010 | [type="reset"]:focus,
1011 | [type="button"]:focus,
1012 | .button:focus {
1013 | outline: 0.1rem dotted #a8a8a8; }
1014 |
1015 | .btn:active, [type="submit"]:active,
1016 | [type="reset"]:active,
1017 | [type="button"]:active,
1018 | .button:active {
1019 | background-color: #3498db; }
1020 |
1021 | .btn--primary {
1022 | color: #ffffff;
1023 | background-color: #3498db;
1024 | border-color: #3498db; }
1025 |
1026 | .btn--primary:focus, .btn--primary:hover {
1027 | color: #ffffff;
1028 | background-color: #217dbb;
1029 | border-color: #3498db; }
1030 |
1031 | .btn--secondary {
1032 | color: #e4e4e4;
1033 | background-color: #7e7e7e;
1034 | border-color: #7e7e7e; }
1035 |
1036 | .btn--secondary:focus, .btn--secondary:hover {
1037 | color: #e4e4e4;
1038 | background-color: #585858;
1039 | border-color: #7e7e7e; }
1040 |
1041 | .btn--success {
1042 | background-color: #2BC016;
1043 | border-color: #2BC016;
1044 | color: #ffffff; }
1045 |
1046 | .btn--success:focus, .btn--success:hover {
1047 | color: #ffffff;
1048 | background-color: #26a913;
1049 | border-color: #2BC016; }
1050 |
1051 | .btn--info {
1052 | background-color: #5BC0EB;
1053 | border-color: #5BC0EB;
1054 | color: #ffffff; }
1055 |
1056 | .btn--info:focus, .btn--info:hover {
1057 | color: #ffffff;
1058 | background-color: #2eafe5;
1059 | border-color: #5BC0EB; }
1060 |
1061 | .btn--warning {
1062 | background-color: #E67E22;
1063 | border-color: #E67E22;
1064 | color: #ffffff; }
1065 |
1066 | .btn--warning:focus, .btn--warning:hover {
1067 | color: #ffffff;
1068 | background-color: #bf6516;
1069 | border-color: #E67E22; }
1070 |
1071 | .btn--danger {
1072 | background-color: #C3423F;
1073 | border-color: #C3423F;
1074 | color: #ffffff; }
1075 |
1076 | .btn--danger:focus, .btn--danger:hover {
1077 | color: #ffffff;
1078 | background-color: #9e3431;
1079 | border-color: #C3423F; }
1080 |
1081 | .btn-outline--primary {
1082 | background-color: transparent;
1083 | border-color: #3498db;
1084 | color: #3498db; }
1085 |
1086 | .btn-outline--primary:focus, .btn-outline--primary:hover {
1087 | color: #ffffff;
1088 | background-color: #3498db;
1089 | border-color: #3498db; }
1090 |
1091 | .btn-outline--secondary {
1092 | background-color: transparent;
1093 | border-color: #7e7e7e;
1094 | color: #7e7e7e; }
1095 |
1096 | .btn-outline--secondary:focus, .btn-outline--secondary:hover {
1097 | color: #d3d3d3;
1098 | background-color: #545454;
1099 | border-color: #7e7e7e; }
1100 |
1101 | .btn-outline--success {
1102 | background-color: transparent;
1103 | border-color: #2BC016;
1104 | color: #2BC016; }
1105 |
1106 | .btn-outline--success:focus, .btn-outline--success:hover {
1107 | color: #ffffff;
1108 | background-color: #2BC016 !important;
1109 | border-color: #2BC016; }
1110 |
1111 | .btn-outline--info {
1112 | background-color: transparent;
1113 | border-color: #5BC0EB;
1114 | color: #5BC0EB; }
1115 |
1116 | .btn-outline--info:focus, .btn-outline--info:hover {
1117 | color: #ffffff;
1118 | background-color: #5BC0EB;
1119 | border-color: #5BC0EB; }
1120 |
1121 | .btn-outline--warning {
1122 | background-color: transparent;
1123 | border-color: #E67E22;
1124 | color: #E67E22; }
1125 |
1126 | .btn-outline--warning:focus, .btn-outline--warning:hover {
1127 | color: #ffffff;
1128 | background-color: #E67E22;
1129 | border-color: #E67E22; }
1130 |
1131 | .btn-outline--danger {
1132 | background-color: transparent;
1133 | border-color: #C3423F;
1134 | color: #C3423F; }
1135 |
1136 | .btn-outline--danger:focus, .btn-outline--danger:hover {
1137 | color: #ffffff;
1138 | background-color: #C3423F;
1139 | border-color: #C3423F; }
1140 |
1141 | .btn--lg {
1142 | font-size: inherit;
1143 | font-weight: 100;
1144 | height: 5.8rem;
1145 | line-height: 5.8rem;
1146 | vertical-align: middle;
1147 | padding: 0 4rem; }
1148 |
1149 | .btn--raised {
1150 | border-width: 0;
1151 | border-bottom-width: 3px;
1152 | border-bottom-color: rgba(0, 0, 0, 0.15); }
1153 |
1154 | .pager {
1155 | list-style: none;
1156 | margin-bottom: 1.5rem;
1157 | margin-left: 0;
1158 | text-align: center; }
1159 |
1160 | .pager li {
1161 | margin: 0;
1162 | display: inline-block; }
1163 |
1164 | .pager li:last-child {
1165 | margin-right: 0; }
1166 |
1167 | .pager li:hover {
1168 | background-color: tint(#d3d3d3, 30%); }
1169 |
1170 | .pager li a {
1171 | display: inline-block;
1172 | padding: 0rem 1rem; }
1173 |
1174 | .pager li a:hover {
1175 | background-color: #e4e4e4;
1176 | text-decoration: none; }
1177 |
1178 | .pager li.pager--current {
1179 | background-color: #3498db; }
1180 |
1181 | .pager li.pager--current a {
1182 | color: #fff;
1183 | padding: 0 1rem;
1184 | margin-bottom: 0rem; }
1185 |
1186 | .pager li.pager--current a:hover {
1187 | background-color: #3498db;
1188 | padding: 0rem 1rem; }
1189 |
1190 | .table thead > tr {
1191 | border-bottom: 0.2rem solid #d3d3d3; }
1192 |
1193 | .table--bordered th,
1194 | .table--bordered td {
1195 | border: 0.05rem solid #d3d3d3; }
1196 |
1197 | .table--striped tbody > tr:nth-child(odd) > td {
1198 | background-color: #e4e4e4; }
1199 |
1200 | .table--hover tbody tr:hover {
1201 | background-color: #e4e4e4; }
1202 |
1203 | .table--compact thead > tr {
1204 | border-bottom: 0.2rem solid #d3d3d3; }
1205 |
1206 | .table--compact th,
1207 | .table--compact td {
1208 | padding: .3rem; }
1209 |
1210 | .table-responsive {
1211 | overflow-x: auto;
1212 | width: 100%;
1213 | -webkit-overflow-scrolling: touch; }
1214 |
1215 | .table-responsive table {
1216 | margin-bottom: .5rem; }
1217 |
1218 | /* Media Queries
1219 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
1220 | /*
1221 | Note: The best way to structure the use of media queries is to create the queries
1222 | near the relevant code. For example, if you wanted to change the styles for buttons
1223 | on small devices, paste the mobile query code up in the buttons section and style it
1224 | there.
1225 | */
1226 | .dark {
1227 | background-color: #1d1d1d; }
1228 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | BEMSkel - A lightweight responsive CSS framework using BEM and SASS
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | BEMSkel
26 | A lightweight responsive CSS framework using BEM and SASS for building component-based user interfaces.
27 |
28 |
36 |
37 |
38 |
39 |
40 |
41 | Features
42 |
43 |
44 |
45 |
46 | BEM
47 |
48 |
49 | Written using BEM (Block, Element, Modifier) convention to make your front-end code easier to read and understand.
50 |
51 |
52 |
53 |
54 |
55 | SASS
56 |
57 |
58 | Uses 7-1 Architecture pattern for maintainable and scalable SASS.
59 |
60 |
61 |
62 |
63 |
64 | Flexbox Grid
65 |
66 |
67 | Two ways of creating grids - CSS Grid and Flexbox.
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | Lightweight
76 |
77 |
78 | Only includes the most important features to minimize code bloat.
79 |
80 |
81 |
82 |
83 |
84 | Gulp Build System
85 |
86 |
87 | Includes a Gulp build system to automate building of SASS files
88 |
89 |
90 |
91 |
92 |
93 | Easy To Extend
94 |
95 |
96 | Designed to be scalable and easy to customize. Use it as a standalone library or use it a starting point to build your next application.
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
182 |
183 |
184 |
185 |
186 |
187 | Introduction
188 | BEMSkel, or short for BEM Skeleton, is a lightweight CSS framework using BEM and SASS. It's designed to provide a solid foundation for building a component-based web applications and user interfaces. It is written using the BEM (Block, Element, Modifier) naming convention to provide a consistent and strict naming convention which allows you to divide your user interface into independent blocks and allow reuse of existing code.
189 |
190 |
BEMSkel was initially based on Skeleton boilerplate but was rewritten using BEM and added with useful features for building component-based user interfaces. It provides styles for the most commonly used elements such as text, buttons, tables, and forms. It also includes two ways of creating grid systems -- grid and flexbox. As a simple rule, use grid if you need to support older browsers or flexbox if you only want to support modern browsers.
191 |
192 | If you like BEMSkel, feel free to share it, tweet it, or start using it. <3
193 | Tweet
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 | Grid
203 | The grid is a 12-column fluid grid with a maximum width of 1000px, that shrinks with the browser device at smaller sizes. The maximum width can be changed with one line of CSS in the _variables.scss file and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Use the grid layout if you need support for older browsers such as IE9 and below
204 |
205 |
206 |
207 | col--2
208 | col--10
209 |
210 |
211 | col--3
212 | col--9
213 |
214 |
215 | col--4
216 | col--8
217 |
218 |
219 | col--5
220 | col--7
221 |
222 |
223 | col--6
224 | col--6
225 |
226 |
227 | col--7
228 | col--5
229 |
230 |
231 | col--8
232 | col--4
233 |
234 |
235 | col--9
236 | col--3
237 |
238 |
239 | col--10
240 | col--2
241 |
242 |
243 | col--11
244 | col--1
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 | col--2
260 | col--10
261 |
262 |
263 |
264 |
265 | col--3
266 | col--9
267 |
268 |
269 |
270 |
271 | 1/3
272 | 2/3
273 |
274 |
275 | 1/2
276 | 1/2
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 | Flexbox Grid
290 | Use flexbox grid if you only want to support modern browsers. In this kind of layout, the width of the columns are implicit, so columns will adjust automatically to be equal width to their adjacent columns.
291 |
292 |
293 | Auto
294 | Auto
295 | Auto
296 | Auto
297 |
298 |
299 | flex-grow: 2
300 | flex-grow: 4
301 |
302 |
303 | fixed-width: 200px
304 | flex-grow: 4
305 |
306 |
307 | flex-grow: large
308 | flex-grow: default
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 | Auto
323 | Auto
324 | Auto
325 | Auto
326 |
327 |
328 |
329 | flex-grow: 2
330 | flex-grow: 4
331 |
332 |
333 |
334 | fixed-width: 200px
335 | flex-grow: 4
336 |
337 |
338 |
339 | flex-grow: large
340 | flex-grow: default
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 | Typography
352 | Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, BEMSkel never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.
353 |
354 |
355 |
356 | The typography base is Roboto served by Google, set at 1.6rem (16px) over a 2.4rem line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.
357 | Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.
358 |
359 |
360 | Heading <h1> 50rem
361 | Heading <h2> 42rem
362 | Heading <h3> 36rem
363 | Heading <h4> 30rem
364 | Heading <h5> 24rem
365 | Heading <h6> 15rem
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 | Heading
380 | Heading
381 | Heading
382 | Heading
383 | Heading
384 | Heading
385 |
386 |
387 | The base type is 16px over 2.4 line height (24px)
388 |
389 |
390 | Bolded
391 | Italicized
392 | Colored
393 | Underlined
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 | Buttons
403 | Different button styles are included in BEMSKEL -- classic, outline, raised, and large. Classic button styles are patterned after Bootstrap, which has 5 different color styles -- primary, secondary, info, warning, and danger. Button styles are also applied to a number of appropriate form elements but can also be applied to anchors with a .btn class.
404 |
405 | Button Class
406 |
407 | Anchor
408 |
409 |
410 |
411 |
412 |
413 | Classic Styles
414 |
415 | Primary
416 |
417 |
418 |
419 |
420 |
421 |
422 | Large Buttons
423 |
424 | Large Primary
425 |
426 |
427 |
428 | Outline Buttons
429 |
437 | Raised Buttons
438 |
439 | Primary
440 |
441 |
442 |
443 |
444 |
445 |
446 | Buttons with Icons
447 | BEMSkel does not include an icon font, but works nicely with popular ones such as FontAwesome. You can use the <i> element to attach icons inside buttons.
448 |
449 |
453 |
457 |
461 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |
474 |
475 |
476 | Anchor
477 |
478 |
479 |
480 |
481 |
482 |
483 | Primary
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 | Large Primary
492 |
493 |
494 |
495 |
496 | Primary
497 | Secondary
498 |
499 |
500 |
501 |
502 |
503 |
504 | Primary
505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 | Forms
521 | Basic form styles are included to help building forms easier.
522 |
523 |
552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 |
560 |
561 |
584 |
585 |
586 |
587 |
588 |
589 |
590 |
591 |
592 |
593 |
594 |
595 |
596 | Lists
597 |
598 |
599 |
600 | - Unordered lists have basic styles
601 | -
602 | They use the circle list style
603 |
604 | - Nested lists styled to feel right
605 | - Can nest either type of list into the other
606 |
607 |
608 | - Just more list items
609 |
610 |
611 |
612 |
613 | - Ordered lists also have basic styles
614 | -
615 | They use the decimal list style
616 |
617 | - Ordered and unordered can be nested
618 | - Can nest either type of list into the other
619 |
620 |
621 | - Last list item just for the fun
622 |
623 |
624 |
625 |
626 |
627 |
628 |
629 |
630 |
631 |
632 |
633 |
634 |
635 | - Unordered lists have basic styles
636 | -
637 | They use the circle list style
638 |
639 | - Nested lists styled to feel right
640 | - Can nest either type of list into the other
641 |
642 |
643 | - Just more list items
644 |
645 |
646 |
647 | - Ordered lists also have basic styles
648 | -
649 | They use the decimal list style
650 |
651 | - Ordered and unordered can be nested
652 | - Can nest either type of list into the other
653 |
654 |
655 | - Last list item just for the fun
656 |
657 |
658 |
659 |
660 |
661 |
662 |
663 |
664 |
665 |
666 | Code
667 | Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.
668 |
669 |
670 | .some-class {
671 | background-color: red;
672 | }
673 |
674 |
675 |
676 |
677 |
678 |
679 |
680 |
681 |
682 |
683 | .some-class {
684 | background-color: red;
685 | }
686 |
687 |
688 |
690 |
691 |
692 |
693 |
694 |
695 |
696 |
697 | Tables
698 | Be sure to use properly formed table markup with <thead> and <tbody> when building a table.
699 |
700 |
701 |
702 | Default
703 |
704 |
705 |
706 | #
707 | First Name
708 | Last Name
709 |
710 |
711 |
712 |
713 | 11
714 | Lemmy
715 | Kilmister
716 |
717 |
718 | 10
719 | Jeff
720 | Hanneman
721 |
722 |
723 | 12
724 | Jimi
725 | Hendrix
726 |
727 |
728 |
729 |
730 |
731 | Bordered
732 |
733 |
734 |
735 | #
736 | First Name
737 | Last Name
738 |
739 |
740 |
741 |
742 | 11
743 | Lemmy
744 | Kilmister
745 |
746 |
747 | 10
748 | Jeff
749 | Hanneman
750 |
751 |
752 | 12
753 | Jimi
754 | Hendrix
755 |
756 |
757 |
758 |
759 |
760 |
761 |
762 |
763 | Striped
764 |
765 |
766 |
767 | #
768 | First Name
769 | Last Name
770 |
771 |
772 |
773 |
774 | 11
775 | Lemmy
776 | Kilmister
777 |
778 |
779 | 10
780 | Jeff
781 | Hanneman
782 |
783 |
784 | 12
785 | Jimi
786 | Hendrix
787 |
788 |
789 |
790 |
791 |
792 | Hover
793 |
794 |
795 |
796 | #
797 | First Name
798 | Last Name
799 |
800 |
801 |
802 |
803 | 11
804 | Lemmy
805 | Kilmister
806 |
807 |
808 | 10
809 | Jeff
810 | Hanneman
811 |
812 |
813 | 12
814 | Jimi
815 | Hendrix
816 |
817 |
818 |
819 |
820 |
821 |
822 |
823 |
824 | Compact
825 |
826 |
827 |
828 | #
829 | First Name
830 | Last Name
831 |
832 |
833 |
834 |
835 | 11
836 | Lemmy
837 | Kilmister
838 |
839 |
840 | 10
841 | Jeff
842 | Hanneman
843 |
844 |
845 | 12
846 | Jimi
847 | Hendrix
848 |
849 |
850 |
851 |
852 |
853 | Responsive (scrolls horizonatally on smaller screens)
854 |
855 |
856 |
857 |
858 |
859 | #
860 | First Name
861 | Last Name
862 | Band
863 |
864 |
865 |
866 |
867 | 11
868 | Lemmy
869 | Kilmister
870 | Motorhead
871 |
872 |
873 | 10
874 | Jeff
875 | Hanneman
876 | Slayer
877 |
878 |
879 | 12
880 | Jim
881 | Morrison
882 | The Doors
883 |
884 |
885 |
886 |
887 |
888 |
889 |
890 |
891 |
892 |
893 |
894 |
895 |
896 |
897 |
898 |
899 |
900 |
901 |
902 |
903 |
910 |
911 |
912 |
913 |
914 |
915 |
916 |
917 |
918 |
919 |
920 |
921 |
922 |
923 |
924 |
925 |
926 |
927 |
928 |
929 | Pagination
930 | The pagination component provides default styling for pagination that contains long content and requires splitting content into shorter, easier to understand blocks.
931 |
932 |
942 |
943 |
944 |
945 |
946 |
947 |
948 |
949 |
950 |
960 |
961 |
962 |
963 |
964 |
965 |
966 |
967 |
968 | Media queries
969 | BEMSkel uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how BEMSkel's grid is built and is the preferable method of organizing CSS. It means all styles outside of a media query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:
970 |
971 |
972 |
973 | - Desktop HD: 1200px
974 | - Desktop: 1000px
975 | - Tablet: 750px
976 |
977 |
978 |
979 |
980 | - Phablet: 550px
981 | - Mobile: 400px
982 |
983 |
984 |
985 |
986 |
987 |
988 |
989 |
990 |
991 |
992 | /* Mobile first queries */
993 |
994 | /* Larger than mobile */
995 | @media (min-width: 400px) {}
996 |
997 | /* Larger than phablet */
998 | @media (min-width: 550px) {}
999 |
1000 | /* Larger than tablet */
1001 | @media (min-width: 750px) {}
1002 |
1003 | /* Larger than desktop */
1004 | @media (min-width: 1000px) {}
1005 |
1006 | /* Larger than Desktop HD */
1007 | @media (min-width: 1200px) {}
1008 |
1009 |
1010 |
1011 |
1012 |
1013 |
1014 |
1015 |
1016 |
1017 | Utilities
1018 | BEMSkel has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.
1019 |
1020 |
1021 |
1022 |
1023 |
1024 |
1025 |
1026 | /* Utility Classes */
1027 |
1028 | /* Make element full width */
1029 | .u-full-width {
1030 | width: 100%;
1031 | box-sizing: border-box;
1032 | }
1033 |
1034 | /* Make sure elements don't run outside containers (great for images in columns) */
1035 | .u-max-full-width {
1036 | max-width: 100%;
1037 | box-sizing: border-box;
1038 | }
1039 |
1040 | /* Float either direction */
1041 | .u-pull--right {
1042 | float: right;
1043 | }
1044 | .u-pull--left {
1045 | float: left;
1046 | }
1047 |
1048 | /* Clear a float */
1049 | .u-clearfix {
1050 | content: "";
1051 | display: table;
1052 | clear: both;
1053 | }
1054 |
1055 |
1056 |
1057 |
1058 |
1059 |
1060 |
1061 |
1062 |
1063 | Built with BEMSkel
1064 |
1065 |
1066 | Landing Page
1067 | This simple template is an example of how easy it can be to create a landing page using the BEMSkel grid and a few custom styles. The entire demo is ~170 lines of CSS including comments.
1068 |
1069 |
1070 | 
1071 |
1072 |
1073 |
1077 |
1078 |
1079 |
1080 | React Examples Coming Soon
1081 | Examples using BEMSkel with React will be added soon.
1082 |
1083 |
1084 |
1085 |
1086 |
1087 |
1100 |
1101 |
1102 |
1103 |
1104 |
1105 |
1106 |
1107 |
1108 |
1109 |
1110 |
--------------------------------------------------------------------------------