├── .gitignore
├── images
└── favicon-16.png
├── LICENSE-Skeleton.md
├── index.html
├── css
├── skeleton-legacy.css
├── normalize.css
└── barebones.css
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
--------------------------------------------------------------------------------
/images/favicon-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/acahir/Barebones/HEAD/images/favicon-16.png
--------------------------------------------------------------------------------
/LICENSE-Skeleton.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2011-2014 Dave Gamache
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 | Your page title here :)
9 |
10 |
11 |
12 |
14 |
15 |
16 |
18 |
19 |
20 |
22 |
23 |
24 |
25 |
27 |
28 |
29 |
30 |
31 |
32 |
34 |
35 |
36 |
Basic Page
37 |
This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Barebones documentation.
38 |
39 |
40 |
41 |
42 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/css/skeleton-legacy.css:
--------------------------------------------------------------------------------
1 | /* include this file if you want to duplicate all classes available
2 | * the original skeleton boilerplate.
3 | *
4 | * Note: if you are creating a new site, this file is not needed
5 | * and simpler CSS Grid elements should be used without all the
6 | * additional classes on HTML elements. See the Readme for examples.
7 | */
8 |
9 |
10 | /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
11 | /* Directives to replicate all skeleton.css functionality */
12 | /* .row becomes a grid container with 12 columns */
13 | .container, .row {
14 | position: relative;
15 | width: 100%;
16 | max-width: 960px;
17 | margin: 0 auto;
18 | padding: 0 20px;
19 | box-sizing: border-box;
20 | }
21 |
22 | .row {
23 | padding: 0;
24 | display: grid;
25 | grid-template-columns: 1fr;
26 | gap: 4%;
27 | }
28 |
29 | .column,
30 | .columns {
31 | width: 100%;
32 | float: left;
33 | box-sizing: border-box; }
34 |
35 | /* For devices larger than 400px */
36 | @media (min-width: 400px) {
37 | .container {
38 | width: 85%;
39 | padding: 0; }
40 | }
41 |
42 | /* For devices larger than 550px */
43 | @media (min-width: 550px) {
44 | .container {
45 | width: 80%;
46 | }
47 | .row {
48 | width: 100%;
49 | grid-template-columns: repeat(12, 1fr);
50 | gap: 4%;
51 | margin-bottom: 10px;
52 | }
53 |
54 | .one.column, .one.columns { grid-column-end: span 1; }
55 | .two.columns { grid-column-end: span 2; }
56 | .three.columns { grid-column-end: span 3; }
57 | .four.columns { grid-column-end: span 4; }
58 | .five.columns { grid-column-end: span 5; }
59 | .six.columns { grid-column-end: span 6; }
60 | .seven.columns { grid-column-end: span 7; }
61 | .eight.columns { grid-column-end: span 8; }
62 | .nine.columns { grid-column-end: span 9; }
63 | .ten.columns { grid-column-end: span 10; }
64 | .eleven.columns { grid-column-end: span 11; }
65 | .twelve.columns { grid-column-end: span 12; }
66 | .one-third.column { grid-column-end: span 4; }
67 | .two-thirds.column { grid-column-end: span 8; }
68 | .one-half.column { grid-column-end: span 6; }
69 |
70 | /* Offsets */
71 | .offset-by-one.column,
72 | .offset-by-one.columns { grid-column-start: 2; }
73 | .offset-by-two.column,
74 | .offset-by-two.columns { grid-column-start: 3; }
75 | .offset-by-three.column,
76 | .offset-by-three.columns { grid-column-start: 4; }
77 | .offset-by-four.column,
78 | .offset-by-four.columns { grid-column-start: 5; }
79 | .offset-by-five.column,
80 | .offset-by-five.columns { grid-column-start: 6; }
81 | .offset-by-six.column,
82 | .offset-by-six.columns { grid-column-start: 7; }
83 | .offset-by-seven.column,
84 | .offset-by-seven.columns { grid-column-start: 8; }
85 | .offset-by-eight.column,
86 | .offset-by-eight.columns { grid-column-start: 9; }
87 | .offset-by-nine.column,
88 | .offset-by-nine.columns { grid-column-start: 10; }
89 | .offset-by-ten.column,
90 | .offset-by-ten.columns { grid-column-start: 11; }
91 | .offset-by-eleven.column,
92 | .offset-by-eleven.columns { grid-column-start: 12; }
93 |
94 | .offset-by-one-third.column,
95 | .offset-by-one-third.columns { grid-column-start: 5;}
96 | .offset-by-two-thirds.column,
97 | .offset-by-two-thirds.columns { grid-column-start: 9;}
98 |
99 | .offset-by-one-half.column,
100 | .offset-by-one-half.columns { grid-column-start: 7;}
101 | }
102 |
103 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Barebones
2 | Barebones is simple, responsive boilerplate based off the popular [Skeleton](http://getskeleton.com) project by [Dave Gamache](https://twitter.com/dhg).
3 |
4 | While there are several other active forks of Skeleton, Barebones differs by requiring no external tools or dependencies such as CSS pre-processors. Simply download and go.
5 |
6 | ## Getting started
7 |
8 |
9 | Barebones can be downloaded via [zip file](https://github.com/acahir/Barebones/archive/master.zip) or the repo can be cloned using `git clone https://github.com/acahir/Barebones.git`.
10 |
11 | Once you have your bare hands on Barebones, use the [documentation and examples](https://acahir.github.io/Barebones/) to get started.
12 |
13 |
14 | ### What's in the download?
15 |
16 | The download includes Skeleton's CSS, [Normalize CSS](https://github.com/necolas/normalize.css/) as a reset, a sample favicon, and an index.html as a starting point. It also includes skeleton-legacy.css in case you are updating an existing site, though this stylesheet is not linked in the index.html template.
17 |
18 | ```
19 | Skeleton/
20 | ├── index.html
21 | ├── css/
22 | │ ├── barebones.css
23 | │ ├── normalize.css
24 | │ └── skeleton-legacy.css
25 | └── images/
26 | └── favicon.png
27 |
28 | ```
29 |
30 | ## Why Barebones?
31 |
32 | Building off of Skeleton's [awesomeness](https://github.com/dhg/Skeleton#why-its-awesome):
33 | - Updated to use CSS variables
34 | - Uses CSS Grid to replace 12-column grid system
35 | - Updated normalize to current version (3.0.2 -> 8.0.1)
36 | - Maintains backwards compatibility with Skeleton
37 |
38 | Additional features planned and possible:
39 | - Support for @media prefers-color-scheme (aka Dark Mode)
40 | - Pending Release: Uses CSS env() function
41 | - Include "extensions": instructions and templates for frequently used features:
42 | - Navigation boilerplate
43 | - Code formatting
44 | - Smooth Scrolling
45 | - Add additional example site demonstrating CSS Grid layout flexibility
46 |
47 |
48 |
49 |
50 | ## Browser support
51 |
52 | Barebones does make use of modern CSS features, but the base functionality is well supported.
53 |
54 | - CSS Grid: [88% global browser support](https://caniuse.com/#feat=css-grid)
55 | - CSS Variables: [87% global browser support](https://caniuse.com/#feat=css-variables)
56 |
57 | The most notable missing support for both features is from IE 11 or earlier. That's probably the browser that your decision will depend on.
58 |
59 | Barebones includes a few experimental features that are not yet widely supported. If not supported, the brower will simply ignore those directives:
60 | - prefers-color-scheme media query: Only currently available in Safari Technology Preview
61 | - scroll-behavior: Chrome, Firefox
62 | - CSS env(): Nothing included in Barebones, but media queries were structured in such as way to make use of env() variables in the future
63 | Both of these features can be achived using other methods. In fact, both are implemented using css and vanilla javascript on the [Barebones documentation page](https://acahir.github.io/Barebones/) in ~50 lines of code. In the future these may be added to Barebones as "extensions".
64 |
65 | #### External dependencies
66 |
67 | - normalize.css: Chrome, Edge, Firefox ESR+, Internet Explorer 10+, Safari 8+, Opera
68 |
69 |
70 | ## Acknowledgements
71 |
72 | Barebones is build upon the great work of the Skeleton project by [Dave Gamache](https://twitter.com/dhg). It wouldn't be possible without him, and Barebones only exists because Skeleton is no longer being maintained.
73 |
74 | The [documentation page](https://acahir.github.io/Barebones/) makes use of icons by [FontAwesome](https://fontawesome.com), [smoothscroll](https://github.com/iamdustan/smoothscroll) by [Dustan Kasten](https://github.com/iamdustan), [Google Prettify](https://code.google.com/p/google-code-prettify/), and other great tidbits shared by many.
75 |
76 |
77 | ## License
78 |
79 | All parts of Barebones are free to use and abuse under the MIT license.
80 |
81 |
82 |
--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input { /* 1 */
178 | overflow: visible;
179 | }
180 |
181 | /**
182 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 | * 1. Remove the inheritance of text transform in Firefox.
184 | */
185 |
186 | button,
187 | select { /* 1 */
188 | text-transform: none;
189 | }
190 |
191 | /**
192 | * Correct the inability to style clickable types in iOS and Safari.
193 | */
194 |
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 | -webkit-appearance: button;
200 | }
201 |
202 | /**
203 | * Remove the inner border and padding in Firefox.
204 | */
205 |
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 | border-style: none;
211 | padding: 0;
212 | }
213 |
214 | /**
215 | * Restore the focus styles unset by the previous rule.
216 | */
217 |
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 | outline: 1px dotted ButtonText;
223 | }
224 |
225 | /**
226 | * Correct the padding in Firefox.
227 | */
228 |
229 | fieldset {
230 | padding: 0.35em 0.75em 0.625em;
231 | }
232 |
233 | /**
234 | * 1. Correct the text wrapping in Edge and IE.
235 | * 2. Correct the color inheritance from `fieldset` elements in IE.
236 | * 3. Remove the padding so developers are not caught out when they zero out
237 | * `fieldset` elements in all browsers.
238 | */
239 |
240 | legend {
241 | box-sizing: border-box; /* 1 */
242 | color: inherit; /* 2 */
243 | display: table; /* 1 */
244 | max-width: 100%; /* 1 */
245 | padding: 0; /* 3 */
246 | white-space: normal; /* 1 */
247 | }
248 |
249 | /**
250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 | */
252 |
253 | progress {
254 | vertical-align: baseline;
255 | }
256 |
257 | /**
258 | * Remove the default vertical scrollbar in IE 10+.
259 | */
260 |
261 | textarea {
262 | overflow: auto;
263 | }
264 |
265 | /**
266 | * 1. Add the correct box sizing in IE 10.
267 | * 2. Remove the padding in IE 10.
268 | */
269 |
270 | [type="checkbox"],
271 | [type="radio"] {
272 | box-sizing: border-box; /* 1 */
273 | padding: 0; /* 2 */
274 | }
275 |
276 | /**
277 | * Correct the cursor style of increment and decrement buttons in Chrome.
278 | */
279 |
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 | height: auto;
283 | }
284 |
285 | /**
286 | * 1. Correct the odd appearance in Chrome and Safari.
287 | * 2. Correct the outline style in Safari.
288 | */
289 |
290 | [type="search"] {
291 | -webkit-appearance: textfield; /* 1 */
292 | outline-offset: -2px; /* 2 */
293 | }
294 |
295 | /**
296 | * Remove the inner padding in Chrome and Safari on macOS.
297 | */
298 |
299 | [type="search"]::-webkit-search-decoration {
300 | -webkit-appearance: none;
301 | }
302 |
303 | /**
304 | * 1. Correct the inability to style clickable types in iOS and Safari.
305 | * 2. Change font properties to `inherit` in Safari.
306 | */
307 |
308 | ::-webkit-file-upload-button {
309 | -webkit-appearance: button; /* 1 */
310 | font: inherit; /* 2 */
311 | }
312 |
313 | /* Interactive
314 | ========================================================================== */
315 |
316 | /*
317 | * Add the correct display in Edge, IE 10+, and Firefox.
318 | */
319 |
320 | details {
321 | display: block;
322 | }
323 |
324 | /*
325 | * Add the correct display in all browsers.
326 | */
327 |
328 | summary {
329 | display: list-item;
330 | }
331 |
332 | /* Misc
333 | ========================================================================== */
334 |
335 | /**
336 | * Add the correct display in IE 10+.
337 | */
338 |
339 | template {
340 | display: none;
341 | }
342 |
343 | /**
344 | * Add the correct display in IE 10.
345 | */
346 |
347 | [hidden] {
348 | display: none;
349 | }
--------------------------------------------------------------------------------
/css/barebones.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Barebones V3
3 | * Copyright 2019 Steve Cochran
4 | *
5 | * Based of Skeleton by Dave Gamache
6 | *
7 | * Free to use under the MIT license.
8 | */
9 |
10 | /* Table of contents
11 | ––––––––––––––––––––––––––––––––––––––––––––––––––
12 | - Media Breakpoints
13 | - Variables
14 | - Grid
15 | - Base Styles
16 | - Typography
17 | - Links
18 | - Buttons
19 | - Forms
20 | - Lists
21 | - Code
22 | - Tables
23 | - Spacing
24 | - Utilities
25 | - Clearing
26 | - Media Queries
27 | */
28 |
29 | /* ENV Variables
30 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
31 | /* Media breakpoint variables for use in media queries
32 | * Note: this section is currently commented out pending release of
33 | * final CSS env() spec
34 | * Breakpoints based on
35 | * https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
36 | *
37 | */
38 |
39 |
40 |
41 | /* CSS Variables
42 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
43 | html {
44 |
45 | /* default theme: light background, dark text, blue accent */
46 | --theme-hue: 0; /* white */
47 | --accent-hue: 194; /* blue */
48 |
49 | --text-color-richer: hsl(var(--theme-hue), 0%, 5%); /* #0d0d0d */
50 | --text-color-normal: hsl(var(--theme-hue), 0%, 13%); /* #222222 text color; button:hover:focus color */
51 | --text-color-softer: hsl(var(--theme-hue), 0%, 33%); /* #555555 button color; button:hover border */
52 |
53 | --accent-color: hsl(var(--accent-hue), 86%, 57%); /* #33C3F0 link; button-primary bg+border; textarea,select:focus border */
54 | --accent-color-hover: hsl(var(--accent-hue), 76%, 49%); /* #1EAEDB link hover; button-primary:hover:focus bg+border */
55 |
56 | --border-color: hsl(var(--theme-hue), 0%, 73%); /* #bbbbbb button border */
57 | --border-color-softer: hsl(var(--theme-hue), 0%, 82%); /* #d1d1d1 textarea,select,code,td,hr border */
58 |
59 | --background-color: white; /* transparent body background; textarea,select background */
60 | --background-color-softer: hsl(var(--theme-hue), 0%, 95%);
61 | --code-background: hsl(var(--theme-hue), 0%, 95%); /* #f1f1f1 code background*/
62 |
63 | --button-primary-color: white;
64 |
65 |
66 | /* Note: Skeleton was based off a 10px font sizing for REM */
67 | /* 62.5% of typical 16px browser default = 10px */
68 | --base-font-size: 62.5%;
69 |
70 | /* Grid Defaults - default to match orig skeleton settings */
71 | --grid-max-width: 960px;
72 | }
73 |
74 | /* Dark Theme
75 | Note: prefers-color-scheme selector support is still limited, but
76 | included for future and an example of defining a different base 'theme'
77 | */
78 | @media (prefers-color-scheme: dark) {
79 | :html {
80 | /* dark theme: light background, dark text, blue accent */
81 | --theme-hue: 0; /* black */
82 | --accent-hue: 194; /* blue */
83 |
84 | --text-color-richer: hsl(var(--theme-hue), 0%, 95%); /* */
85 | --text-color-normal: hsl(var(--theme-hue), 0%, 80%); /* text color; button:hover:focus color */
86 | --text-color-softer: hsl(var(--theme-hue), 0%, 67%); /* button color; button:hover border */
87 |
88 | --accent-color: hsl(var(--accent-hue), 76%, 49%); /* link; button-primary bg+border; textarea,select:focus border */
89 | --accent-color-hover: hsl(var(--accent-hue), 86%, 57%); /* link hover; button-primary:hover:focus bg+border */
90 |
91 | --border-color: hsl(var(--theme-hue), 0%, 27%); /* button border */
92 | --border-color-softer: hsl(var(--theme-hue), 0%, 20%); /* textarea,select,code,td,hr border */
93 |
94 | --background-color: hsl(var(--theme-hue), 0%, 12%); /* body background; textarea,select background */
95 | --background-color-softer: hsl(var(--theme-hue), 0%, 18%);
96 | --code-background: hsl(var(--theme-hue), 0%, 5%); /* code background*/
97 |
98 | --button-primary-color: white;
99 | }
100 |
101 | img.value-img {
102 | filter: invert(0.8);
103 | }
104 | /* TODO - test dialing back image intensity on dark background
105 | img {
106 | opacity: .80;
107 | transition: opacity .5s ease-in-out;
108 | }
109 | img:hover {
110 | opacity: 1;
111 | }
112 | */
113 | }
114 |
115 |
116 | /* Grid
117 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
118 | /* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
119 | than with skeleton. Only basic 1-4 column grids are included.
120 | Any additional needs should be made using custom CSS directives */
121 |
122 |
123 | .grid-container {
124 | position: relative;
125 | max-width: var(--grid-max-width);
126 | margin: 0 auto;
127 | padding: 20px;
128 | text-align: center;
129 | display: grid;
130 | grid-gap: 20px;
131 | gap: 20px;
132 |
133 | /* by default use min 200px wide columns auto-fit into width */
134 | grid-template-columns: minmax(200px, 1fr);
135 | }
136 |
137 | /* grids to 3 columns above mobile sizes */
138 | @media (min-width: 600px) {
139 | .grid-container {
140 | grid-template-columns: repeat(3, 1fr);
141 | padding: 10px 0;
142 | }
143 |
144 | /* basic grids */
145 | .grid-container.fifths {
146 | grid-template-columns: repeat(5, 1fr);
147 | }
148 | .grid-container.quarters {
149 | grid-template-columns: repeat(4, 1fr);
150 | }
151 | .grid-container.thirds {
152 | grid-template-columns: repeat(3, 1fr);
153 | }
154 | .grid-container.halves {
155 | grid-template-columns: repeat(2, 1fr);
156 | }
157 | .grid-container.full {
158 | grid-template-columns: 1fr;
159 | }
160 |
161 | }
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 | /* Base Styles
170 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
171 | html {
172 | font-size: var(--base-font-size);
173 | scroll-behavior: smooth;
174 | }
175 | body {
176 | font-size: 1.6rem; /* changed from 15px in orig skeleton */
177 | line-height: 1.6;
178 | font-weight: 400;
179 | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
180 | color: var(--text-color-normal);
181 | background-color: var(--background-color);;
182 | }
183 |
184 |
185 | /* Typography
186 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
187 | h1, h2, h3, h4, h5, h6 {
188 | margin-top: 0;
189 | margin-bottom: 2rem;
190 | font-weight: 300; }
191 | h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
192 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
193 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
194 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
195 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
196 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
197 |
198 | /* Larger than phablet */
199 | @media (min-width: 600px) {
200 | h1 { font-size: 5.0rem; }
201 | h2 { font-size: 4.2rem; }
202 | h3 { font-size: 3.6rem; }
203 | h4 { font-size: 3.0rem; }
204 | h5 { font-size: 2.4rem; }
205 | h6 { font-size: 1.5rem; }
206 | }
207 |
208 | p {
209 | margin-top: 0; }
210 |
211 |
212 | /* Links
213 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
214 | a {
215 | color: var(--accent-color); }
216 | a:hover {
217 | color: var(--accent-color-hover); }
218 |
219 |
220 | /* Buttons
221 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
222 | .button,
223 | button,
224 | input[type="submit"],
225 | input[type="reset"],
226 | input[type="button"] {
227 | display: inline-block;
228 | height: 38px;
229 | padding: 0 30px;
230 | color: var(--text-color-softer);
231 | text-align: center;
232 | font-size: 11px;
233 | font-weight: 600;
234 | line-height: 38px;
235 | letter-spacing: .1rem;
236 | text-transform: uppercase;
237 | text-decoration: none;
238 | white-space: nowrap;
239 | background-color: transparent;
240 | border-radius: 4px;
241 | border: 1px solid var(--border-color);
242 | cursor: pointer;
243 | box-sizing: border-box; }
244 | .button:hover,
245 | button:hover,
246 | input[type="submit"]:hover,
247 | input[type="reset"]:hover,
248 | input[type="button"]:hover,
249 | .button:focus,
250 | button:focus,
251 | input[type="submit"]:focus,
252 | input[type="reset"]:focus,
253 | input[type="button"]:focus {
254 | color: var(--text-color-normal);
255 | border-color: var(--text-color-softer);
256 | outline: 0; }
257 | .button.button-primary,
258 | button.button-primary,
259 | input[type="submit"].button-primary,
260 | input[type="reset"].button-primary,
261 | input[type="button"].button-primary {
262 | color: var(--button-primary-color);
263 | background-color: var(--accent-color);
264 | border-color: var(--accent-color); }
265 | .button.button-primary:hover,
266 | button.button-primary:hover,
267 | input[type="submit"].button-primary:hover,
268 | input[type="reset"].button-primary:hover,
269 | input[type="button"].button-primary:hover,
270 | .button.button-primary:focus,
271 | button.button-primary:focus,
272 | input[type="submit"].button-primary:focus,
273 | input[type="reset"].button-primary:focus,
274 | input[type="button"].button-primary:focus {
275 | color: var(--button-primary-color);
276 | background-color: var(--accent-color-hover);
277 | border-color: var(--accent-color-hover); }
278 |
279 |
280 | /* Forms
281 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
282 | input[type="email"],
283 | input[type="number"],
284 | input[type="search"],
285 | input[type="text"],
286 | input[type="tel"],
287 | input[type="url"],
288 | input[type="password"],
289 | textarea,
290 | select {
291 | height: 38px;
292 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
293 | background-color: var(--background-color);
294 | border: 1px solid var(--border-color-softer);
295 | border-radius: 4px;
296 | box-shadow: none;
297 | box-sizing: border-box; }
298 | /* Removes awkward default styles on some inputs for iOS */
299 | input[type="email"],
300 | input[type="number"],
301 | input[type="search"],
302 | input[type="text"],
303 | input[type="tel"],
304 | input[type="url"],
305 | input[type="password"],
306 | input[type="button"],
307 | input[type="submit"],
308 | textarea {
309 | -webkit-appearance: none;
310 | -moz-appearance: none;
311 | appearance: none; }
312 | textarea {
313 | min-height: 65px;
314 | padding-top: 6px;
315 | padding-bottom: 6px; }
316 | input[type="email"]:focus,
317 | input[type="number"]:focus,
318 | input[type="search"]:focus,
319 | input[type="text"]:focus,
320 | input[type="tel"]:focus,
321 | input[type="url"]:focus,
322 | input[type="password"]:focus,
323 | textarea:focus,
324 | select:focus {
325 | border: 1px solid var(--accent-color);
326 | outline: 0; }
327 | label,
328 | legend {
329 | display: block;
330 | margin-bottom: .5rem;
331 | font-weight: 600; }
332 | fieldset {
333 | padding: 0;
334 | border-width: 0; }
335 | input[type="checkbox"],
336 | input[type="radio"] {
337 | display: inline; }
338 | label > .label-body {
339 | display: inline-block;
340 | margin-left: .5rem;
341 | font-weight: normal; }
342 |
343 |
344 | /* Lists
345 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
346 | ul {
347 | list-style: circle inside; }
348 | ol {
349 | list-style: decimal inside; }
350 | ol, ul {
351 | padding-left: 0;
352 | margin-top: 0; }
353 | ul ul, ul ol, ol ol, ol ul {
354 | font-size: 100%;
355 | margin: 1rem 0 1rem 3rem;
356 | color: var(--text-color-softer);
357 | }
358 | li {
359 | margin-bottom: 0.5rem; }
360 |
361 |
362 | /* Code
363 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
364 | code {
365 | padding: .2rem .5rem;
366 | margin: 0 .2rem;
367 | font-size: 90%;
368 | white-space: nowrap;
369 | background: var(--code-background);
370 | border: 1px solid var(--border-color-softer);
371 | border-radius: 4px; }
372 | pre > code {
373 | display: block;
374 | padding: 1rem 1.5rem;
375 | white-space: pre;
376 | overflow: auto; }
377 |
378 |
379 | /* Tables
380 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
381 | th,
382 | td {
383 | padding: 12px 15px;
384 | text-align: left;
385 | border-bottom: 1px solid var(--border-color-softer); }
386 | th:first-child,
387 | td:first-child {
388 | padding-left: 0; }
389 | th:last-child,
390 | td:last-child {
391 | padding-right: 0; }
392 |
393 |
394 | /* Spacing
395 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
396 | button,
397 | .button {
398 | margin-bottom: 1rem; }
399 | input,
400 | textarea,
401 | select,
402 | fieldset {
403 | margin-bottom: 1.5rem; }
404 | pre,
405 | blockquote,
406 | dl,
407 | figure,
408 | table,
409 | p,
410 | ul,
411 | ol,
412 | form {
413 | margin-bottom: 2.5rem; }
414 |
415 |
416 | /* Utilities
417 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
418 | .u-full-width {
419 | width: 100%;
420 | box-sizing: border-box; }
421 | .u-max-full-width {
422 | max-width: 100%;
423 | box-sizing: border-box; }
424 | .u-pull-right {
425 | float: right; }
426 | .u-pull-left {
427 | float: left; }
428 | .u-align-left {
429 | text-align: left; }
430 | .u-align-right {
431 | text-align: right; }
432 |
433 |
434 | /* Misc
435 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
436 | hr {
437 | margin-top: 3rem;
438 | margin-bottom: 3.5rem;
439 | border-width: 0;
440 | border-top: 1px solid var(--border-color-softer); }
441 |
442 |
443 | /* Clearing
444 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
445 |
446 | /* Self Clearing Goodness */
447 | .container:after,
448 | .row:after,
449 | .u-cf {
450 | content: "";
451 | display: table;
452 | clear: both; }
453 |
454 |
455 | /* Media Queries
456 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
457 | /*
458 | Note: The best way to structure the use of media queries is to create the queries
459 | near the relevant code. For example, if you wanted to change the styles for buttons
460 | on small devices, paste the mobile query code up in the buttons section and style it
461 | there.
462 | */
463 |
464 |
465 | /* Larger than mobile (default point when grid becomes active) */
466 | @media (min-width: 600px) {}
467 |
468 | /* Larger than phablet */
469 | @media (min-width: 900px) {}
470 |
471 | /* Larger than tablet */
472 | @media (min-width: 1200px) {}
473 |
474 |
--------------------------------------------------------------------------------