├── .gitignore ├── .htaccess ├── LICENSE ├── api ├── compile.js └── responsive.js ├── changelog.md ├── demos ├── article-content.html ├── article-content │ ├── b-god.jpg │ ├── b-time.jpg │ ├── b-ufo.jpg │ ├── badenoughdudes.jpg │ ├── conclusions.jpg │ ├── dreamdate.jpg │ ├── easterbunny.jpg │ ├── flyingspaghettimonster.jpg │ ├── god.jpg │ ├── insuranceovertime.jpg │ ├── maliciousimpersonators.jpg │ ├── santaclaus.jpg │ ├── toothfairy.jpg │ ├── twoplustwoequalsfive.jpg │ └── unitedtelekinetics.jpg ├── grid.html ├── natural-states-iframe.html ├── natural-states.html └── simple-layout.html ├── index.html ├── index ├── images │ ├── down-dark-inverted.png │ ├── down-dark.png │ ├── down-red.png │ ├── down-white.png │ ├── external.png │ ├── gravity-e.png │ ├── gravity-ne.png │ ├── gravity-s.png │ ├── gravity-se.png │ ├── gravity-sw.png │ ├── gravity.png │ ├── layers.png │ ├── logo.ico │ └── wallpaper.jpg ├── index.css ├── index.js ├── prism.css ├── prism.js └── samples │ ├── grid-fixedfluid-right.html │ ├── grid-fixedfluid.html │ ├── grid-nogutters.html │ ├── grid-push.html │ ├── grid-right.html │ ├── grid-traditional.html │ ├── grid.html │ ├── limits.html │ ├── lists-collapse.html │ ├── responsive-advanced.html │ ├── responsive-break.html │ ├── responsive.html │ ├── rows-buffer.html │ ├── rows-evenbuffer.html │ ├── rows.html │ └── tables-alignments.html ├── package-lock.json ├── package.json ├── php ├── compile │ └── index.php └── responsive │ ├── baseline.php │ ├── index.php │ └── minify.php ├── readme.md ├── release ├── layers.css ├── layers.min.css ├── responsive.css └── responsive.min.css ├── settings.js ├── source ├── layers.scss ├── layers │ ├── forms.scss │ ├── grid.scss │ ├── lists.scss │ ├── normalize.scss │ ├── rhythm.scss │ ├── tables.scss │ ├── text.scss │ └── tools.scss ├── mixins │ ├── responsive-consecutive.scss │ ├── responsive-first.scss │ └── responsive.scss └── responsive │ ├── 2-small.css │ ├── 3-medium.css │ └── 4-large.css └── vercel.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.esproj 3 | *.log 4 | .idea/ 5 | *.orig 6 | doc/ 7 | node_modules/ 8 | .vercel 9 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | 2 | # 3 | # SETTINGS 4 | # 5 | 6 | # Enable compression for HTML, CSS and JavaScript 7 | AddOutputFilterByType DEFLATE text/plain text/html text/css text/javascript application/javascript 8 | 9 | # Allow URL rewrites (uncomment "+FollowSymLinks" line if needed on your server) 10 | # Options +FollowSymLinks 11 | RewriteEngine on 12 | 13 | # Disable directory listings 14 | # Options -Indexes 15 | 16 | # Might be required for CORS (uncomment if needed on your server) 17 | # Header set Access-Control-Allow-Origin * 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | MIT LICENSE 3 | 4 | Copyright (c) 2012 Jerry Jäppinen 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining 7 | a copy of this software and associated documentation files (the 8 | "Software"), to deal in the Software without restriction, including 9 | without limitation the rights to use, copy, modify, merge, publish, 10 | distribute, sublicense, and/or sell copies of the Software, and to 11 | permit persons to whom the Software is furnished to do so, subject to 12 | the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 19 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 21 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 22 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 23 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 24 | -------------------------------------------------------------------------------- /api/compile.js: -------------------------------------------------------------------------------- 1 | import sass from 'node-sass' 2 | // import { readFileSync } from 'fs' 3 | import path from 'path' 4 | 5 | // import { sourcePath } from '../settings' 6 | 7 | export default async (req, res) => { 8 | const { min } = req.query 9 | 10 | // const sourceCodePath = path.join(process.cwd() + './' + sourcePath + 'layers.scss') 11 | const sourceCodePath = path.join(process.cwd(), 'source') 12 | // console.log(sourcePath) 13 | 14 | // const sourceCode = readFileSync(sourceCodePath, 'utf8') 15 | // console.log(sourceCode) 16 | 17 | // https://www.npmjs.com/package/node-sass 18 | const result = sass.renderSync({ 19 | // data: sourceCode, 20 | file: sourceCodePath + '/layers.scss', 21 | outputStyle: min ? 'compressed' : 'expanded' 22 | }) 23 | 24 | res.status(200) 25 | res.setHeader('content-type', 'text/css') 26 | res.send(result.css) 27 | } 28 | -------------------------------------------------------------------------------- /api/responsive.js: -------------------------------------------------------------------------------- 1 | import sass from 'node-sass' 2 | import path from 'path' 3 | 4 | // import { sourcePath } from '../settings' 5 | 6 | // https://layers-css.vercel.app/responsive/?breakpoint0=tiny,20em&breakpoint1=small,40em&breakpoint2=medium,70em&breakpoint3=large,30em&breakpoint4=huge,80em&breakpoint5=extra,90em 7 | export default async (req, res) => { 8 | 9 | const { 10 | min, 11 | breakpoints 12 | } = req.query 13 | 14 | // Read desired breakpoint definitions 15 | const definitions = [] 16 | if (breakpoints) { 17 | breakpoints.split(';').forEach((breakpoint) => { 18 | if (breakpoint) { 19 | const [name, width] = breakpoint.split(',') 20 | if (name && width) { 21 | 22 | // Calculate barelyWidth 23 | const unit = width.indexOf('em') > -1 ? 'em' : 'px' 24 | const val = parseFloat(width.substr(0, width.length - 2)) 25 | const barelyWidth = (val - (unit === 'em' ? 0.0625 : 1)) + unit 26 | 27 | definitions.push({ name, width, barelyWidth }) 28 | } 29 | } 30 | }) 31 | } 32 | 33 | // const sourceCodePath = path.join(process.cwd() + '/' + sourcePath + 'responsive.scss') 34 | // const mixinsPath = path.join(process.cwd() + '/' + sourcePath + 'mixins/') // won't work 35 | const mixinsPath = path.join(process.cwd(), 'source', 'mixins') 36 | const sourceCode = ` 37 | /* 38 | Layers CSS 1.2.0 39 | Docs: https://layers-css.vercel.app 40 | Source: https://github.com/jerryjappinen/layers-css 41 | */ 42 | 43 | $custom-breakpoints: (${definitions.map((({ name, width, barelyWidth }) => { 44 | return `(${name}, ${width}, ${barelyWidth})` 45 | })).join(',')}); 46 | 47 | // Actual CSS code is here 48 | @import '${mixinsPath}/responsive.scss'; 49 | 50 | @include responsive($custom-breakpoints); 51 | ` 52 | 53 | // https://www.npmjs.com/package/node-sass 54 | const result = sass.renderSync({ 55 | data: sourceCode, 56 | // includePaths: [ 57 | // sourceCodePath + 'mixins/' 58 | // ], 59 | outputStyle: min ? 'compressed' : 'expanded' 60 | }) 61 | 62 | res.status(200) 63 | res.setHeader('content-type', 'text/css') 64 | res.send(result.css) 65 | } 66 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | 2 | # Layers CSS changelog 3 | 4 | Latest official changelog is available on the web at [https://github.com/jerryjappinen/layers-css](https://github.com/jerryjappinen/layers-css/blob/master/changelog.md). 5 | 6 | 7 | 8 | ## 1.2.0 - Friday May 29, 2015 9 | 10 | - Using attribute selectors in progressively enhanced `.columns` for big file size reductions. 11 | - Added progressively enhanced `.column.first` support to explicitly mark the first column of a row (for each breakpoint). 12 | - You can now mark elements `.hidden-over-` and `.hidden-under-` breakpoints. 13 | - `input.plain` removes magical focus outlines on webkit 14 | - Typography basics are set for `html`, not `body` 15 | - `border-radius` is reset for `.plain` inputs on iOS Safari as expected 16 | 17 | 18 | 19 | ## 1.1.2 - Monday December 29, 2014 20 | 21 | - Bugfix: `:not()` used only in separate declarations, so non-compliant browsers don't ignore other declarations. Affects some input-related declarations in IE8, for example. 22 | 23 | 24 | 25 | ## 1.1.1 - Monday November 17, 2014 26 | 27 | - Normalizing `i` and `b` in `_normalize.css`. 28 | - Progressively enhanced `.reset` columns can be overwritten to go full-width as expected. 29 | 30 | 31 | 32 | ## 1.1.0 - Sunday October 3, 2014 33 | 34 | ### Miscellaneous fixes 35 | 36 | - `width: 100%; height: 100%;` added to normalizations for `html` and `body`. 37 | - Some `input` definitions are less specific. 38 | - Resetting border-radius in `.plain` inputs and buttons. 39 | - Also added `.fifth`-width columns. 40 | - `.row` and `.row-content` clear floats. However, they're still completely optional. 41 | 42 | ### New responsive adjustments !important; 43 | 44 | The Layers CSS grid now supports columns set to arbitrary break points. The stock responsive adjustments set uses 4 break points. 45 | 46 | Regular columns continue to never break unless explicitly set. 47 | 48 | `.center` columns are no longer supported. To reliably center content, you can 49 | 50 | 1. adjust the `max-width` or a `row-container`, 51 | 2. `.keep-center` a container element while setting a sensible `max-width`, or 52 | 3. `.push-` a `.column` (responsive versions available). 53 | 54 | Furthermore, `.limit-` classes based on the breakpoints are now available. Refer to the documentation for more info. 55 | 56 | 57 | 58 | ## 1.0.6 - Saturday April 5, 2014 59 | 60 | Switched width and max-width on text fields in `forms.css`. They're more intuitive and easier to override this way. 61 | 62 | `.plain` inputs and buttons inherit text color. 63 | 64 | 65 | 66 | ## 1.0.5 - Monday March 3, 2014 67 | 68 | Fixed `.absolute` positioning bug in `tools.css`. Prioritizing Helvetica over Lucida Grande as default font. 69 | 70 | 71 | 72 | ## 1.0.4 - Tuesday December 10, 2013 73 | 74 | Updated default cursor for input elements in `_normalize.css`. 75 | 76 | 77 | 78 | ## 1.0.3 - Saturday November 30, 2013 79 | 80 | Setting `outline-width` to 0 properly in `_normalize.css`. 81 | 82 | 83 | 84 | ## 1.0.2 - Friday October 25, 2013 85 | 86 | Only `.plain` buttons inherit line-height. 87 | 88 | 89 | 90 | ## 1.0.1 - Tuesday October 22, 2013 91 | 92 | List tools now work with definition lists, too. The following markups now work and make sense: 93 | 94 | - `dl.plain` 95 | - `dl.inline` 96 | - `dl.inline.center` 97 | - `dl.inline.right` 98 | - `dl.collapse` 99 | - `dl.collapse.right` 100 | 101 | Definition lists added to reference documentation as well. 102 | 103 | 104 | 105 | ## 1.0 - Friday October 18, 2013 106 | 107 | First formal release. Latest additions include `.clear-after` and positioning tools. 108 | 109 | 110 | 111 | # Known issues 112 | 113 | ## Overeffective `.last` definitions 114 | 115 | Progressively enhanced columns do not cancel all previous, which might cause issues when skipping a breakpoints. Example: 116 | 117 | // Everything works 118 | .column.small-half.medium-fourth 119 | .column.small-half.medium-fourth.small-last 120 | .column.small-half.medium-fourth 121 | .column.small-half.medium-fourth.medium-last 122 | 123 | // `.small-last` will stay effective (remove margin) even on large screens. 124 | .column.small-half.large-fourth 125 | .column.small-half.large-fourth.small-last 126 | .column.small-half.large-fourth 127 | .column.small-half.large-fourth.large-last 128 | 129 | This issue is caused by how progressive enhancements attempt to only cancel other column modifiers when needed. This issue can be worked around usually, and will probably be resolved in some future version of Layers. 130 | -------------------------------------------------------------------------------- /demos/article-content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Article content – Layers CSS demo 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 |

Article content sample

29 | 30 |

This page is loaded with nothing but Layers CSS core and responsive adjustments

31 | 32 | 
<link rel="stylesheet" href="../release/layers.min.css" media="screen">
 33 | <link rel="stylesheet" href="../release/responsive.min.css" media="screen">
34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 | 42 |
43 | 44 |

A Word from Our Sponsor

45 | 46 |

Intergalactic, faster-than-light dial-up connections brought to you by...

47 | 48 |

2+2=5

49 | 50 |

Why settle for reality when you can dream up more?

51 | 52 |
53 | 54 |
55 | 56 |

Breaking News

57 | 58 |

Long-time life insurance industry leader loses customer base, prepares for reorganization

59 | 60 |
61 | 62 |

Insurance Overtime Ltd., one of the oldest industry players and the first to reach life-long, mass-market appeal, made a less-than-surprising announcement concerning reorganization, internal shifts and potential lay-offs.

63 | 64 |

Full business analysis and CEO interview in edition of HZ Magazine.

65 | 66 |
67 | 68 |
69 | 70 |
71 | 72 |

There are companies that provide notable instant gratification and eternal salvation. Simply put, we just can’t compete with that, not with our current offering.

73 | 74 |

We are proceeding to vote on some of our core beliefs and hope to mold the reality to our liking through the democratic process.

75 | 76 |
77 | 78 |
79 | 80 |
81 | 82 |
83 |
84 | 85 | 86 | 87 | 88 |
89 |
90 | 91 |

Section one

92 | 93 |

The Easter Bunny

94 | 95 |

Exclusive interview by Joshua Hidgens

96 | 97 |

While there has been a decent amount of speculation about whether the Easter Bunny truly exists, I actually saw him with my own two fucking eyes and so the matter is settled.

98 | 99 |

The Easter Bunny

100 | 101 |
102 | 103 |
104 | 105 |

I never came to believe in the Easter Bunny, occasionally also known as Easter Hare or Spring Bunny, but in these times it did come as no surprise to actually find her legendary nest hiding under the century-old porcupine tree in my grandparents’ backyard garden.

106 | 107 |

After initial inquiries made by my paper, the Easter Bunny was hesitant to schedule for an interview, reportedly for a multitude of professional and personal reasons. After some persistent editorial work and persuasion, however, here I stand, slightly crouched in what I can only describe as a reception room of the mighty complex of living space, storage areas and grand aisles that constitute the nest of the Easter Bunny.

108 | 109 |
110 | 111 |
112 | 113 |

When asked about the usual disbelief and confusion surrounding his existence, or common misconceptions concerning his personality and traits, the Easter Bunny shows maturity but also slight displeasure.

114 | 115 |

– As an immortal being who has existed as long as reality itself has been here for us, I have grown used to the suspicion and hostility of mere mortals. Still, I sometimes think of the dreams I had as an infant about growing up as a respected guardian of lesser creatures. They really turned out to be as childish as you’d expect from a bunny just a couple of million of years old.

116 | 117 |

Some suppositions are, of course, more innocent than others. Most rarely lead to any serious harm or higher level of enforcement of Easter Bunny’s personal security measures.

118 | 119 |
120 | 121 |
122 | 123 |
124 | 125 |
126 | 127 |

– It is common for people to mistake me as male even though my apparent lack of penis is clearly visible in the vast majority of contemporary visual depictions. Younger humans might think I’m actually composed of chocolate myself, and, of course, there are still those who refuse to accept my existence altogether.

128 | 129 |

The Easter Bunny feels that even the less serious misconceptions about her are contributing to the harmful long-term trend of humans not accepting the world as it is. According to her, humans would not want to experience the world without the Easter Bunny, but their reluctance to recognize her existence, let alone her numerous contributions to our society, might eventually have undesirable implications.

130 | 131 |

– Shit sucks, man.

132 | 133 |
134 | 135 |
136 | 137 |

Shit sucking does not stop this resiliant supernatural hare from trying, though.

138 | 139 |

– With the relatively new hobby of delivering chocolate treats and other cool shit to people, the public opinion has started to show signs of permanent shift to a more positive tone. But this is true to only the western part of the world, and within that the level of acceptance varies greatly.

140 | 141 |

She remains hopeful: one can only imagine the amount of dedication that lies within this wonderful hare. After millenia of trying, one would expect slightly more acknowledgements for this oversized chocolate-bearing rabbit. Maybe one day we will wake up in a place where our superiors are met with acceptance and respect instead of suspicion and disbelief.

142 | 143 |
144 |
145 | 146 |

Malicious impersonators

147 | 148 |

Malicious impersonators The Easter Bunny knows how to deal with people who try to take advantage of her status.

149 | 150 |
151 | 152 |
153 |
154 | 155 | 156 | 157 | 158 |
159 |
160 | 161 |

Section two

162 | 163 |

The Tooth Fairy Part II

164 | 165 |

A shocking Editorial investigation series by Zachary San

166 | 167 |
168 | 169 |

Consumer interest in second-hand organs is increasing. It has been increasing, steadily, for the past century as medical science has developed rapidly.

170 | 171 |

But as we enter the 21st century, things seem to take an exponential turn for the worse. There’s no going back anymore: our culture expects us to give out our organs, and we expect to receive those of others. We are all organ thieves.

172 | 173 |

A Word from Our Sponsor

174 | 175 |

Is your family safe from supervillains?

176 | 177 |

Bad Enough Dudes

178 | 179 |

Bad Enough Dudes Urban protection service

180 | 181 |
182 | 183 |
184 | 185 |
186 | 187 |

The society we live in is sick. I could save this as the shocking ending sentence of this text, but the truth is, that’s just the tip of the iceberg: the things I have to say about this whole collectivity of human interaction and cultural expectations is so corrupt, ugly and depraved, it takes substantial, constant effort for me to avoid vomiting uncontrollably all over the tacky interior of this larger-than-necessary hotel room initially cleaned for me by underage hotel employees, exploited daily in ways we in the West are unabe to even dream up.

188 | 189 |

In Part I of this series, originally published in the January edition of HZ Magazine, I wrote about the expectations and reservations I had about travelling to present-day Cambodia in search for the most notorious human organ bandit group known to western authorities. This highly organized mob – called the Tooth Fairy and commonly referred to simply as “She” – has grown to close to mythical proportions in both reputation and cash revenue.

190 | 191 |

The reservations I was talking about? I willfully threw out the window the whole idea of me even having a right to acknowledge the existence of such. The situation is far too dire to justify me being anxious, apprehensive or anything the like about entering this third-world country plagued by this mystic but obviously powerful criminal organization. We all know crime is rampant in most parts of the world, and no one cares about me or whatever goes on in my unanalytical half of the brain.

192 | 193 |

So, to the actual descriptive part of this text: the legends are true, to put it frankly. All of them, actually. I don’t mean to sound cruel, but the point of this tone I’ve set for the whole text is to deliver the description of how Cambodian Tooth Fairy actually shamelessly exploits countless families when you’ve all heard the stories before. You just have to realize that they’re actually accurate.

194 | 195 |
196 | 197 |
198 | 199 |

So I’m sure we’ve established that things fucking suck here. People have been fucked with so thoroughly for so long that everyone has zero trust left for anyone other than themselves. Not that it stops the government, the Tooth Fairy or other organizations from keeping up the propaganda. Just look at this visualization of the Tooth Fairy:

200 | 201 |
202 | 203 |

The Tooth Fairy delucion

204 | 205 |

The Tooth Fairy delucion This little shit is supposed to come at night and give money in exchange for your teeth. But if you don’t give in, she’ll punch your fucking face in and take them by force. There are no Cambodian adults with their original teeth left intact.

206 | 207 |
208 | 209 |

She might give a penny or two to those who willfully support her in her exploits, but there are millions, even billions to be made in international organ trafficking, both legal and illegal. The legality is actually gray area here, as teeth that appear legal in paper might actually come from highly questionable sources in developing countries.

210 | 211 |

The Tooth Fairy is running the market when it comes to blood tooth trafficking. In the next part, I will hopefully have had the chance to write a coherent text of the disturbing notions made by my first Cambodian anonymous contact on the inside.

212 | 213 |
214 | 215 |
216 | 217 |
218 |
219 | 220 | 221 | 222 | 223 |
224 |
225 | 226 |

Section three

227 | 228 |

The Santa Claus

229 | 230 |

Biography of the fattest, fastest & most exploitive manipulative bastard in the arctic region by Enoch Temür

231 | 232 |
233 | 234 |

There’s this mystery man called Claus, Santa Claus. He naturally has multiple aliases, but that’s how he seems to be referred to in the most recent official documents. We have all heard stories and gathered half a dozen factoids, but few have an understanding of the whole story. We’re here to tell you.

235 | 236 |

First of all, it appears that, since at least recent times, Santa doesn’t act alone: he has an accomplice. Mrs. Claus is said to play an important part in maintaining order within their oppressed slave midget workforce. She apparently handles information structure and databases as well, seeing as the married couple maintains a vast database of all children in the world.

237 | 238 |

Just savior that for a moment: every fucking child. That’s deeply disturbing, not only illegal in more or less every juristiction in the world. Santa’s dirty routine includes delivering these innocent boys and girls huge bags of presents (in quite an intriguing fashion, one might add – although that’s another issue entirely), sometimes even with the concent of their parents, thus gathering positive publicity and turning the popular opinion to his advantage.

239 | 240 |

Santa’s criminal record is long and extensive, but it appears that his most elaborate and dangerous schemes are yet to be seen. He truly is a clever, malicious son of a bitch, always has been and most certainly will always be as long as he remains uncaptured.

241 | 242 |
243 | 244 |
245 | 246 |

Throughout history, Santa has switched both his look and location like no-one else in an elaborate effort to evade and deceive whoever might be after him. Originally from pre-Christian Western Europe, he has since moved to the more arctic and secluded regions of the world. In the recent times he is known to dwell in both the Finnish Lapland and the North Pole during the winter, while spending extravagant summer holidays on warm and sunny beaches of all continents.

247 | 248 |

Although all this has been globally known and well documented for years, a lot of the cunning criminal efforts of this indubitably bright mind remain in the dark: animal rights activists have long been gathering evidence – albeit with little success – of Santa’s illegal reindeer mass-farming activities, and it is still not entirely clear exactly how he amassed his army of 900 000 slave midgets without alarming the authorities.

249 | 250 |

But amass he did. Forced to wear demeaning children’s novelty clothes during their 18-hour shifts, these poor dudes are really pushed to their limits. Even the UN has taken action to offer some relief to the situation, but all actions of all authorities have so far yielded all but zero results. Santa is still at large, living well. He’s even really fat because he eats fancy food all the time, living off the hard labor of his subordinates.

251 | 252 |
253 |
254 | 255 |

Ho Ho Ho

256 | 257 |

Ho Ho Ho The Santa Claus is known for his insatiable desire for prostitutes, up to three at a time. Just look at that egocentric grin and facial hair labeling him as a dirty, disgusting old man. Also, those glasses are fake and are only meant to mislead the authorities.

258 | 259 |
260 |
261 | 262 | 263 | 264 | 265 |
266 |
267 | 268 |

Section four

269 | 270 |

The Flying Spaghetti Monster

271 | 272 |

Our savior is here – We teach you how to sell your stuff to pagans and enjoy your last days on Earth

273 | 274 |
275 | 276 |

The truth is brought to us by Bobby Henderson of Oregon. The undetectable Flying Spaghetti Monster, who actually created this fine universe of ours, managed to make it so that as the amount of pirates on a planet diminishes, the surface temperature reaches levels unsuitable for humans. As we are both ill-prepared for interplanetary mass-migration as well as unaware where the next habitable planet with pirates may lay, our doom is here.

277 | 278 |

There might be a way out, though. The contemporary prophet Henderson has implied that the Flying Spaghetti Monster is more than just a creator. He might have built the Earth ex-nihilo, and drunk, but he just might still be lurking there, waiting to sweep true believers into safety as the last pirate dies.

279 | 280 |

But that’s a theological matter, and still subject to serious debate. In any case, though, shit will hit the fan pretty soon, and HZ Magazine has the ultimate guide for taking advantage of Pastafarian status.

281 | 282 |
283 | 284 |
285 | 286 |

Supply & demand

287 | 288 |

Your fellow pastafarians are fully aware that the end is nigh, so that’s a poor choice for customerbase. As are pirates, although wealthy, for their diminishing numbers. You want to target light-headed atheists and other eternal optimists, as they are often unaware of their own insignificance.

289 | 290 |

Set the price right

291 | 292 |

Yes, the end of the world is coming, but that’s no reason to get unreasonable with the target price. This is no ordinary apocalypse scenario as only a handful of people are actually aware of the inevitable doom lurking around the corner, so you should limit your asking prices to a very reasonable level.

293 | 294 |

Maintain focus

295 | 296 |

You should stop and think for a while before starting to work up a client, trying to get him or her to scoop up your useless shit. Think about what kind of people form the group of your ideal customers and focus on those. And let’s face it, most of your junk most probably isn’t worth most people’s time or money, so work hard on this to get rid of most of your stuff.

297 | 298 |
299 | 300 |
301 | 302 |

Beat the rush

303 | 304 |

Act fast! Other Pastafarians in your area will be dumping their shit just like you. You should be selective of where you are selling and make sure that there aren’t too many others having an end-of-the-world sale of their own, lowering the prices of used furniture and second-grade housewares.

305 | 306 |

Protip

307 | 308 |

Protip Awesome stuff like this would be extremely wanted among Pastafarians if the end of the world wasn’t coming.

309 | 310 |
311 | 312 |
313 |
314 | 315 | 316 | 317 | 318 |
319 |
320 | 321 |
322 | 323 |

Section five

324 | 325 |

God

326 | 327 |

Tough dude claimed to exist in alternate reality: kills babies for revenge, amusement

328 | 329 |
330 | 331 |
332 | 333 |

A shocking real-life tale full of sick twists and mindfuck has started to unfold in the twilight zone of our reality and a reportedly alternate one called Heaven. While the exact details of these mysterious events are still being unwrapped by the investigative authorities, experts are calling the case “puzzling” and “fucking bizarre”.

334 | 335 |

The central focus point of the whole affair appears to be the mind-bending journal written by numerous followers, relatives and self-proclaimed successors of a really hardcore badass dude called God who, according to himself, “created the universe, time and all that can be counted under reality and existence” in just under a week, reportedly laying back doing some heavy drinking on the seventh day. Some of these nutbags also claim allegiance to his son, Jesus, originally conceived and raised under questionable circumstances in this weird family and environment.

336 | 337 |
338 | 339 |
340 | 341 |

As the apparent inability of the social workers to remedy the alarming situation labeled by careless child-raising, drug use, mental disorders, incest and homicidal activities continued to go on unnoticed, the disturbing cult continued to expand, touching the whole extended family and others in the region. While the teachings of the family grew increasingly bizarre and the hallucinations began to reach their focal point, federal authorities stepped in to remedy the situation.

342 | 343 |

It was too late, however. While federal investigators have labeled case documents as classified, other reports indicate that Jesus was nailed to a piece of wood and executed on the account of doing too much weird shit. This did not stop his followers to claim that he was actually raised from the dead by his father, leading to the creation of a horrible, hallucinating carpenter zombie creature. Eww.

344 | 345 |
346 | 347 |
348 | 349 |

And so the folklore starts to be formed. The son was a carpenter but apparently dad disapproved of this, preferring his son to take over the leadership of a weird cult instead. God was rarely seen – understandable, given he exists in a magical alternate universe – but still managed to maintain a strong control over his family and followers over telepathy.

350 | 351 |

Lolwut Son generates fish in Middle-East

352 | 353 |

And overtake he did, the son. He started perform weird, poorly staged and badly executed stunts which he himself labeled as miracles. Anyone could see that he was a shitty illusionist, but with clever camera angles and creative viral marketing, people who never saw him act his stuff out live and only heard occasional reports of him, at best, would eventually get it into their head that Jesus was as badass as his father was claimed to be.

354 | 355 |

Some people, for example, believe that he could chop one fish to small enough pieces to feed thousands of people without a laser cutter. Ha ha ha, oh wow.

356 | 357 |

Ex-wife: “I’m still a virgin, for real”

358 | 359 |

It seems that God was supposed to be father of everyone, but still impregnated Jesus’ mother. While modern medical science explains that there remains a remote possibility of this being achievable (only) in theory, it is widely agreed to be totally unfeasible and blatantly untrue. This might provide some insight into why Jesus was so weird. Also, the mother still claims she is a virgin despite numerous eye witness accounts made public by sensationalist Middle-Eastern talk shows.

360 | 361 |
362 | 363 |
364 | 365 |

Jesus’ mother had a history of mental problems and heavy drug abuse. She has continued her efforts to remedy her reputation and that of her relatives, but it seems she might be labeled as an incestive crack whore for the rest of her natural life. Maybe God will take her in his “arms” after that, or ensure that her natural life is prolonged to unnatural lengths, if he really is such a world-class magician.

366 | 367 |

Whatever the truth about Jesus’ mother, it remains quite irrelevant when looking at the big picture. For example, the scope in which God claims to have carried out infractions of privacy is simply astonishing – while he may not be telling the complete story, experts agree that there is most certainly some truth to this relentless bragging: God says he can read everyone’s mind whenever he wants, no matter how much foil you might have wrapped around your head, and that he routinely (although unpredictably) trolls innocent people by arranging stupid stunts that reflect their thoughts. Asshole.

368 | 369 |

It remains to be seen whether God and his posse can actually get away with these stunts. This is not even all of it, or even close: child-murdering, kidnapping, raising the dead... these are the kind of things we’re dealing with here. One thing is for certain, however: authorities are not resting until they are brought to justice (or killed). FBI’s recent announcement has made this perfectly clear.

370 | 371 |

“I have zero respect for these fuckers, and I will personally guarantee that each of them will get a bullet in their head.” Ok, pretty harsh, maybe, but it’s not like God, Jesus’ or the whole “wholy trinity” didn’t have it coming.

372 | 373 |
374 |
375 | 376 |
377 |
378 | 379 | 380 | 381 | 382 |
383 |
384 | 385 |

Section six

386 | 387 |

Conclusions

388 | 389 |

Jacob Examines the relative ease of bullshitting people

390 | 391 |
392 |

Distractions

393 |
394 | 395 |
396 | 397 |

During your life, especially in professional settings, you will encounter numerous people who will invest considerable time and effort into fucking your shit up if you let them. What this means for you is that you need to fuck their shit up first.

398 | 399 |

And I don’t mean fuck one’s shit up in a literal, physical sense, but rather in social. If you want to be on the top of your game, you need to lie lie lie lie lie.

400 | 401 |

The most important thing to remember is to never say anything that can be disputed, let alone disproved outright. Your propositions should stay on a very broad level of abstraction so that they are easy to accept as generally true – but when you use them in very spesific contexts, it is easy for untrained minds to accept them as explanations.

402 | 403 |

And, well, that’s it basically. Don’t forget the accompanying image and caption. Do what you do best and prevail.

404 | 405 |
406 | 407 |
408 |
409 | 410 | 411 | 412 | 413 | 414 | 415 | -------------------------------------------------------------------------------- /demos/article-content/b-god.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/b-god.jpg -------------------------------------------------------------------------------- /demos/article-content/b-time.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/b-time.jpg -------------------------------------------------------------------------------- /demos/article-content/b-ufo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/b-ufo.jpg -------------------------------------------------------------------------------- /demos/article-content/badenoughdudes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/badenoughdudes.jpg -------------------------------------------------------------------------------- /demos/article-content/conclusions.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/conclusions.jpg -------------------------------------------------------------------------------- /demos/article-content/dreamdate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/dreamdate.jpg -------------------------------------------------------------------------------- /demos/article-content/easterbunny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/easterbunny.jpg -------------------------------------------------------------------------------- /demos/article-content/flyingspaghettimonster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/flyingspaghettimonster.jpg -------------------------------------------------------------------------------- /demos/article-content/god.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/god.jpg -------------------------------------------------------------------------------- /demos/article-content/insuranceovertime.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/insuranceovertime.jpg -------------------------------------------------------------------------------- /demos/article-content/maliciousimpersonators.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/maliciousimpersonators.jpg -------------------------------------------------------------------------------- /demos/article-content/santaclaus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/santaclaus.jpg -------------------------------------------------------------------------------- /demos/article-content/toothfairy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/toothfairy.jpg -------------------------------------------------------------------------------- /demos/article-content/twoplustwoequalsfive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/twoplustwoequalsfive.jpg -------------------------------------------------------------------------------- /demos/article-content/unitedtelekinetics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/demos/article-content/unitedtelekinetics.jpg -------------------------------------------------------------------------------- /demos/natural-states-iframe.html: -------------------------------------------------------------------------------- 1 | 2 |

This sample doc has...

3 | 4 |

This is a normal paragraph (p element). To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

5 | 6 |

This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.

7 | 8 |

This is a normal paragraph (p element). To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

9 | 10 |

This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.

11 | 12 |

This is a normal paragraph (p element). To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

13 | 14 |

This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.

15 | -------------------------------------------------------------------------------- /demos/natural-states.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Natural states – Layers CSS demo 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

This sample doc has only layers.css loaded

21 | 22 |

As you can see, results aren't unexpected. This demonstrates the natural state of common elements.

23 | 24 |

This is 2nd level heading

25 | 26 |

This is a test paragraph.

27 | 28 |

This is 3rd level heading

29 | 30 |

This is a test paragraph.

31 | 32 |

This is 4th level heading

33 | 34 |

This is a test paragraph.

35 | 36 |
This is 5th level heading
37 | 38 |

This is a test paragraph.

39 | 40 |
This is 6th level heading
41 | 42 |

This is a test paragraph.

43 | 44 |

Basic block level elements

45 | 46 |

This is a normal paragraph (p element). To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

47 | 48 |

This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.

49 | 50 |
This is a div element. Authors may use such elements instead of paragraph markup for various reasons. (End of div.)
51 | 52 | 53 | 54 |
55 | 56 |

This is a block quotation containing a single paragraph. Well, not quite, since this is not really quoted text, but I hope you understand the point. After all, this page does not use HTML markup very normally anyway.

57 | 58 |
59 | 60 |

The following contains address information about the author, in an address element.

61 | 62 |
63 | 64 | Jukka Korpela, jkorpela@cs.tut.fi 65 | 66 |
67 | 68 | 69 | 70 |

Lists

71 | 72 |

This is a paragraph before an unnumbered list (ul). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".

73 | 74 | 80 | 81 |

This is a paragraph before a numbered list (ol). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".

82 | 83 |
    84 |
  1. One.
    2. 85 |
  2. Two.
    3. 86 |
  3. Three. Well, probably this list item should be longer. Note that if items are short, lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
    4. 87 |
  4. Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.
    5. 88 |
89 | 90 |

This is a paragraph before a definition list (dl). In principle, such a list should consist of terms and associated definitions. But many authors use dl elements for fancy "layout" things. Usually the effect is not too bad, if you design user style sheet rules for dl which are suitable for real definition lists.

91 | 92 |
93 |
recursion
94 |
see recursion
95 | 96 |
recursion, indirect
97 |
see indirect recursion
98 | 99 |
indirect recursion
100 |
see recursion, indirect
101 | 102 |
term
103 |
a word or other expression taken into specific use in a well-defined meaning, which is often defined rather rigorously, even formally, and may differ quite a lot from an everyday meaning
104 | 105 |
106 | 107 | 108 | 109 |

Text-level markup

110 | 111 | 131 | 132 |

Some of the elements tested above are typically displayed in a monospace font, often using the same presentation for all of them. This tests whether that is the case on your browser:

133 | 134 | 139 | 140 | 141 | 142 |

Inline frame

143 | 144 | 145 | 146 | 147 | 148 |

Links

149 | 150 | 154 | 155 |

This is a text paragraph that contains some inline links. Generally, inline links (as opposite to e.g. links lists) are problematic from the usability perspective, but they may have use as “incidental”, less relevant links.

156 | 157 | 158 | 159 |

Forms

160 | 161 |
162 | 163 | 164 |

This is a form containing various fields (with some initial values (defaults) set, so that you can see how input text looks like without actually typing it):

165 | 166 | 167 | 168 |

Buttons

169 | 170 | 174 | 175 | 176 | 177 |

Text input

178 | 179 |

180 | 181 |


182 | 183 |

184 | 185 | 186 | 187 |

Other input elements

188 | 189 |

The following two radio buttons are inside a fieldset element with a legend:

190 | 191 |
192 | 193 | Legend 194 |

195 |

196 | 197 |
198 | 199 |
200 | 201 | Check those that apply 202 |

203 |

204 | 205 |
206 | 207 |

208 | 217 |

218 | 219 |

220 |
221 | 222 | 227 |

228 | 229 |

230 | 231 |

232 | 233 |
234 | 235 | 236 | 237 |

Tables

238 | 239 |

The following table has a caption. The first row and the first column contain table header cells (th elements) only; other cells are data cells (td elements).

240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 |
Sample table: Areas of the Nordic countries, in sq km
CountryTotal areaLand area
Denmark43,07042,370
Finland337,030305,470
Iceland103,000100,250
Norway324,220307,860
Sweden449,964410,928
277 | 278 | 279 | 280 |
281 | 282 |
283 | 284 |

This document is based on the sample document of Jukka Korpela

285 | 286 |
287 | 288 | 289 | 290 | 291 | 292 | 293 | -------------------------------------------------------------------------------- /demos/simple-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Simple layout – Layers CSS demo 12 | 13 | 14 | 15 | 16 | 17 | 18 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 |
65 | 66 |

Lay it out

67 | 68 |

Create layouts with your look. Fast and fluid.

69 | 70 |
71 |
72 | 73 | 74 | 75 | 76 |
77 |
78 | 79 |
80 | 81 |

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store.

82 | 83 |

And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

84 | 85 |
86 |
87 | 88 |

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out.

89 | 90 |

Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't.

91 | 92 |
93 |
94 | 95 |

Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me.

96 | 97 |

Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.

98 | 99 |
100 | 101 |
102 |
103 | 104 | 105 | 106 | 107 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /index/images/down-dark-inverted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/down-dark-inverted.png -------------------------------------------------------------------------------- /index/images/down-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/down-dark.png -------------------------------------------------------------------------------- /index/images/down-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/down-red.png -------------------------------------------------------------------------------- /index/images/down-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/down-white.png -------------------------------------------------------------------------------- /index/images/external.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/external.png -------------------------------------------------------------------------------- /index/images/gravity-e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/gravity-e.png -------------------------------------------------------------------------------- /index/images/gravity-ne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/gravity-ne.png -------------------------------------------------------------------------------- /index/images/gravity-s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/gravity-s.png -------------------------------------------------------------------------------- /index/images/gravity-se.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/gravity-se.png -------------------------------------------------------------------------------- /index/images/gravity-sw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/gravity-sw.png -------------------------------------------------------------------------------- /index/images/gravity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/gravity.png -------------------------------------------------------------------------------- /index/images/layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/layers.png -------------------------------------------------------------------------------- /index/images/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/logo.ico -------------------------------------------------------------------------------- /index/images/wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerryjappinen/layers-css/841ea95d440d23b8c278e36588f3ca21a086c701/index/images/wallpaper.jpg -------------------------------------------------------------------------------- /index/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Scrolling and menu watching 4 | */ 5 | 6 | // Scrolling behavior 7 | var scrollWindow = function (element, waypoint, duration) { 8 | if (duration < 1) return; 9 | 10 | var target = menuWaypoints[waypoint]+1; 11 | var difference = target - element.scrollTop; 12 | var perTick = difference / duration * 10; 13 | 14 | element.scrollTop = element.scrollTop + perTick; 15 | setTimeout(function() { 16 | scrollWindow(element, waypoint, duration - 5); 17 | }, 5); 18 | 19 | }; 20 | 21 | // Calculate waypoints for toggling the menu items 22 | var findWaypoints = function () { 23 | var results = []; 24 | 25 | // Menu position 26 | results.push(menuPrev.offsetTop + menuPrev.offsetHeight + getCss(menuPrev, 'margin-bottom')); 27 | 28 | // Sections 29 | for (var i = 0; i < menuLinks.length; i++) { 30 | var target = document.getElementById(menuLinks[i].getAttribute('href').substring(1)); 31 | results.push(target.offsetTop - menu.offsetHeight + getCss(target, 'border-top-width')); 32 | } 33 | 34 | return results; 35 | }; 36 | 37 | // Update menu and other elements as the user scrolls 38 | var watchWaypoints = function () { 39 | var i; 40 | var scrollPosition = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; 41 | 42 | // Toggle fixed menu, we're in sections 43 | if (scrollPosition > menuWaypoints[0]) { 44 | addClass(menu, 'fixed'); 45 | var newWaypoint = 0; 46 | 47 | // Going up 48 | if (scrollPosition < menuWaypoints[currentWaypoint]) { 49 | newWaypoint = currentWaypoint - 1; 50 | 51 | // Going down, but not past end 52 | } else if (currentWaypoint < (menuWaypoints.length-1) && scrollPosition > menuWaypoints[currentWaypoint+1]) { 53 | newWaypoint = currentWaypoint + 1; 54 | } 55 | 56 | // We changed sections 57 | if (newWaypoint > 0) { 58 | currentWaypoint = newWaypoint; 59 | 60 | // Choose correct menu item 61 | for (i = 0; i < menuLinks.length; i++) { 62 | if (i === currentWaypoint-1) { 63 | addClass(menuLinks[i], 'selected'); 64 | // menuLinks[i].focus(); 65 | } else { 66 | removeClass(menuLinks[i], 'selected'); 67 | // menuLinks[i].blur(); 68 | } 69 | } 70 | 71 | } 72 | 73 | 74 | // We're up there 75 | } else { 76 | removeClass(menu, 'fixed'); 77 | currentWaypoint = 0; 78 | for (i = 0; i < menuLinks.length; i++) { 79 | menuLinks[i].blur(); 80 | removeClass(menuLinks[i], 'selected'); 81 | } 82 | } 83 | 84 | }; 85 | 86 | // Toggle browser tabs 87 | var selectBrowserTab = function (index) { 88 | removeClass(browser, 'unloaded'); 89 | for (var i = 0; i < browserTabs.length; i++) { 90 | if (i === index) { 91 | loadSample(browserTabs[i].getAttribute('href')); 92 | addClass(browserTabs[i].parentNode, 'selected'); 93 | } else { 94 | removeClass(browserTabs[i].parentNode, 'selected'); 95 | } 96 | } 97 | }; 98 | 99 | // Load document into fake browser 100 | var loadSample = function (url) { 101 | browserSandbox.src = url; 102 | browserLink.href = url; 103 | }; 104 | 105 | 106 | 107 | /** 108 | * Helpers 109 | */ 110 | 111 | // Helper to read numerical CSS values 112 | var getCss = function (target, property) { 113 | return parseInt(window.getComputedStyle(target).getPropertyValue(property), 10); 114 | }; 115 | 116 | // Class toggling 117 | var toggleClass = function (element, className) { 118 | if (hasClass(element, className)) { 119 | removeClass(element, className); 120 | } else { 121 | addClass(element, className); 122 | } 123 | }; 124 | var addClass = function (element, className) { 125 | if (!hasClass(element, className)) { 126 | element.className = element.className + ' ' + className; 127 | } 128 | }; 129 | var removeClass = function (element, className) { 130 | if (hasClass(element, className)) { 131 | element.className = (' ' + element.className.replace(' ' + className, '')).substring(1); 132 | } 133 | }; 134 | var hasClass = function (element, className) { 135 | return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1; 136 | }; 137 | 138 | 139 | 140 | /** 141 | * Document skeleton & configs 142 | */ 143 | 144 | var menu = document.getElementById('menu'); 145 | var menuLinks = menu.getElementsByTagName('a'); 146 | var menuPrev = document.getElementsByClassName('display')[0]; 147 | 148 | var browser = document.getElementsByClassName('browser')[0]; 149 | var browserTabs = browser.getElementsByClassName('tabbar')[0].getElementsByTagName('a'); 150 | var browserSandbox = browser.getElementsByTagName('iframe')[0]; 151 | var browserTrigger = browser.getElementsByClassName('trigger')[0]; 152 | var browserLink = browser.getElementsByClassName('extracontrols')[0].getElementsByClassName('open')[0].getElementsByTagName('a')[0]; 153 | 154 | var sourceContainers = document.getElementsByClassName('source'); 155 | var menuWaypoints = []; 156 | var currentWaypoint = 0; 157 | 158 | 159 | 160 | /** 161 | * App 162 | */ 163 | 164 | var DownloadManager = function () { 165 | var self = this; 166 | 167 | // Default values 168 | self.defaults = { 169 | em: [0, 40, 70], 170 | px: [0, 640, 1024] 171 | }; 172 | 173 | // Constants 174 | self.generatorUrl = 'api/responsive'; 175 | self.breakpointNames = ['tiny', 'small', 'medium', 'large', 'huge', 'extra']; 176 | self.coreSize = 16.8; 177 | self.breakpointSize = 6.9; 178 | self.compressionRatio = 0.25; 179 | 180 | // Active parameters 181 | self.breakpoints = ko.observableArray((function () { 182 | var results = []; 183 | for (var i = 0; i < self.breakpointNames.length; i++) { 184 | results.push(new Breakpoint(self.breakpointNames[i], i, (self.defaults.em[i] ? self.defaults.em[i] : 0), (self.defaults.px[i] ? self.defaults.px[i] : 0))); 185 | } 186 | return results; 187 | })()); 188 | 189 | // Computed active parameters 190 | self.breakpointCount = ko.computed(function () { 191 | var count = 0; 192 | var breakpoints = self.breakpoints(); 193 | for (var i = 0; i < breakpoints.length; i++) { 194 | if (!breakpoints[i].isEmpty()) { 195 | count++; 196 | } 197 | } 198 | return count; 199 | }); 200 | 201 | self.estimatedSize = ko.computed(function () { 202 | return self.coreSize + (self.breakpointCount() * self.breakpointSize); 203 | }); 204 | 205 | self.estimatedSizeCompressed = ko.computed(function () { 206 | return Math.floor(10 * self.compressionRatio * self.estimatedSize()) / 10; 207 | }); 208 | 209 | 210 | 211 | // Behavior 212 | self.url = ko.computed(function () { 213 | if (!self.breakpointCount()) { 214 | return ''; 215 | } else { 216 | 217 | var result = []; 218 | var breakpoints = self.breakpoints(); 219 | for (var i = 0; i < breakpoints.length; i++) { 220 | var b = breakpoints[i]; 221 | if (!b.isEmpty()) { 222 | // result.push('breakpoint' + i + '=' + b.name() + ',' + b[b.unit()]() + b.unit()); 223 | result.push(b.name() + ',' + b[b.unit()]() + b.unit()); 224 | } 225 | } 226 | return self.generatorUrl + '?breakpoints=' + result.join(';') + '&min=true'; 227 | 228 | } 229 | }); 230 | 231 | }; 232 | 233 | var Breakpoint = function (name, i, em, px) { 234 | var self = this; 235 | 236 | // Basic parameters 237 | self.i = ko.observable(i); 238 | self.name = ko.observable(name); 239 | self.unit = ko.observable('em'); 240 | self.em = ko.observable(em > 0 ? em : 0); 241 | self.px = ko.observable(px > 0 ? px : 0); 242 | 243 | // Validations 244 | self.em.subscribe(function (newValue) { 245 | if (newValue !== parseInt(newValue)) { 246 | if (newValue > 0) { 247 | self.em(parseInt(newValue)); 248 | } else { 249 | self.em(0); 250 | } 251 | } 252 | }); 253 | 254 | self.px.subscribe(function (newValue) { 255 | if (newValue !== parseInt(newValue)) { 256 | if (newValue > 0) { 257 | self.px(parseInt(newValue)); 258 | } else { 259 | self.px(0); 260 | } 261 | } 262 | }); 263 | 264 | self.isEmpty = ko.computed(function () { 265 | return self.unit() === 'px' ? (self.px() <= 0) : (self.em() <= 0); 266 | }); 267 | 268 | self.css = ko.computed(function () { 269 | return self.unit() + (self.isEmpty() ? ' empty' : ''); 270 | }); 271 | 272 | self.emTabindex = ko.computed(function () { 273 | return self.unit() === 'em' ? self.i() + 1: ''; 274 | }); 275 | 276 | self.pxTabindex = ko.computed(function () { 277 | return self.unit() === 'px' ? self.i() + 1: ''; 278 | }); 279 | 280 | self.empty = function () { 281 | return (self[self.unit()] <= 0); 282 | }; 283 | 284 | self.toggle = function () { 285 | return self.unit() === 'px' ? self.unit('em') : self.unit('px'); 286 | }; 287 | 288 | }; 289 | 290 | var app = new DownloadManager(); 291 | 292 | 293 | 294 | /** 295 | * Init 296 | */ 297 | window.onload = function () { 298 | var i; 299 | 300 | // Bind menu links to scrolling 301 | for (i = 0; i < menuLinks.length; i++) { 302 | (function () { 303 | var j = i; 304 | var links = menuLinks; 305 | links[j].onclick = function (event) { 306 | event.preventDefault(); 307 | scrollWindow(document.body, j+1, 300); 308 | scrollWindow(document.documentElement, j+1, 300); 309 | }; 310 | })(); 311 | } 312 | 313 | // Bind browser tab links to change sample 314 | for (i = 0; i < browserTabs.length; i++) { 315 | (function () { 316 | var j = i; 317 | var tabs = browserTabs; 318 | tabs[j].onclick = function (event) { 319 | if (event.which != 2 && !event.metaKey) { 320 | event.preventDefault(); 321 | selectBrowserTab(j); 322 | } 323 | }; 324 | })(); 325 | } 326 | browserTrigger.onclick = function (event) { 327 | event.preventDefault(); 328 | selectBrowserTab(0); 329 | }; 330 | 331 | // Source code previews 332 | for (i = 0; i < sourceContainers.length; i++) { 333 | (function () { 334 | var parent = sourceContainers[i]; 335 | parent.getElementsByClassName('trigger')[0].onclick = function (event) { 336 | event.preventDefault(); 337 | toggleClass(parent, 'collapsed'); 338 | 339 | // Recalculate waypoints (hacky) 340 | setTimeout(function () { 341 | menuWaypoints = findWaypoints(); 342 | }, 300); 343 | }; 344 | })(); 345 | } 346 | 347 | 348 | // Ko 349 | ko.applyBindings(app); 350 | 351 | 352 | 353 | // Keep menu waypoints accurate 354 | window.onresize = function (event) { 355 | menuWaypoints = findWaypoints(); 356 | watchWaypoints(); 357 | }; 358 | 359 | // Watch waypoints when scrolling 360 | window.onscroll = watchWaypoints; 361 | 362 | // Recalculate waypoints (hacky) 363 | setTimeout(function () { 364 | menuWaypoints = findWaypoints(); 365 | watchWaypoints(); 366 | }, 100); 367 | }; 368 | 369 | 370 | -------------------------------------------------------------------------------- /index/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js default theme for JavaScript, CSS and HTML 3 | * Based on dabblet (http://dabblet.com) 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: inherit; 10 | direction: ltr; 11 | text-align: left; 12 | white-space: pre; 13 | word-spacing: normal; 14 | 15 | -moz-tab-size: 4; 16 | -o-tab-size: 4; 17 | tab-size: 4; 18 | 19 | -webkit-hyphens: none; 20 | -moz-hyphens: none; 21 | -ms-hyphens: none; 22 | hyphens: none; 23 | } 24 | 25 | /* Inline code */ 26 | .token.comment, 27 | .token.prolog, 28 | .token.doctype, 29 | .token.cdata { 30 | color: slategray; 31 | } 32 | 33 | .token.punctuation { 34 | color: #999; 35 | } 36 | 37 | .namespace { 38 | opacity: .7; 39 | } 40 | 41 | .token.property, 42 | .token.tag, 43 | .token.boolean, 44 | .token.number, 45 | .token.constant, 46 | .token.symbol { 47 | color: #905; 48 | } 49 | 50 | .token.selector, 51 | .token.attr-name, 52 | .token.string, 53 | .token.builtin { 54 | color: #690; 55 | } 56 | 57 | .token.operator, 58 | .token.entity, 59 | .token.url, 60 | .language-css .token.string, 61 | .style .token.string, 62 | .token.variable { 63 | color: #a67f59; 64 | background: hsla(0,0%,100%,.5); 65 | } 66 | 67 | .token.atrule, 68 | .token.attr-value, 69 | .token.keyword { 70 | color: #07a; 71 | } 72 | 73 | 74 | .token.regex, 75 | .token.important { 76 | color: #e90; 77 | } 78 | 79 | .token.important { 80 | font-weight: bold; 81 | } 82 | 83 | .token.entity { 84 | cursor: help; 85 | } -------------------------------------------------------------------------------- /index/prism.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * MIT license http://www.opensource.org/licenses/mit-license.php/ 4 | * @author Lea Verou http://lea.verou.me 5 | */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();; 6 | Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 7 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 8 | (function(){if(!self.Prism||!self.document||!document.querySelector)return;var e={js:"javascript",html:"markup",css:"css"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){var n=t.getAttribute("data-src"),r=(n.match(/\.(\w+)$/)||[,""])[1],i=e[r]||r,s=document.createElement("code");s.className="language-"+i;t.textContent="";s.textContent="Loading…";t.appendChild(s);var o=new XMLHttpRequest;o.open("GET",n,!0);o.onreadystatechange=function(){if(o.readyState==4)if(o.status<400&&o.responseText){s.textContent=o.responseText;Prism.highlightElement(s)}else o.status>=400?s.textContent="✖ Error "+o.status+" while fetching file: "+o.statusText:s.textContent="✖ Error: File does not exist or is empty"};o.send(null)})})();; 9 | -------------------------------------------------------------------------------- /index/samples/grid-fixedfluid-right.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | ... 5 |
6 |
7 | 8 | 9 |
10 | ... 11 |
12 |
-------------------------------------------------------------------------------- /index/samples/grid-fixedfluid.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | ... 5 |
6 |
7 | 8 | 9 |
10 | ... 11 |
12 |
-------------------------------------------------------------------------------- /index/samples/grid-nogutters.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | ... 4 |
5 | 6 |
7 | ... 8 |
9 | 10 |
11 | ... 12 |
13 | 14 |
15 | 16 | 17 | 18 | 19 |
20 | ... 21 |
22 | 23 |
24 | ... 25 |
26 | 27 |
28 | ... 29 |
30 | 31 |
32 | 33 | 34 | 35 | 36 |
37 | ... 38 |
39 | 40 |
-------------------------------------------------------------------------------- /index/samples/grid-push.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | ... 4 |
5 |
6 | ... 7 |
-------------------------------------------------------------------------------- /index/samples/grid-right.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | ... 4 |
5 |
6 | ... 7 |
-------------------------------------------------------------------------------- /index/samples/grid-traditional.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | ... 4 |
5 | 6 |
7 | 8 | 9 | 10 | 11 |
12 | ... 13 |
14 | 15 |
16 | ... 17 |
18 | 19 |
20 | ... 21 |
22 | 23 |
24 | 25 | 26 | 27 | 28 |
29 | ... 30 |
31 | 32 |
33 | ... 34 |
35 | 36 |
37 | ... 38 |
39 | 40 |
41 | ... 42 |
43 | 44 |
45 | ... 46 |
47 | 48 |
-------------------------------------------------------------------------------- /index/samples/grid.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | ... 4 |
5 | 6 |
7 | ... 8 |
9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | ... 17 |
18 | 19 |
20 | ... 21 |
22 | 23 |
24 | ... 25 |
26 | 27 |
28 | 29 | 30 | 31 | 32 |
33 | ... 34 |
35 | 36 |
37 | ... 38 |
39 | 40 |
41 | ... 42 |
43 | 44 |
45 | ... 46 |
47 | 48 |
49 | 50 | 51 | 52 | 53 |
54 | ... 55 |
56 | 57 |
58 | ... 59 |
60 | 61 |
62 | ... 63 |
64 | 65 |
66 | ... 67 |
68 | 69 |
70 | ... 71 |
72 | 73 |
-------------------------------------------------------------------------------- /index/samples/limits.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 |
7 | 8 |
9 | 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /index/samples/lists-collapse.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 |
-------------------------------------------------------------------------------- /index/samples/responsive-advanced.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | ... 5 |
6 | 7 | 8 |
9 | ... 10 |
11 | 12 | 13 |
14 | ... 15 |
16 | 17 |
18 | -------------------------------------------------------------------------------- /index/samples/responsive-break.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | ... 4 |
5 | 6 |
7 | ... 8 |
9 | 10 |
11 | ... 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /index/samples/responsive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | ... 5 |
6 | 7 |
8 | ... 9 |
10 | 11 |
12 | ... 13 |
14 | 15 |
16 | ... 17 |
18 | 19 |
20 | -------------------------------------------------------------------------------- /index/samples/rows-buffer.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |
6 | 7 | 8 | 9 |
10 | 11 |
-------------------------------------------------------------------------------- /index/samples/rows-evenbuffer.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |
6 | 7 | 8 | 9 |
10 | 11 |
-------------------------------------------------------------------------------- /index/samples/rows.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |
6 | 7 | 8 |
9 |

First column

10 |
11 |
12 |

Second column

13 |
14 |
15 | 16 |
17 | 18 |
-------------------------------------------------------------------------------- /index/samples/tables-alignments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
default.center.right
.middle (or .vertical-center).middle.center.middle.right
.bottom.bottom.center.bottom.right
22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "layers-css", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "local": "vercel dev" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git@github.com:jerryjappinen/layers-css.git" 11 | }, 12 | "dependencies": { 13 | }, 14 | "devDependencies": { 15 | "node-sass": "^8.0.0", 16 | "vercel": "^28.10.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /php/compile/index.php: -------------------------------------------------------------------------------- 1 | 61 | 62 | Compiled layers.css 63 | 125 | 126 | 127 | 128 |

Layers.css released

129 | 130 |

The following files were generated:

131 | 132 | '.($save ? '' : '

(These files were not saved, this is only a preview.)

').' 133 | '; 134 | 135 | // Previews files 136 | foreach ($releases as $name) { 137 | foreach (array('', '.min') as $prefix) { 138 | $path = $releasePath.$name.$prefix.'.css'; 139 | echo ' 140 |

'.$name.$prefix.'.css '.(filesize($path)/1000).' kb

141 | 142 | '; 143 | } 144 | } 145 | 146 | echo ' 147 |
148 | 149 | 150 | '; 151 | 152 | die(); 153 | 154 | ?> -------------------------------------------------------------------------------- /php/responsive/index.php: -------------------------------------------------------------------------------- 1 | $value) { 54 | 55 | if (is_numeric($value)) { 56 | $value = ''.$value.'em'; 57 | } 58 | 59 | // Basic input type validation 60 | if (!is_string($key) or !is_string($value)) { 61 | throw new Exception('Invalid name or value given for breakpoint number '.$i, 400); 62 | 63 | } else { 64 | $key = unsuffix(unsuffix(unprefix(unprefix(trim_whitespace($key), '.'), '-'), '.'), '-'); 65 | if (is_string($value)) { 66 | $value = unsuffix(unsuffix(unprefix(unprefix(trim_whitespace($value), '.'), '-'), '.'), '-'); 67 | } 68 | 69 | // Empty after formatting 70 | if (empty($key) or empty($value)) { 71 | throw new Exception('Please provide proper name and value for breakpoint number '.$i, 400); 72 | } else { 73 | $breakpoints[$key] = $value; 74 | } 75 | 76 | } 77 | 78 | $i++; 79 | } 80 | unset($i); 81 | 82 | 83 | 84 | // Output 85 | if (!count($breakpoints)) { 86 | 87 | header('HTTP/1.1 400 Bad Request'); 88 | echo ' 89 | 90 | 91 | Compile your layers.css breakpoints 92 | 126 | 127 | 128 |
129 |

Missing breakpoints

130 |

Head over to Layers CSS\'s docs and set your own custom breakpoints or Try the defaults.

131 |
132 | 133 | 134 | '; 135 | 136 | } else { 137 | 138 | // Author info 139 | $prefix = '/* 140 | '.$title.' 141 | Released by Jerry Jäppinen under the MIT license 142 | http://eiskis.net/layers 143 | '.date('Y-m-d H:i e') .' 144 | */ 145 | '; 146 | 147 | 148 | 149 | // Print report 150 | $output = array(); 151 | $previousName = ''; 152 | foreach ($breakpoints as $name => $value) { 153 | 154 | // Breakpoint offset 155 | $barelyValue = intval(substr($value, 0, -2)); 156 | if (suffixed($value, 'em')) { 157 | $barelyValue = ($barelyValue - 0.0625).'em'; 158 | } else { 159 | $barelyValue = ($barelyValue - 1).'px'; 160 | } 161 | 162 | // String replacement in template 163 | $keys = array('{{name}}', '{{barelyWidth}}', '{{width}}'); 164 | $values = array($name, $barelyValue, $value); 165 | 166 | // Raw template 167 | $temp = ''; 168 | if ($previousName) { 169 | $temp = $templateConsecutive; 170 | $keys[] = '{{previousName}}'; 171 | $values[] = $previousName; 172 | } else { 173 | $temp = $template; 174 | } 175 | 176 | $output[] = str_replace($keys, $values, $temp); 177 | $previousName = $name; 178 | } 179 | 180 | // Output string 181 | header('Content-Type: text/css; charset=utf-8'); 182 | header('HTTP/1.1 200 OK'); 183 | $output = implode("\n\n", $output); 184 | // echo $prefix.$output; 185 | echo $prefix.minify($output); 186 | 187 | } 188 | 189 | 190 | 191 | die(); 192 | 193 | ?> -------------------------------------------------------------------------------- /php/responsive/minify.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Layers CSS 1.2.0 2 | 3 | Minimum-interference collection of common-sense default styles. 4 | 5 | - Reference docs at [layers-css.vercel.app](https://layers-css.vercel.app) 6 | - GitHub project at [https://github.com/jerryjappinen/layers-css](https://github.com/jerryjappinen/layers-css) 7 | - Released under the MIT license 8 | - Authored by [@jerryjappinen](https://github.com/jerryjappinen/) 9 | 10 | 11 | 12 | ## Get started using Layers CSS 13 | 14 | To get it all, use the single-file compilation: 15 | 16 | ```html 17 | 18 | ``` 19 | 20 | You can also pick and choose what you want (in alphabetical order): 21 | 22 | ```html 23 | 24 | 25 | 26 | ... 27 | ``` 28 | 29 | If you use an autoloader (e.g. asset pipeline in Rails), you can just include the whole source directory. 30 | 31 | 32 | 33 | ### Responsive adjustments 34 | 35 | All responsive adjustments are included in separate from the main release: 36 | 37 | ```html 38 | 39 | ``` 40 | 41 | Individual files are also available under `source/`. 42 | 43 | You'll want to build the responsive part with your own break points at [jerryjappinen.com/layers/](http://labs.jerryjappinen.com/layers/) and add more complex degradation behavior, this is just a start. 44 | 45 | 46 | 47 | ## How to contribute 48 | 49 | Email, tweet and fork freely! 50 | 51 | 52 | -------------------------------------------------------------------------------- /release/layers.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | Layers CSS 1.2.0 3 | Released by Jerry Jäppinen under the MIT license 4 | https://layers-css.vercel.app/layers-css 5 | 2015-05-29 6 | */ 7 | html,body{width:100%;height:100%}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,a,small,strong,sub,sup,var,i,b,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{clear:both;outline-width:0;border-width:0;border-style:solid;border-color:transparent;background:transparent;outline-style:solid;vertical-align:baseline}html,body,blockquote,pre,table,form{margin:0;padding:0}figure,button,input,select,textarea{margin:0}img,iframe,button,input,select,textarea{max-width:100%}iframe{width:100%;display:block}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}img{-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}pre{white-space:pre-wrap;word-wrap:break-word}ul{list-style:disc;padding-left:2em}ol{list-style:decimal;padding-left:2em}nav ul,nav ol{list-style:none;list-style-image:none;padding-left:0}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}table{width:100%;border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;vertical-align:top}html{font-size:100%;font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}h1,h2,h3,h4,h5,h6,strong,dt,mark,th{font-weight:bold}a{text-decoration:underline}a:hover{text-decoration:none}input,select,textarea,button{font-family:inherit}input[type=""],input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],select,textarea,pre,code,kbd,samp{font-size:inherit;line-height:inherit}input:not([type]){font-size:inherit;line-height:inherit}button,input,select,textarea,pre,code,kbd,samp{font-weight:inherit}button,select{text-transform:none}em,dfn,q,blockquote{font-style:italic}del{text-decoration:line-through}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}button,input,textarea{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:inline-block}input[type="search"]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button}button,html input[type="button"],input[type="reset"],input[type="submit"]{text-align:center}button,input,select{vertical-align:baseline;*vertical-align:middle}textarea{overflow:auto;vertical-align:top}body{cursor:default}abbr[title],dfn[title]{text-decoration:underline;cursor:help}a,label,button,input[type="submit"],input[type="button"],input[type="reset"],input[type="radio"],input[type="checkbox"],select,option,input[type='image'],input[type='file']{cursor:pointer}.disabled button,.disabled label,.disabled a,button.disabled,label.disabled,a.disabled,.disabled input[type="submit"],.disabled input[type="button"],.disabled input[type="reset"],input[type="submit"].disabled,input[type="button"].disabled,input[type="reset"].disabled{cursor:default}a[disabled],button[disabled],input[disabled]{cursor:default}a:focus{outline-style:dotted}a:active,a:hover{outline:0}input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type=""]{width:20em;max-width:90%}input:not([type]){width:20em;max-width:90%}input[type="text"].squeeze,input[type="password"].squeeze,input[type="email"].squeeze,input[type="url"].squeeze,input[type="search"].squeeze,input[type="tel"].squeeze,input[type=""].squeeze{width:14em}input:not([type]).squeeze{width:14em}textarea{width:32em;max-width:90%;height:10.72em}textarea.squeeze{width:20em;height:4.02em}button.plain,input.plain,textarea.plain{border-width:0;padding:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-style:solid;background-color:transparent;outline-color:transparent;outline-style:solid;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}button.plain:focus,input.plain:focus,textarea.plain:focus{outline-offset:0;outline-width:0}input[type="search"].plain{-webkit-appearance:textfield}input.buffer,input.buffer-top,textarea.buffer,textarea.buffer-top{padding-top:0.35em}input.buffer,input.buffer-right,textarea.buffer,textarea.buffer-right{padding-right:0.6em}input.buffer,input.buffer-bottom,textarea.buffer,textarea.buffer-bottom{padding-bottom:0.4em}input.buffer,input.buffer-left,textarea.buffer,textarea.buffer-left{padding-left:0.6em}.row,.column{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row{width:100%;clear:both;float:none;*zoom:1}.row-content{max-width:70em;margin:0 auto;*zoom:1}.row:after,.row-content:after{content:" ";display:table;clear:both}.row-content.buffer,.row-content.buffer-top{padding-top:2%}.row-content.buffer.even,.row-content.buffer-top.even{padding-top:6%}.row-content.buffer,.row-content.buffer-right{padding-right:8%}.row-content.buffer,.row-content.buffer-bottom{padding-bottom:6%}.row-content.buffer,.row-content.buffer-left{padding-left:8%}.column.one,.column.two,.column.sixth,.column.fifth,.column.three,.column.fourth,.column.four,.column.twofifths,.column.twosixths,.column.third,.column.five,.column.six,.column.half,.column.threefifths,.column.threesixths,.column.twofourths,.column.seven,.column.eight,.column.fourfifths,.column.foursixths,.column.twothirds,.column.nine,.column.threefourths,.column.ten,.column.fivefifths,.column.fivesixths,.column.eleven,.column.twelve,.column.full{clear:none;float:left;min-height:1px;margin-left:0;margin-right:3.8%}.column.right.one,.column.right.two,.column.right.fifth,.column.right.sixth,.column.right.three,.column.right.fourth,.column.right.four,.column.right.twofifths,.column.right.twosixths,.column.right.third,.column.right.five,.column.right.six,.column.right.half,.column.right.threefifths,.column.right.threesixths,.column.right.twofourths,.column.right.seven,.column.right.eight,.column.right.fourfifths,.column.right.foursixths,.column.right.twothirds,.column.right.nine,.column.right.threefourths,.column.right.ten,.column.right.fivefifths,.column.right.fivesixths,.column.right.eleven,.column.right.twelve,.column.right.full{float:right;margin-right:0;margin-left:3.8%}.column.first,.column.full,.column.twelve{clear:both}.column.reset{margin-right:0}.column.right.reset{margin-left:0}.column.full,.column.twelve{width:100%}.column.fifth{width:16.95%}.column.twofifths{width:37.70%}.column.threefifths{width:58.45%}.column.fourfifths{width:79.20%}.column.push-fifth{margin-left:20.45%}.column.right.push-fifth{margin-right:20.45%}.column.push-twofifths{margin-left:41.50%}.column.right.push-twofifths{margin-right:41.50%}.column.push-threefifths{margin-left:62.25%}.column.right.push-threefifths{margin-right:62.25%}.column.push-fourfifths{margin-left:83.00%}.column.right.push-fourfifths{margin-right:83.00%}.column.one{width:4.85%}.column.two,.column.sixth{width:13.45%}.column.three,.column.fourth{width:22.05%}.column.four,.column.twosixths,.column.third{width:30.75%}.column.five{width:39.45%}.column.six,.column.half,.column.threesixths,.column.twofourths{width:48%}.column.seven{width:56.75%}.column.eight,.column.foursixths,.column.twothirds{width:65.4%}.column.nine,.column.threefourths{width:74.05%}.column.ten,.column.fivesixths{width:82.7%}.column.eleven{width:91.35%}.column.push-one{margin-left:8.65%}.column.right.push-one{margin-right:8.65%}.column.push-two,.column.push-sixth{margin-left:17.25%}.column.right.push-two,.column.right.push-sixth{margin-right:17.25%}.column.push-three,.column.push-fourth{margin-left:25.85%}.column.right.push-three,.column.right.push-fourth{margin-right:25.85%}.column.push-four,.column.push-twosixths,.column.push-third{margin-left:34.55%}.column.right.push-four,.column.right.push-twosixths,.column.right.push-third{margin-right:34.55%}.column.push-five{margin-left:43.25%}.column.right.push-five{margin-right:43.25%}.column.push-six,.column.push-half,.column.push-threesixths,.column.push-twofourths{margin-left:51.8%}.column.right.push-six,.column.right.push-half,.column.right.push-threesixths,.column.right.push-twofourths{margin-right:51.8%}.column.push-seven{margin-left:60.55%}.column.right.push-seven{margin-right:60.55%}.column.push-eight,.column.push-foursixths,.column.push-twothirds{margin-left:69.2%}.column.right.push-eight,.column.right.push-foursixths,.column.right.push-twothirds{margin-right:69.2%}.column.push-nine,.column.push-threefourths{margin-left:77.85%}.column.right.push-nine,.column.right.push-threefourths{margin-right:77.85%}.column.push-ten,.column.push-fivesixths{margin-left:86.5%}.column.right.push-ten,.column.right.push-fivesixths{margin-right:86.5%}.column.push-eleven{margin-left:95.15%}.column.right.push-eleven{margin-right:95.15%}.column.one.reset{width:8.3%}.column.two.reset,.column.sixth.reset{width:16.65%}.column.fifth.reset{width:20%}.column.three.reset,.column.fourth.reset{width:25%}.column.four.reset,.column.twosixths.reset,.column.third.reset{width:33.3%}.column.twofifths.reset{width:40%}.column.five.reset{width:41.65%}.column.six.reset,.column.half.reset,.column.threesixths.reset,.column.twofourths.reset{width:50%}.column.seven.reset{width:58.3%}.column.threefifths.reset{width:60%}.column.eight.reset,.column.foursixths.reset,.column.twothirds.reset{width:66.6%}.column.nine.reset,.column.threefourths.reset{width:75%}.column.fourfifths.reset{width:80%}.column.ten.reset,.column.fivesixths.reset{width:83.35%}.column.eleven.reset{width:91.7%}.column.reset.push-one{margin-left:8.3%}.column.reset.right.push-one{margin-right:8.3%}.column.reset.push-two,.column.reset.push-sixth{margin-left:16.65%}.column.reset.right.push-two,.column.reset.right.push-sixth{margin-right:16.65%}.column.reset.push-fifth{margin-left:20%}.column.reset.right.push-fifth{margin-right:20%}.column.reset.push-three,.column.reset.push-fourth{margin-left:25%}.column.reset.right.push-three,.column.reset.right.push-fourth{margin-right:25%}.column.reset.push-four,.column.reset.push-twosixths,.column.reset.push-third{margin-left:33.3%}.column.reset.right.push-four,.column.reset.right.push-twosixths,.column.reset.right.push-third{margin-right:33.3%}.column.reset.push-twofifths{margin-left:40%}.column.reset.right.push-twofifths{margin-right:40%}.column.reset.push-five{margin-left:41.65%}.column.reset.right.push-five{margin-right:41.65%}.column.reset.push-six,.column.reset.push-half,.column.reset.push-threesixths,.column.reset.push-twofourths{margin-left:50%}.column.reset.right.push-six,.column.right.reset.push-half,.column.right.reset.push-threesixths,.column.right.reset.push-twofourths{margin-right:50%}.column.reset.push-seven{margin-left:58.3%}.column.reset.right.push-seven{margin-right:58.3%}.column.reset.push-threefifths{margin-left:60%}.column.reset.right.push-threefifths{margin-right:60%}.column.reset.push-eight,.column.reset.push-foursixths,.column.reset.push-twothirds{margin-left:66.6%}.column.reset.right.push-eight,.column.reset.right.push-foursixths,.column.reset.right.push-twothirds{margin-right:66.6%}.column.reset.push-nine,.column.reset.push-threefourths{margin-left:75%}.column.reset.right.push-nine,.column.reset.right.push-threefourths{margin-right:75%}.column.reset.push-fourfifths{margin-left:80%}.column.reset.right.push-fourfifths{margin-right:80%}.column.reset.push-ten,.column.reset.push-fivesixths{margin-left:83.35%}.column.reset.right.push-ten,.column.reset.right.push-fivesixths{margin-right:83.35%}.column.reset.push-eleven{margin-left:91.7%}.column.reset.right.push-eleven{margin-right:91.7%}.column.last{margin-right:0}.column.right.last{margin-left:0}.column.fluid{clear:none;float:left;width:100%;margin-left:0;margin-right:0}.column.fluid > .column-content{margin-right:10em}.column.fixed{position:static;clear:none;float:right;margin-right:0;margin-left:-100%;width:10em}.column.fluid.right > .column-content{margin-right:0;margin-left:10em}.column.fixed.right{float:left}ul.plain,ul.plain ul,ul.plain ol,ol.plain,ol.plain ul,ol.plain ol,ul.inline,ol.inline,ul.collapse,ol.collapse{padding-left:0;list-style-type:none}ul.plain ul,ul.plain ol,ol.plain ul,ol.plain ol,ul.inline ul,ul.inline ol,ol.inline ul,ol.inline ol,ul.collapse ul,ul.collapse ol,ol.collapse ul,ol.collapse ol{margin-top:0;margin-bottom:0}dl.plain dt{font-weight:inherit}ul.inline.right,ol.inline.right,dl.inline.right{text-align:right}ul.inline.center,ol.inline.center,dl.inline.center{text-align:center}ul.inline > li,ol.inline > li,dl.inline > dt,dl.inline > dd{display:inline}ul.collapse,ol.collapse,dl.collapse{float:left;clear:none}ul.collapse.right,ol.collapse.right,dl.collapse.right{float:right}ul.collapse > li,ol.collapse > li,dl.collapse > dt,dl.collapse > dd{float:left;clear:none}html{line-height:1.34}h1,h2,h3,h4,h5,h6{margin-top:1.34em;margin-bottom:0.67em}p,ul,ol,table,pre,blockquote{margin-top:0.67em;margin-bottom:1.34em}ul ul,ul ol,ol ol,ol ul{margin-top:0;margin-bottom:0.67em}dl{margin-bottom:1.34em}dl.plain{margin-top:0.67em}dl.reset,dl.reset-top{margin-top:0}dt{margin-top:0.67em;margin-bottom:0}dl.plain > dt,dl.inline > dt,dl.collapse > dt{margin-top:0}dd{margin-top:0;margin-bottom:0;margin-left:0}caption{margin-bottom:0.67em}th,td{padding:0.67em}.squeeze th,.squeeze td,th.squeeze,td.squeeze,table table th,table table td{padding:0.335em}table.plain th,table.plain td,tr.plain th,tr.plain td,tbody.plain th,tbody.plain td,thead.plain th,thead.plain td,tfoot.plain th,tfoot.plain td,th.plain,td.plain{padding:0}h1.squeeze,h2.squeeze,h3.squeeze,h4.squeeze,h5.squeeze,h6.squeeze,h1.squeeze-top,h2.squeeze-top,h3.squeeze-top,h4.squeeze-top,h5.squeeze-top,h6.squeeze-top{margin-top:0.67em}p.squeeze,ul.squeeze,ol.squeeze,table.squeeze,pre.squeeze,blockquote.squeeze,p.squeeze-top,ul.squeeze-top,ol.squeeze-top,table.squeeze-top,pre.squeeze-top,blockquote.squeeze-top{margin-top:0.335em}h1.squeeze,h2.squeeze,h3.squeeze,h4.squeeze,h5.squeeze,h6.squeeze,h1.squeeze-bottom,h2.squeeze-bottom,h3.squeeze-bottom,h4.squeeze-bottom,h5.squeeze-bottom,h6.squeeze-bottom{margin-bottom:0.335em}p.squeeze,ul.squeeze,ol.squeeze,table.squeeze,pre.squeeze,blockquote.squeeze,p.squeeze-bottom,ul.squeeze-bottom,ol.squeeze-bottom,table.squeeze-bottom,pre.squeeze-bottom,blockquote.squeeze-bottom{margin-bottom:0.67em}.push,.push-top{margin-top:1.34em}.push,.push-right{margin-right:1.34em}.push,.push-bottom{margin-bottom:1.34em}.push,.push-left{margin-left:1.34em}.reset,.reset-top{margin-top:0}.reset,.reset-right{margin-right:0}.reset,.reset-bottom{margin-bottom:0}.reset,.reset-left{margin-left:0}.buffer,.buffer-top{padding-top:1em}.buffer.even,.buffer-top.even{padding-top:2em}.buffer,.buffer-right{padding-right:2em}.buffer,.buffer-bottom{padding-bottom:2em}.buffer,.buffer-left{padding-left:2em}.no-buffer,.no-buffer-top{padding-top:0}.no-buffer,.no-buffer-right{padding-right:0}.no-buffer,.no-buffer-bottom{padding-bottom:0}.no-buffer,.no-buffer-left{padding-left:0}th.left,td.left{text-align:left}th.right,td.right{text-align:right}th.center,td.center{text-align:center}th.top,td.top{vertical-align:top}th.vertical-center,td.vertical-center,th.middle,td.middle{vertical-align:middle}th.bottom,td.bottom{vertical-align:bottom}html{word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-epub-hyphens:auto;hyphens:auto}input,textarea{word-break:normal}html{font-family:"Segoe UI","Helvetica Neue","Helvetica","Lucida Grande","Ubuntu","Roboto","Arial",sans-serif}blockquote,q{font-family:"Droid Serif","Georgia",serif}pre,code,kbd,samp{font-family:"Menlo","Monaco","Segoe UI Mono","Droid Sans Mono","Consolas",monospace;font-size:0.9em}pre code,pre kbd,pre samp{font-size:1em}h1,h2,h3{text-rendering:optimizeLegibility}.keep-left,.keep-right{clear:none}.keep-left{float:left}.keep-right{float:right}.keep-center{margin-right:auto;margin-left:auto}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}ul.inline,ol.inline,dl.inline{display:block}.hidden{display:none}.clear{clear:both}.clear-after:after{content:" ";display:table;clear:both}.clear-after{*zoom:1}.dry{text-indent:-9999em;direction:ltr}.content-box{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.border-box,button.border-box,input.border-box,textarea.border-box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} -------------------------------------------------------------------------------- /release/responsive.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | Layers CSS 1.2.0 responsive adjustments 3 | Released by Jerry Jäppinen under the MIT license 4 | https://layers-css.vercel.app/layers-css 5 | 2015-05-29 6 | */ 7 | @media handheld,only screen and (max-width:39.9375em){.hidden-under-small{display:none}}@media handheld,only screen and (min-width:40em){.hidden-over-small{display:none}.limit-small{max-width:40em}.column.first[class^="small-"],.column.first[class*=" small-"]{clear:none}.column.last[class^="small-"],.column.last[class*=" small-"]{margin-right:3.8%}.column.right.last[class^="small-"],.column.right.last[class*=" small-"]{margin-left:3.8%}.column[class^="small-"],.column[class*=" small-"]{clear:none;float:left;min-height:1px;margin-left:0;margin-right:3.8%}.column.right[class^="small-"],.column.right[class*=" small-"]{float:right;margin-right:0;margin-left:3.8%}.column.reset[class^="small-"],.column.reset[class*=" small-"]{margin-right:0;margin-left:0}.column.small-full,.column.small-twelve{width:100%}.column.small-fifth{width:16.95%}.column.small-twofifths{width:37.70%}.column.small-threefifths{width:58.45%}.column.small-fourfifths{width:79.20%}.column.small-push-fifth{margin-left:20.45%}.column.small-right.push-fifth{margin-right:20.45%}.column.small-push-twofifths{margin-left:41.50%}.column.small-right.push-twofifths{margin-right:41.50%}.column.small-push-threefifths{margin-left:62.25%}.column.small-right.push-threefifths{margin-right:62.25%}.column.small-push-fourfifths{margin-left:83.00%}.column.small-right.push-fourfifths{margin-right:83.00%}.column.small-one{width:4.85%}.column.small-two,.column.small-sixth{width:13.45%}.column.small-three,.column.small-fourth{width:22.05%}.column.small-four,.column.small-twosixths,.column.small-third{width:30.75%}.column.small-five{width:39.45%}.column.small-six,.column.small-half,.column.small-threesixths,.column.small-twofourths{width:48%}.column.small-seven{width:56.75%}.column.small-eight,.column.small-foursixths,.column.small-twothirds{width:65.4%}.column.small-nine,.column.small-threefourths{width:74.05%}.column.small-ten,.column.small-fivesixths{width:82.7%}.column.small-eleven{width:91.35%}.column.small-push-one{margin-left:8.65%}.column.right.small-push-one{margin-right:8.65%}.column.small-push-two,.column.small-push-sixth{margin-left:17.25%}.column.right.small-push-two,.column.right.small-push-sixth{margin-right:17.25%}.column.small-push-three,.column.small-push-fourth{margin-left:25.85%}.column.right.small-push-three,.column.right.small-push-fourth{margin-right:25.85%}.column.small-push-four,.column.small-push-twosixths,.column.small-push-third{margin-left:34.55%}.column.right.small-push-four,.column.right.small-push-twosixths,.column.right.small-push-third{margin-right:34.55%}.column.small-push-five{margin-left:43.25%}.column.right.small-push-five{margin-right:43.25%}.column.small-push-six,.column.small-push-half,.column.small-push-threesixths,.column.small-push-twofourths{margin-left:51.8%}.column.right.small-push-six,.column.right.small-push-half,.column.right.small-push-threesixths,.column.right.small-push-twofourths{margin-right:51.8%}.column.small-push-seven{margin-left:60.55%}.column.right.small-push-seven{margin-right:60.55%}.column.small-push-eight,.column.small-push-foursixths,.column.small-push-twothirds{margin-left:69.2%}.column.right.small-push-eight,.column.right.small-push-foursixths,.column.right.small-push-twothirds{margin-right:69.2%}.column.small-push-nine,.column.small-push-threefourths{margin-left:77.85%}.column.right.small-push-nine,.column.right.small-push-threefourths{margin-right:77.85%}.column.small-push-ten,.column.small-push-fivesixths{margin-left:86.5%}.column.right.small-push-ten,.column.right.small-push-fivesixths{margin-right:86.5%}.column.small-push-eleven{margin-left:95.15%}.column.right.small-push-eleven{margin-right:95.15%}.column.small-one.reset{width:8.3%}.column.small-two.reset,.column.small-sixth.reset{width:16.65%}.column.small-three.reset,.column.small-fourth.reset{width:25%}.column.small-four.reset,.column.small-twosixths.reset,.column.small-third.reset{width:33.3%}.column.small-five.reset{width:41.65%}.column.small-six.reset,.column.small-half.reset,.column.small-threesixths.reset,.column.small-twofourths.reset{width:50%}.column.small-seven.reset{width:58.3%}.column.small-eight.reset,.column.small-foursixths.reset,.column.small-twothirds.reset{width:66.6%}.column.small-nine.reset,.column.small-threefourths.reset{width:75%}.column.small-ten.reset,.column.small-fivesixths.reset{width:83.35%}.column.small-eleven.reset{width:91.7%}.column.small-full.reset,.column.small-twelve.reset{width:100%}.column.reset.small-push-one{margin-left:8.3%}.column.reset.right.small-push-one{margin-right:8.3%}.column.reset.small-push-two,.column.reset.small-push-sixth{margin-left:16.65%}.column.reset.right.small-push-two,.column.reset.right.small-push-sixth{margin-right:16.65%}.column.reset.small-push-three,.column.reset.small-push-fourth{margin-left:25%}.column.reset.right.small-push-three,.column.reset.right.small-push-fourth{margin-right:25%}.column.reset.small-push-four,.column.reset.small-push-twosixths,.column.reset.small-push-third{margin-left:33.3%}.column.reset.right.small-push-four,.column.reset.right.small-push-twosixths,.column.reset.right.small-push-third{margin-right:33.3%}.column.reset.small-push-five{margin-left:41.65%}.column.reset.right.small-push-five{margin-right:41.65%}.column.reset.small-push-six,.column.reset.small-push-half,.column.reset.small-push-threesixths,.column.reset.small-push-twofourths{margin-left:50%}.column.reset.right.small-push-six,.column.right.reset.small-push-half,.column.right.reset.small-push-threesixths,.column.right.reset.small-push-twofourths{margin-right:50%}.column.reset.small-push-seven{margin-left:58.3%}.column.reset.right.small-push-seven{margin-right:58.3%}.column.reset.small-push-eight,.column.reset.small-push-foursixths,.column.reset.small-push-twothirds{margin-left:66.6%}.column.reset.right.small-push-eight,.column.reset.right.small-push-foursixths,.column.reset.right.small-push-twothirds{margin-right:66.6%}.column.reset.small-push-nine,.column.reset.small-push-threefourths{margin-left:75%}.column.reset.right.small-push-nine,.column.reset.right.small-push-threefourths{margin-right:75%}.column.reset.small-push-ten,.column.reset.small-push-fivesixths{margin-left:83.35%}.column.reset.right.small-push-ten,.column.reset.right.small-push-fivesixths{margin-right:83.35%}.column.reset.small-push-eleven{margin-left:91.7%}.column.reset.right.small-push-eleven{margin-right:91.7%}.column.small-first,.column.first.small-first{clear:both}.column.small-last,.column.last.small-last{margin-right:0}.column.right.small-last,.column.right.last.small-last{margin-left:0}.column.small-break{width:auto !important;float:none !important;clear:both !important;margin-right:0 !important;margin-left:0 !important}}@media handheld,only screen and (max-width:69.9375em){.hidden-under-medium{display:none}}@media handheld,only screen and (min-width:70em){.hidden-over-medium{display:none}.limit-medium{max-width:70em}.column.first[class^="medium-"],.column.first[class*=" medium-"]{clear:none}.column.small-first[class^="medium-"],.column.small-first[class*=" medium-"]{clear:none}.column.last[class^="medium-"],.column.last[class*=" medium-"],.column.small-last[class^="medium-"],.column.small-last[class*=" medium-"]{margin-right:3.8%}.column.right.last[class^="medium-"],.column.right.last[class*=" medium-"],.column.right.small-last[class^="medium-"],.column.right.small-last[class*=" medium-"]{margin-left:3.8%}.column[class^="medium-"],.column[class*=" medium-"]{clear:none;float:left;min-height:1px;margin-left:0;margin-right:3.8%}.column.right[class^="medium-"],.column.right[class*=" medium-"]{float:right;margin-right:0;margin-left:3.8%}.column.reset[class^="medium-"],.column.reset[class*=" medium-"]{margin-right:0;margin-left:0}.column.medium-full,.column.medium-twelve{width:100%}.column.medium-fifth{width:16.95%}.column.medium-twofifths{width:37.70%}.column.medium-threefifths{width:58.45%}.column.medium-fourfifths{width:79.20%}.column.medium-push-fifth{margin-left:20.45%}.column.medium-right.push-fifth{margin-right:20.45%}.column.medium-push-twofifths{margin-left:41.50%}.column.medium-right.push-twofifths{margin-right:41.50%}.column.medium-push-threefifths{margin-left:62.25%}.column.medium-right.push-threefifths{margin-right:62.25%}.column.medium-push-fourfifths{margin-left:83.00%}.column.medium-right.push-fourfifths{margin-right:83.00%}.column.medium-one{width:4.85%}.column.medium-two,.column.medium-sixth{width:13.45%}.column.medium-three,.column.medium-fourth{width:22.05%}.column.medium-four,.column.medium-twosixths,.column.medium-third{width:30.75%}.column.medium-five{width:39.45%}.column.medium-six,.column.medium-half,.column.medium-threesixths,.column.medium-twofourths{width:48%}.column.medium-seven{width:56.75%}.column.medium-eight,.column.medium-foursixths,.column.medium-twothirds{width:65.4%}.column.medium-nine,.column.medium-threefourths{width:74.05%}.column.medium-ten,.column.medium-fivesixths{width:82.7%}.column.medium-eleven{width:91.35%}.column.medium-full.reset,.column.medium-twelve.reset{width:100%}.column.medium-push-one{margin-left:8.65%}.column.right.medium-push-one{margin-right:8.65%}.column.medium-push-two,.column.medium-push-sixth{margin-left:17.25%}.column.right.medium-push-two,.column.right.medium-push-sixth{margin-right:17.25%}.column.medium-push-three,.column.medium-push-fourth{margin-left:25.85%}.column.right.medium-push-three,.column.right.medium-push-fourth{margin-right:25.85%}.column.medium-push-four,.column.medium-push-twosixths,.column.medium-push-third{margin-left:34.55%}.column.right.medium-push-four,.column.right.medium-push-twosixths,.column.right.medium-push-third{margin-right:34.55%}.column.medium-push-five{margin-left:43.25%}.column.right.medium-push-five{margin-right:43.25%}.column.medium-push-six,.column.medium-push-half,.column.medium-push-threesixths,.column.medium-push-twofourths{margin-left:51.8%}.column.right.medium-push-six,.column.right.medium-push-half,.column.right.medium-push-threesixths,.column.right.medium-push-twofourths{margin-right:51.8%}.column.medium-push-seven{margin-left:60.55%}.column.right.medium-push-seven{margin-right:60.55%}.column.medium-push-eight,.column.medium-push-foursixths,.column.medium-push-twothirds{margin-left:69.2%}.column.right.medium-push-eight,.column.right.medium-push-foursixths,.column.right.medium-push-twothirds{margin-right:69.2%}.column.medium-push-nine,.column.medium-push-threefourths{margin-left:77.85%}.column.right.medium-push-nine,.column.right.medium-push-threefourths{margin-right:77.85%}.column.medium-push-ten,.column.medium-push-fivesixths{margin-left:86.5%}.column.right.medium-push-ten,.column.right.medium-push-fivesixths{margin-right:86.5%}.column.medium-push-eleven{margin-left:95.15%}.column.right.medium-push-eleven{margin-right:95.15%}.column.medium-one.reset{width:8.3%}.column.medium-two.reset,.column.medium-sixth.reset{width:16.65%}.column.medium-three.reset,.column.medium-fourth.reset{width:25%}.column.medium-four.reset,.column.medium-twosixths.reset,.column.medium-third.reset{width:33.3%}.column.medium-five.reset{width:41.65%}.column.medium-six.reset,.column.medium-half.reset,.column.medium-threesixths.reset,.column.medium-twofourths.reset{width:50%}.column.medium-seven.reset{width:58.3%}.column.medium-eight.reset,.column.medium-foursixths.reset,.column.medium-twothirds.reset{width:66.6%}.column.medium-nine.reset,.column.medium-threefourths.reset{width:75%}.column.medium-ten.reset,.column.medium-fivesixths.reset{width:83.35%}.column.medium-eleven.reset{width:91.7%}.column.reset.medium-push-one{margin-left:8.3%}.column.reset.right.medium-push-one{margin-right:8.3%}.column.reset.medium-push-two,.column.reset.medium-push-sixth{margin-left:16.65%}.column.reset.right.medium-push-two,.column.reset.right.medium-push-sixth{margin-right:16.65%}.column.reset.medium-push-three,.column.reset.medium-push-fourth{margin-left:25%}.column.reset.right.medium-push-three,.column.reset.right.medium-push-fourth{margin-right:25%}.column.reset.medium-push-four,.column.reset.medium-push-twosixths,.column.reset.medium-push-third{margin-left:33.3%}.column.reset.right.medium-push-four,.column.reset.right.medium-push-twosixths,.column.reset.right.medium-push-third{margin-right:33.3%}.column.reset.medium-push-five{margin-left:41.65%}.column.reset.right.medium-push-five{margin-right:41.65%}.column.reset.medium-push-six,.column.reset.medium-push-half,.column.reset.medium-push-threesixths,.column.reset.medium-push-twofourths{margin-left:50%}.column.reset.right.medium-push-six,.column.right.reset.medium-push-half,.column.right.reset.medium-push-threesixths,.column.right.reset.medium-push-twofourths{margin-right:50%}.column.reset.medium-push-seven{margin-left:58.3%}.column.reset.right.medium-push-seven{margin-right:58.3%}.column.reset.medium-push-eight,.column.reset.medium-push-foursixths,.column.reset.medium-push-twothirds{margin-left:66.6%}.column.reset.right.medium-push-eight,.column.reset.right.medium-push-foursixths,.column.reset.right.medium-push-twothirds{margin-right:66.6%}.column.reset.medium-push-nine,.column.reset.medium-push-threefourths{margin-left:75%}.column.reset.right.medium-push-nine,.column.reset.right.medium-push-threefourths{margin-right:75%}.column.reset.medium-push-ten,.column.reset.medium-push-fivesixths{margin-left:83.35%}.column.reset.right.medium-push-ten,.column.reset.right.medium-push-fivesixths{margin-right:83.35%}.column.reset.medium-push-eleven{margin-left:91.7%}.column.reset.right.medium-push-eleven{margin-right:91.7%}.column.medium-first[class^="medium-"],.column.medium-first[class*=" medium-"]{clear:both}.column.medium-last,.column.medium-last[class^="medium-"],.column.medium-last[class*=" medium-"]{margin-right:0}.column.right.medium-last,.column.right.medium-last[class^="medium-"],.column.right.medium-last[class*=" medium-"]{margin-right:0}.column.medium-break{width:auto !important;float:none !important;clear:both !important;margin-right:0 !important;margin-left:0 !important}}@media handheld,only screen and (max-width:99.9375em){.hidden-under-large{display:none}}@media handheld,only screen and (min-width:100em){.hidden-over-large{display:none}.limit-large{max-width:100em}.column.first[class^="large-"],.column.first[class*=" large-"]{clear:none}.column.medium-first[class^="large-"],.column.medium-first[class*=" large-"]{clear:none}.column.last[class^="large-"],.column.last[class*=" large-"],.column.medium-last[class^="large-"],.column.medium-last[class*=" large-"]{margin-right:3.8%}.column.right.last[class^="large-"],.column.right.last[class*=" large-"],.column.right.medium-last[class^="large-"],.column.right.medium-last[class*=" large-"]{margin-left:3.8%}.column[class^="large-"],.column[class*=" large-"]{clear:none;float:left;min-height:1px;margin-left:0;margin-right:3.8%}.column.right[class^="large-"],.column.right[class*=" large-"]{float:right;margin-right:0;margin-left:3.8%}.column.reset[class^="large-"],.column.reset[class*=" large-"]{margin-right:0;margin-left:0}.column.large-full,.column.large-twelve{width:100%}.column.large-fifth{width:16.95%}.column.large-twofifths{width:37.70%}.column.large-threefifths{width:58.45%}.column.large-fourfifths{width:79.20%}.column.large-push-fifth{margin-left:20.45%}.column.large-right.push-fifth{margin-right:20.45%}.column.large-push-twofifths{margin-left:41.50%}.column.large-right.push-twofifths{margin-right:41.50%}.column.large-push-threefifths{margin-left:62.25%}.column.large-right.push-threefifths{margin-right:62.25%}.column.large-push-fourfifths{margin-left:83.00%}.column.large-right.push-fourfifths{margin-right:83.00%}.column.large-one{width:4.85%}.column.large-two,.column.large-sixth{width:13.45%}.column.large-three,.column.large-fourth{width:22.05%}.column.large-four,.column.large-twosixths,.column.large-third{width:30.75%}.column.large-five{width:39.45%}.column.large-six,.column.large-half,.column.large-threesixths,.column.large-twofourths{width:48%}.column.large-seven{width:56.75%}.column.large-eight,.column.large-foursixths,.column.large-twothirds{width:65.4%}.column.large-nine,.column.large-threefourths{width:74.05%}.column.large-ten,.column.large-fivesixths{width:82.7%}.column.large-eleven{width:91.35%}.column.large-full.reset,.column.large-twelve.reset{width:100%}.column.large-push-one{margin-left:8.65%}.column.right.large-push-one{margin-right:8.65%}.column.large-push-two,.column.large-push-sixth{margin-left:17.25%}.column.right.large-push-two,.column.right.large-push-sixth{margin-right:17.25%}.column.large-push-three,.column.large-push-fourth{margin-left:25.85%}.column.right.large-push-three,.column.right.large-push-fourth{margin-right:25.85%}.column.large-push-four,.column.large-push-twosixths,.column.large-push-third{margin-left:34.55%}.column.right.large-push-four,.column.right.large-push-twosixths,.column.right.large-push-third{margin-right:34.55%}.column.large-push-five{margin-left:43.25%}.column.right.large-push-five{margin-right:43.25%}.column.large-push-six,.column.large-push-half,.column.large-push-threesixths,.column.large-push-twofourths{margin-left:51.8%}.column.right.large-push-six,.column.right.large-push-half,.column.right.large-push-threesixths,.column.right.large-push-twofourths{margin-right:51.8%}.column.large-push-seven{margin-left:60.55%}.column.right.large-push-seven{margin-right:60.55%}.column.large-push-eight,.column.large-push-foursixths,.column.large-push-twothirds{margin-left:69.2%}.column.right.large-push-eight,.column.right.large-push-foursixths,.column.right.large-push-twothirds{margin-right:69.2%}.column.large-push-nine,.column.large-push-threefourths{margin-left:77.85%}.column.right.large-push-nine,.column.right.large-push-threefourths{margin-right:77.85%}.column.large-push-ten,.column.large-push-fivesixths{margin-left:86.5%}.column.right.large-push-ten,.column.right.large-push-fivesixths{margin-right:86.5%}.column.large-push-eleven{margin-left:95.15%}.column.right.large-push-eleven{margin-right:95.15%}.column.large-one.reset{width:8.3%}.column.large-two.reset,.column.large-sixth.reset{width:16.65%}.column.large-three.reset,.column.large-fourth.reset{width:25%}.column.large-four.reset,.column.large-twosixths.reset,.column.large-third.reset{width:33.3%}.column.large-five.reset{width:41.65%}.column.large-six.reset,.column.large-half.reset,.column.large-threesixths.reset,.column.large-twofourths.reset{width:50%}.column.large-seven.reset{width:58.3%}.column.large-eight.reset,.column.large-foursixths.reset,.column.large-twothirds.reset{width:66.6%}.column.large-nine.reset,.column.large-threefourths.reset{width:75%}.column.large-ten.reset,.column.large-fivesixths.reset{width:83.35%}.column.large-eleven.reset{width:91.7%}.column.reset.large-push-one{margin-left:8.3%}.column.reset.right.large-push-one{margin-right:8.3%}.column.reset.large-push-two,.column.reset.large-push-sixth{margin-left:16.65%}.column.reset.right.large-push-two,.column.reset.right.large-push-sixth{margin-right:16.65%}.column.reset.large-push-three,.column.reset.large-push-fourth{margin-left:25%}.column.reset.right.large-push-three,.column.reset.right.large-push-fourth{margin-right:25%}.column.reset.large-push-four,.column.reset.large-push-twosixths,.column.reset.large-push-third{margin-left:33.3%}.column.reset.right.large-push-four,.column.reset.right.large-push-twosixths,.column.reset.right.large-push-third{margin-right:33.3%}.column.reset.large-push-five{margin-left:41.65%}.column.reset.right.large-push-five{margin-right:41.65%}.column.reset.large-push-six,.column.reset.large-push-half,.column.reset.large-push-threesixths,.column.reset.large-push-twofourths{margin-left:50%}.column.reset.right.large-push-six,.column.right.reset.large-push-half,.column.right.reset.large-push-threesixths,.column.right.reset.large-push-twofourths{margin-right:50%}.column.reset.large-push-seven{margin-left:58.3%}.column.reset.right.large-push-seven{margin-right:58.3%}.column.reset.large-push-eight,.column.reset.large-push-foursixths,.column.reset.large-push-twothirds{margin-left:66.6%}.column.reset.right.large-push-eight,.column.reset.right.large-push-foursixths,.column.reset.right.large-push-twothirds{margin-right:66.6%}.column.reset.large-push-nine,.column.reset.large-push-threefourths{margin-left:75%}.column.reset.right.large-push-nine,.column.reset.right.large-push-threefourths{margin-right:75%}.column.reset.large-push-ten,.column.reset.large-push-fivesixths{margin-left:83.35%}.column.reset.right.large-push-ten,.column.reset.right.large-push-fivesixths{margin-right:83.35%}.column.reset.large-push-eleven{margin-left:91.7%}.column.reset.right.large-push-eleven{margin-right:91.7%}.column.large-first[class^="large-"],.column.large-first[class*=" large-"]{clear:both}.column.large-last,.column.large-last[class^="large-"],.column.large-last[class*=" large-"]{margin-right:0}.column.right.large-last,.column.right.large-last[class^="large-"],.column.right.large-last[class*=" large-"]{margin-right:0}.column.large-break{width:auto !important;float:none !important;clear:both !important;margin-right:0 !important;margin-left:0 !important}} -------------------------------------------------------------------------------- /settings.js: -------------------------------------------------------------------------------- 1 | export const version = '1.2.0' 2 | 3 | export const distPath = 'release/' 4 | export const sourcePath = 'source/' 5 | -------------------------------------------------------------------------------- /source/layers.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Layers CSS 1.2.0 3 | Docs: https://layers-css.vercel.app 4 | Source: https://github.com/jerryjappinen/layers-css 5 | */ 6 | 7 | @import './layers/normalize.scss'; 8 | @import './layers/forms.scss'; 9 | @import './layers/grid.scss'; 10 | @import './layers/lists.scss'; 11 | @import './layers/rhythm.scss'; 12 | @import './layers/tables.scss'; 13 | @import './layers/text.scss'; 14 | @import './layers/tools.scss'; 15 | -------------------------------------------------------------------------------- /source/layers/forms.scss: -------------------------------------------------------------------------------- 1 | /*Form elements*/ 2 | 3 | /*Dimensions*/ 4 | input[type="text"], 5 | input[type="password"], 6 | input[type="email"], 7 | input[type="url"], 8 | input[type="search"], 9 | input[type="tel"], 10 | input[type=""] { 11 | width: 20em; 12 | max-width: 90%; 13 | } 14 | input:not([type]) { 15 | width: 20em; 16 | max-width: 90%; 17 | } 18 | input[type="text"].squeeze, 19 | input[type="password"].squeeze, 20 | input[type="email"].squeeze, 21 | input[type="url"].squeeze, 22 | input[type="search"].squeeze, 23 | input[type="tel"].squeeze, 24 | input[type=""].squeeze { 25 | width: 14em; 26 | } 27 | input:not([type]).squeeze { 28 | width: 14em; 29 | } 30 | textarea { 31 | width: 32em; 32 | max-width: 90%; 33 | height: 10.72em; 34 | } 35 | textarea.squeeze { 36 | width: 20em; 37 | height: 4.02em; 38 | } 39 | 40 | 41 | 42 | /*Resets*/ 43 | button.plain, 44 | input.plain, 45 | textarea.plain { 46 | border-width: 0; 47 | padding: 0; 48 | 49 | -webkit-border-radius: 0; 50 | -moz-border-radius: 0; 51 | border-radius: 0; 52 | 53 | border-style: solid; 54 | background-color: transparent; 55 | outline-color: transparent; 56 | outline-style: solid; 57 | 58 | color: inherit; 59 | font-size: inherit; 60 | font-family: inherit; 61 | line-height: inherit; 62 | } 63 | button.plain:focus, 64 | input.plain:focus, 65 | textarea.plain:focus { 66 | outline-offset: 0; 67 | outline-width: 0; 68 | } 69 | input[type="search"].plain { 70 | -webkit-appearance: textfield; 71 | } 72 | 73 | /*Explicit padding for input elements*/ 74 | input.buffer, 75 | input.buffer-top, 76 | textarea.buffer, 77 | textarea.buffer-top { 78 | padding-top: 0.35em; 79 | } 80 | input.buffer, 81 | input.buffer-right, 82 | textarea.buffer, 83 | textarea.buffer-right { 84 | padding-right: 0.6em; 85 | } 86 | input.buffer, 87 | input.buffer-bottom, 88 | textarea.buffer, 89 | textarea.buffer-bottom { 90 | padding-bottom: 0.4em; 91 | } 92 | input.buffer, 93 | input.buffer-left, 94 | textarea.buffer, 95 | textarea.buffer-left { 96 | padding-left: 0.6em; 97 | } 98 | -------------------------------------------------------------------------------- /source/layers/grid.scss: -------------------------------------------------------------------------------- 1 | /*Change box model for grid elements*/ 2 | .row, .column { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | 9 | 10 | /*Rows with buffer space*/ 11 | .row { 12 | width: 100%; 13 | clear: both; 14 | float: none; 15 | *zoom: 1; 16 | } 17 | .row-content { 18 | max-width: 70em; 19 | margin: 0 auto; 20 | *zoom: 1; 21 | } 22 | .row:after, .row-content:after { 23 | content: " "; 24 | display: table; 25 | clear: both; 26 | } 27 | .row-content.buffer, 28 | .row-content.buffer-top { 29 | padding-top: 2%; 30 | } 31 | .row-content.buffer.even, 32 | .row-content.buffer-top.even { 33 | padding-top: 6%; 34 | } 35 | .row-content.buffer, 36 | .row-content.buffer-right { 37 | padding-right: 8%; 38 | } 39 | .row-content.buffer, 40 | .row-content.buffer-bottom { 41 | padding-bottom: 6%; 42 | } 43 | .row-content.buffer, 44 | .row-content.buffer-left { 45 | padding-left: 8%; 46 | } 47 | 48 | /*Column basics (12-based fluid grid)*/ 49 | .column.one, 50 | .column.two, 51 | .column.sixth, 52 | .column.fifth, 53 | .column.three, 54 | .column.fourth, 55 | .column.four, 56 | .column.twofifths, 57 | .column.twosixths, 58 | .column.third, 59 | .column.five, 60 | .column.six, 61 | .column.half, 62 | .column.threefifths, 63 | .column.threesixths, 64 | .column.twofourths, 65 | .column.seven, 66 | .column.eight, 67 | .column.fourfifths, 68 | .column.foursixths, 69 | .column.twothirds, 70 | .column.nine, 71 | .column.threefourths, 72 | .column.ten, 73 | .column.fivefifths, 74 | .column.fivesixths, 75 | .column.eleven, 76 | .column.twelve, 77 | .column.full { 78 | clear: none; 79 | float: left; 80 | min-height: 1px; 81 | margin-left: 0; 82 | margin-right: 3.8%; 83 | } 84 | .column.right.one, 85 | .column.right.two, 86 | .column.right.fifth, 87 | .column.right.sixth, 88 | .column.right.three, 89 | .column.right.fourth, 90 | .column.right.four, 91 | .column.right.twofifths, 92 | .column.right.twosixths, 93 | .column.right.third, 94 | .column.right.five, 95 | .column.right.six, 96 | .column.right.half, 97 | .column.right.threefifths, 98 | .column.right.threesixths, 99 | .column.right.twofourths, 100 | .column.right.seven, 101 | .column.right.eight, 102 | .column.right.fourfifths, 103 | .column.right.foursixths, 104 | .column.right.twothirds, 105 | .column.right.nine, 106 | .column.right.threefourths, 107 | .column.right.ten, 108 | .column.right.fivefifths, 109 | .column.right.fivesixths, 110 | .column.right.eleven, 111 | .column.right.twelve, 112 | .column.right.full { 113 | float: right; 114 | margin-right: 0; 115 | margin-left: 3.8%; 116 | } 117 | 118 | .column.first, 119 | .column.full, 120 | .column.twelve { 121 | clear: both; 122 | } 123 | 124 | .column.reset { 125 | margin-right: 0; 126 | } 127 | .column.right.reset { 128 | margin-left: 0; 129 | } 130 | 131 | 132 | 133 | /** 134 | * Column widths 135 | */ 136 | 137 | /*Full-width column*/ 138 | .column.full, 139 | .column.twelve { 140 | width: 100%; 141 | } 142 | 143 | /*Fifth*/ 144 | .column.fifth { 145 | width: 16.95%; /* 16.96 */ 146 | } 147 | .column.twofifths { 148 | width: 37.70%; /* 33.92 + 3.8 */ 149 | } 150 | .column.threefifths { 151 | width: 58.45%; /* 50.88 + 3.8 + 3.8 */ 152 | } 153 | .column.fourfifths { 154 | width: 79.20%; /* 67.84 + 3.8 + 3.8 + 3.8 */ 155 | } 156 | .column.push-fifth { 157 | margin-left: 20.45%; 158 | } 159 | .column.right.push-fifth { 160 | margin-right: 20.45%; 161 | } 162 | .column.push-twofifths { 163 | margin-left: 41.50%; 164 | } 165 | .column.right.push-twofifths { 166 | margin-right: 41.50%; 167 | } 168 | .column.push-threefifths { 169 | margin-left: 62.25%; 170 | } 171 | .column.right.push-threefifths { 172 | margin-right: 62.25%; 173 | } 174 | .column.push-fourfifths { 175 | margin-left: 83.00%; 176 | } 177 | .column.right.push-fourfifths { 178 | margin-right: 83.00%; 179 | } 180 | 181 | /*Fluid column widths*/ 182 | .column.one { 183 | width: 4.85%; 184 | } 185 | .column.two, 186 | .column.sixth { 187 | width: 13.45%; 188 | } 189 | .column.three, 190 | .column.fourth { 191 | width: 22.05%; 192 | } 193 | .column.four, 194 | .column.twosixths, 195 | .column.third { 196 | width: 30.75%; 197 | } 198 | .column.five { 199 | width: 39.45%; 200 | } 201 | .column.six, 202 | .column.half, 203 | .column.threesixths, 204 | .column.twofourths { 205 | width: 48%; 206 | } 207 | .column.seven { 208 | width: 56.75%; 209 | } 210 | .column.eight, 211 | .column.foursixths, 212 | .column.twothirds { 213 | width: 65.4%; 214 | } 215 | .column.nine, 216 | .column.threefourths { 217 | width: 74.05%; 218 | } 219 | .column.ten, 220 | .column.fivesixths { 221 | width: 82.7%; 222 | } 223 | .column.eleven { 224 | width: 91.35%; 225 | } 226 | 227 | /*Shift guttered columns*/ 228 | .column.push-one { 229 | margin-left: 8.65%; 230 | } 231 | .column.right.push-one { 232 | margin-right: 8.65%; 233 | } 234 | .column.push-two, 235 | .column.push-sixth { 236 | margin-left: 17.25%; 237 | } 238 | .column.right.push-two, 239 | .column.right.push-sixth { 240 | margin-right: 17.25%; 241 | } 242 | .column.push-three, 243 | .column.push-fourth { 244 | margin-left: 25.85%; 245 | } 246 | .column.right.push-three, 247 | .column.right.push-fourth { 248 | margin-right: 25.85%; 249 | } 250 | .column.push-four, 251 | .column.push-twosixths, 252 | .column.push-third { 253 | margin-left: 34.55%; 254 | } 255 | .column.right.push-four, 256 | .column.right.push-twosixths, 257 | .column.right.push-third { 258 | margin-right: 34.55%; 259 | } 260 | .column.push-five { 261 | margin-left: 43.25%; 262 | } 263 | .column.right.push-five { 264 | margin-right: 43.25%; 265 | } 266 | .column.push-six, 267 | .column.push-half, 268 | .column.push-threesixths, 269 | .column.push-twofourths { 270 | margin-left: 51.8%; 271 | } 272 | .column.right.push-six, 273 | .column.right.push-half, 274 | .column.right.push-threesixths, 275 | .column.right.push-twofourths { 276 | margin-right: 51.8%; 277 | } 278 | .column.push-seven { 279 | margin-left: 60.55%; 280 | } 281 | .column.right.push-seven { 282 | margin-right: 60.55%; 283 | } 284 | .column.push-eight, 285 | .column.push-foursixths, 286 | .column.push-twothirds { 287 | margin-left: 69.2%; 288 | } 289 | .column.right.push-eight, 290 | .column.right.push-foursixths, 291 | .column.right.push-twothirds { 292 | margin-right: 69.2%; 293 | } 294 | .column.push-nine, 295 | .column.push-threefourths { 296 | margin-left: 77.85%; 297 | } 298 | .column.right.push-nine, 299 | .column.right.push-threefourths { 300 | margin-right: 77.85%; 301 | } 302 | .column.push-ten, 303 | .column.push-fivesixths { 304 | margin-left: 86.5%; 305 | } 306 | .column.right.push-ten, 307 | .column.right.push-fivesixths { 308 | margin-right: 86.5%; 309 | } 310 | .column.push-eleven { 311 | margin-left: 95.15%; 312 | } 313 | .column.right.push-eleven { 314 | margin-right: 95.15%; 315 | } 316 | 317 | 318 | 319 | /*No gutters*/ 320 | .column.one.reset { 321 | width: 8.3%; 322 | } 323 | .column.two.reset, 324 | .column.sixth.reset { 325 | width: 16.65%; 326 | } 327 | .column.fifth.reset { 328 | width: 20%; 329 | } 330 | .column.three.reset, 331 | .column.fourth.reset { 332 | width: 25%; 333 | } 334 | .column.four.reset, 335 | .column.twosixths.reset, 336 | .column.third.reset { 337 | width: 33.3%; 338 | } 339 | .column.twofifths.reset { 340 | width: 40%; 341 | } 342 | .column.five.reset { 343 | width: 41.65%; 344 | } 345 | .column.six.reset, 346 | .column.half.reset, 347 | .column.threesixths.reset, 348 | .column.twofourths.reset { 349 | width: 50%; 350 | } 351 | .column.seven.reset { 352 | width: 58.3%; 353 | } 354 | .column.threefifths.reset { 355 | width: 60%; 356 | } 357 | .column.eight.reset, 358 | .column.foursixths.reset, 359 | .column.twothirds.reset { 360 | width: 66.6%; 361 | } 362 | .column.nine.reset, 363 | .column.threefourths.reset { 364 | width: 75%; 365 | } 366 | .column.fourfifths.reset { 367 | width: 80%; 368 | } 369 | .column.ten.reset, 370 | .column.fivesixths.reset { 371 | width: 83.35%; 372 | } 373 | .column.eleven.reset { 374 | width: 91.7%; 375 | } 376 | 377 | /*Shift no-gutter columns*/ 378 | .column.reset.push-one { 379 | margin-left: 8.3%; 380 | } 381 | .column.reset.right.push-one { 382 | margin-right: 8.3%; 383 | } 384 | .column.reset.push-two, 385 | .column.reset.push-sixth { 386 | margin-left: 16.65%; 387 | } 388 | .column.reset.right.push-two, 389 | .column.reset.right.push-sixth { 390 | margin-right: 16.65%; 391 | } 392 | .column.reset.push-fifth { 393 | margin-left: 20%; 394 | } 395 | .column.reset.right.push-fifth { 396 | margin-right: 20%; 397 | } 398 | .column.reset.push-three, 399 | .column.reset.push-fourth { 400 | margin-left: 25%; 401 | } 402 | .column.reset.right.push-three, 403 | .column.reset.right.push-fourth { 404 | margin-right: 25%; 405 | } 406 | .column.reset.push-four, 407 | .column.reset.push-twosixths, 408 | .column.reset.push-third { 409 | margin-left: 33.3%; 410 | } 411 | .column.reset.right.push-four, 412 | .column.reset.right.push-twosixths, 413 | .column.reset.right.push-third { 414 | margin-right: 33.3%; 415 | } 416 | .column.reset.push-twofifths { 417 | margin-left: 40%; 418 | } 419 | .column.reset.right.push-twofifths { 420 | margin-right: 40%; 421 | } 422 | .column.reset.push-five { 423 | margin-left: 41.65%; 424 | } 425 | .column.reset.right.push-five { 426 | margin-right: 41.65%; 427 | } 428 | .column.reset.push-six, 429 | .column.reset.push-half, 430 | .column.reset.push-threesixths, 431 | .column.reset.push-twofourths { 432 | margin-left: 50%; 433 | } 434 | .column.reset.right.push-six, 435 | .column.right.reset.push-half, 436 | .column.right.reset.push-threesixths, 437 | .column.right.reset.push-twofourths { 438 | margin-right: 50%; 439 | } 440 | .column.reset.push-seven { 441 | margin-left: 58.3%; 442 | } 443 | .column.reset.right.push-seven { 444 | margin-right: 58.3%; 445 | } 446 | .column.reset.push-threefifths { 447 | margin-left: 60%; 448 | } 449 | .column.reset.right.push-threefifths { 450 | margin-right: 60%; 451 | } 452 | .column.reset.push-eight, 453 | .column.reset.push-foursixths, 454 | .column.reset.push-twothirds { 455 | margin-left: 66.6%; 456 | } 457 | .column.reset.right.push-eight, 458 | .column.reset.right.push-foursixths, 459 | .column.reset.right.push-twothirds { 460 | margin-right: 66.6%; 461 | } 462 | .column.reset.push-nine, 463 | .column.reset.push-threefourths { 464 | margin-left: 75%; 465 | } 466 | .column.reset.right.push-nine, 467 | .column.reset.right.push-threefourths { 468 | margin-right: 75%; 469 | } 470 | .column.reset.push-fourfifths { 471 | margin-left: 80%; 472 | } 473 | .column.reset.right.push-fourfifths { 474 | margin-right: 80%; 475 | } 476 | .column.reset.push-ten, 477 | .column.reset.push-fivesixths { 478 | margin-left: 83.35%; 479 | } 480 | .column.reset.right.push-ten, 481 | .column.reset.right.push-fivesixths { 482 | margin-right: 83.35%; 483 | } 484 | .column.reset.push-eleven { 485 | margin-left: 91.7%; 486 | } 487 | .column.reset.right.push-eleven { 488 | margin-right: 91.7%; 489 | } 490 | 491 | 492 | 493 | /*Last in line*/ 494 | .column.last { 495 | margin-right: 0; 496 | } 497 | .column.right.last { 498 | margin-left: 0; 499 | } 500 | 501 | 502 | 503 | /*Fixed-width column with another column taking rest of the available space (fixed on the left)*/ 504 | .column.fluid { 505 | clear: none; 506 | float: left; 507 | width: 100%; 508 | margin-left: 0; 509 | margin-right: 0; 510 | } 511 | .column.fluid > .column-content { 512 | margin-right: 10em; 513 | } 514 | .column.fixed { 515 | position: static; 516 | clear: none; 517 | float: right; 518 | margin-right: 0; 519 | margin-left: -100%; 520 | width: 10em; 521 | } 522 | 523 | /*Reverse stacking*/ 524 | .column.fluid.right > .column-content { 525 | margin-right: 0; 526 | margin-left: 10em; 527 | } 528 | .column.fixed.right { 529 | float: left; 530 | } 531 | -------------------------------------------------------------------------------- /source/layers/lists.scss: -------------------------------------------------------------------------------- 1 | /*List layouts*/ 2 | 3 | 4 | 5 | /*Modified lists*/ 6 | ul.plain, 7 | ul.plain ul, 8 | ul.plain ol, 9 | ol.plain, 10 | ol.plain ul, 11 | ol.plain ol, 12 | ul.inline, 13 | ol.inline, 14 | ul.collapse, 15 | ol.collapse { 16 | padding-left: 0; 17 | list-style-type: none; 18 | } 19 | 20 | /*Child lists*/ 21 | ul.plain ul, 22 | ul.plain ol, 23 | ol.plain ul, 24 | ol.plain ol, 25 | ul.inline ul, 26 | ul.inline ol, 27 | ol.inline ul, 28 | ol.inline ol, 29 | ul.collapse ul, 30 | ul.collapse ol, 31 | ol.collapse ul, 32 | ol.collapse ol { 33 | margin-top: 0; 34 | margin-bottom: 0; 35 | } 36 | 37 | /*Plain definition lists*/ 38 | dl.plain dt { 39 | font-weight: inherit; 40 | } 41 | 42 | /*Inline lists*/ 43 | ul.inline.right, 44 | ol.inline.right, 45 | dl.inline.right { 46 | text-align: right; 47 | } 48 | ul.inline.center, 49 | ol.inline.center, 50 | dl.inline.center { 51 | text-align: center; 52 | } 53 | ul.inline > li, 54 | ol.inline > li, 55 | dl.inline > dt, 56 | dl.inline > dd { 57 | display: inline; 58 | } 59 | 60 | /*Horizontal lists with block elements*/ 61 | ul.collapse, 62 | ol.collapse, 63 | dl.collapse { 64 | float: left; 65 | clear: none; 66 | } 67 | ul.collapse.right, 68 | ol.collapse.right, 69 | dl.collapse.right { 70 | float: right; 71 | } 72 | ul.collapse > li, 73 | ol.collapse > li, 74 | dl.collapse > dt, 75 | dl.collapse > dd { 76 | float: left; 77 | clear: none; 78 | } 79 | -------------------------------------------------------------------------------- /source/layers/normalize.scss: -------------------------------------------------------------------------------- 1 | /*Basics*/ 2 | html, body { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | html, body, div, span, object, iframe, 8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 9 | abbr, address, cite, code, 10 | del, dfn, em, img, ins, kbd, q, samp, a, 11 | small, strong, sub, sup, var, i, b, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, figcaption, figure, 16 | footer, header, hgroup, menu, nav, section, summary, 17 | time, mark, audio, video { 18 | clear: both; 19 | outline-width: 0; 20 | border-width: 0; 21 | border-style: solid; 22 | border-color: transparent; 23 | background: transparent; 24 | outline-style: solid; 25 | vertical-align: baseline; 26 | } 27 | html, body, blockquote, pre, table, form { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | figure, button, input, select, textarea { 32 | margin: 0; 33 | } 34 | img, iframe, button, input, select, textarea { 35 | max-width: 100%; 36 | } 37 | iframe { 38 | width: 100%; 39 | display: block; 40 | } 41 | 42 | 43 | 44 | /*HTML5 elements*/ 45 | article, aside, details, figcaption, figure, 46 | footer, header, hgroup, menu, nav, section, summary { 47 | display: block; 48 | } 49 | audio, canvas, video { 50 | display: inline-block; 51 | *display: inline; 52 | *zoom: 1; 53 | } 54 | audio:not([controls]) { 55 | display: none; 56 | } 57 | [hidden] { 58 | display: none; 59 | } 60 | 61 | 62 | 63 | /*Improve scaled image quality in IE7*/ 64 | img { 65 | -ms-interpolation-mode: bicubic; 66 | } 67 | 68 | /*Correct overflows in IE9*/ 69 | svg:not(:root) { 70 | overflow: hidden; 71 | } 72 | 73 | /*White-space behavior in pre*/ 74 | pre { 75 | white-space: pre-wrap; 76 | word-wrap: break-word; 77 | } 78 | 79 | 80 | 81 | /*Document elements*/ 82 | 83 | /*Lists*/ 84 | ul { 85 | list-style: disc; 86 | padding-left: 2em; 87 | } 88 | ol { 89 | list-style: decimal; 90 | padding-left: 2em; 91 | } 92 | nav ul, nav ol { 93 | list-style: none; 94 | list-style-image: none; 95 | padding-left: 0; 96 | } 97 | 98 | /*Inline*/ 99 | sub, sup { 100 | line-height: 0; 101 | position: relative; 102 | vertical-align: baseline; 103 | } 104 | sup { 105 | top: -0.5em; 106 | } 107 | sub { 108 | bottom: -0.25em; 109 | } 110 | 111 | /*Tables*/ 112 | table { 113 | width: 100%; 114 | border-collapse: collapse; 115 | border-spacing: 0; 116 | } 117 | caption, th, td { 118 | text-align: left; 119 | vertical-align: top; 120 | } 121 | 122 | 123 | 124 | /*Text*/ 125 | 126 | /*Fonts*/ 127 | html { 128 | font-size: 100%; 129 | font-family: sans-serif; 130 | -webkit-text-size-adjust: 100%; 131 | -ms-text-size-adjust: 100%; 132 | } 133 | h1, h2, h3, h4, h5, h6, strong, dt, mark, th { 134 | font-weight: bold; 135 | } 136 | 137 | /*Interactive*/ 138 | a { 139 | text-decoration: underline; 140 | } 141 | a:hover { 142 | text-decoration: none; 143 | } 144 | input, select, textarea, button { 145 | font-family: inherit; 146 | } 147 | input[type=""], input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], select, textarea, pre, code, kbd, samp { 148 | font-size: inherit; 149 | line-height: inherit; 150 | } 151 | /*Non-compliant browsers require this as separate declaration*/ 152 | input:not([type]) { 153 | font-size: inherit; 154 | line-height: inherit; 155 | } 156 | button, input, select, textarea, pre, code, kbd, samp { 157 | font-weight: inherit; 158 | } 159 | button, select { 160 | text-transform: none; 161 | } 162 | 163 | /*Inline markup*/ 164 | em, dfn, q, blockquote { 165 | font-style: italic; 166 | } 167 | del { 168 | text-decoration: line-through; 169 | } 170 | 171 | /*Quotes*/ 172 | blockquote, q { 173 | quotes: none; 174 | } 175 | blockquote:before, blockquote:after, 176 | q:before, q:after { 177 | content: ''; 178 | content: none; 179 | } 180 | 181 | 182 | 183 | /*Forms & interaction*/ 184 | 185 | /*Use the same box-model and sizing in all browsers*/ 186 | button, 187 | input, 188 | textarea { 189 | -webkit-box-sizing: content-box; 190 | -moz-box-sizing: content-box; 191 | box-sizing: content-box; 192 | display: inline-block; 193 | } 194 | 195 | /*Make search fields consistent with text fields on Webkit*/ 196 | input[type="search"] { 197 | -webkit-appearance: textfield; 198 | -moz-appearance: textfield; 199 | } 200 | input[type="search"]::-webkit-search-cancel-button, 201 | input[type="search"]::-webkit-search-decoration { 202 | -webkit-appearance: none; 203 | } 204 | 205 | /*Get IE on the line with checkboxes*/ 206 | input[type="checkbox"], 207 | input[type="radio"] { 208 | box-sizing: border-box; 209 | padding: 0; 210 | } 211 | 212 | /*Make button rendering consistent on Firefox 4+*/ 213 | button::-moz-focus-inner, 214 | input::-moz-focus-inner { 215 | border: 0; 216 | padding: 0; 217 | } 218 | 219 | /*Style clickable inputs consistently on all webkits*/ 220 | button, 221 | html input[type="button"], 222 | input[type="reset"], 223 | input[type="submit"] { 224 | -webkit-appearance: button; 225 | } 226 | 227 | /*Buttons have center-aligned text*/ 228 | button, 229 | html input[type="button"], 230 | input[type="reset"], 231 | input[type="submit"] { 232 | text-align: center; 233 | } 234 | 235 | /*Use sensible alignments*/ 236 | button, input, select { 237 | vertical-align: baseline; 238 | *vertical-align: middle; 239 | } 240 | textarea { 241 | overflow: auto; 242 | vertical-align: top; 243 | } 244 | 245 | /*Use sensible cursors*/ 246 | body { 247 | cursor: default; 248 | } 249 | abbr[title], dfn[title] { 250 | text-decoration: underline; 251 | cursor: help; 252 | } 253 | a, 254 | label, 255 | button, 256 | input[type="submit"], 257 | input[type="button"], 258 | input[type="reset"], 259 | input[type="radio"], 260 | input[type="checkbox"], 261 | select, 262 | option, 263 | input[type='image'], 264 | input[type='file'] { 265 | cursor: pointer; 266 | } 267 | .disabled button, 268 | .disabled label, 269 | .disabled a, 270 | button.disabled, 271 | label.disabled, 272 | a.disabled, 273 | .disabled input[type="submit"], 274 | .disabled input[type="button"], 275 | .disabled input[type="reset"], 276 | input[type="submit"].disabled, 277 | input[type="button"].disabled, 278 | input[type="reset"].disabled { 279 | cursor: default; 280 | } 281 | a[disabled], 282 | button[disabled], 283 | input[disabled] { 284 | cursor: default; 285 | } 286 | 287 | /*Consistent outlines*/ 288 | a:focus { 289 | outline-style: dotted; 290 | } 291 | a:active, a:hover { 292 | outline: 0; 293 | } 294 | -------------------------------------------------------------------------------- /source/layers/rhythm.scss: -------------------------------------------------------------------------------- 1 | /*Rhythm*/ 2 | html { 3 | line-height: 1.34; 4 | } 5 | h1, 6 | h2, 7 | h3, 8 | h4, 9 | h5, 10 | h6 { 11 | margin-top: 1.34em; 12 | margin-bottom: 0.67em; 13 | } 14 | p, 15 | ul, 16 | ol, 17 | table, 18 | pre, 19 | blockquote { 20 | margin-top: 0.67em; 21 | margin-bottom: 1.34em; 22 | } 23 | 24 | /*Nested lists*/ 25 | ul ul, 26 | ul ol, 27 | ol ol, 28 | ol ul { 29 | margin-top: 0; 30 | margin-bottom: 0.67em; 31 | } 32 | 33 | /*Definition lists*/ 34 | dl { 35 | margin-bottom: 1.34em; 36 | } 37 | dl.plain { 38 | margin-top: 0.67em; 39 | } 40 | dl.reset, 41 | dl.reset-top { 42 | margin-top: 0; 43 | } 44 | dt { 45 | margin-top: 0.67em; 46 | margin-bottom: 0; 47 | } 48 | dl.plain > dt, 49 | dl.inline > dt, 50 | dl.collapse > dt { 51 | margin-top: 0; 52 | } 53 | dd { 54 | margin-top: 0; 55 | margin-bottom: 0; 56 | margin-left: 0; 57 | } 58 | 59 | /*Tables*/ 60 | caption { 61 | margin-bottom: 0.67em; 62 | } 63 | th, 64 | td { 65 | padding: 0.67em; 66 | } 67 | .squeeze th, 68 | .squeeze td, 69 | th.squeeze, 70 | td.squeeze, 71 | table table th, 72 | table table td { 73 | padding: 0.335em; 74 | } 75 | table.plain th, 76 | table.plain td, 77 | tr.plain th, 78 | tr.plain td, 79 | tbody.plain th, 80 | tbody.plain td, 81 | thead.plain th, 82 | thead.plain td, 83 | tfoot.plain th, 84 | tfoot.plain td, 85 | th.plain, 86 | td.plain { 87 | padding: 0; 88 | } 89 | 90 | /*Headings*/ 91 | h1.squeeze, 92 | h2.squeeze, 93 | h3.squeeze, 94 | h4.squeeze, 95 | h5.squeeze, 96 | h6.squeeze, 97 | 98 | h1.squeeze-top , 99 | h2.squeeze-top, 100 | h3.squeeze-top, 101 | h4.squeeze-top, 102 | h5.squeeze-top, 103 | h6.squeeze-top { 104 | margin-top: 0.67em; 105 | } 106 | p.squeeze, 107 | ul.squeeze, 108 | ol.squeeze, 109 | table.squeeze, 110 | pre.squeeze, 111 | blockquote.squeeze, 112 | p.squeeze-top, 113 | ul.squeeze-top, 114 | ol.squeeze-top, 115 | table.squeeze-top, 116 | pre.squeeze-top, 117 | blockquote.squeeze-top { 118 | margin-top: 0.335em; 119 | } 120 | h1.squeeze, 121 | h2.squeeze, 122 | h3.squeeze, 123 | h4.squeeze, 124 | h5.squeeze, 125 | h6.squeeze, 126 | 127 | h1.squeeze-bottom , 128 | h2.squeeze-bottom, 129 | h3.squeeze-bottom, 130 | h4.squeeze-bottom, 131 | h5.squeeze-bottom, 132 | h6.squeeze-bottom { 133 | margin-bottom: 0.335em; 134 | } 135 | p.squeeze, 136 | ul.squeeze, 137 | ol.squeeze, 138 | table.squeeze, 139 | pre.squeeze, 140 | blockquote.squeeze, 141 | p.squeeze-bottom, 142 | ul.squeeze-bottom, 143 | ol.squeeze-bottom, 144 | table.squeeze-bottom, 145 | pre.squeeze-bottom, 146 | blockquote.squeeze-bottom { 147 | margin-bottom: 0.67em; 148 | } 149 | 150 | 151 | 152 | /*Spacing*/ 153 | .push, 154 | .push-top { 155 | margin-top: 1.34em; 156 | } 157 | .push, 158 | .push-right { 159 | margin-right: 1.34em; 160 | } 161 | .push, 162 | .push-bottom { 163 | margin-bottom: 1.34em; 164 | } 165 | .push, 166 | .push-left { 167 | margin-left: 1.34em; 168 | } 169 | 170 | /*No spacing*/ 171 | .reset, 172 | .reset-top { 173 | margin-top: 0; 174 | } 175 | .reset, 176 | .reset-right { 177 | margin-right: 0; 178 | } 179 | .reset, 180 | .reset-bottom { 181 | margin-bottom: 0; 182 | } 183 | .reset, 184 | .reset-left { 185 | margin-left: 0; 186 | } 187 | 188 | 189 | 190 | /*Buffers*/ 191 | .buffer, 192 | .buffer-top { 193 | padding-top: 1em; 194 | } 195 | .buffer.even, 196 | .buffer-top.even { 197 | padding-top: 2em; 198 | } 199 | .buffer, 200 | .buffer-right { 201 | padding-right: 2em; 202 | } 203 | .buffer, 204 | .buffer-bottom { 205 | padding-bottom: 2em; 206 | } 207 | .buffer, 208 | .buffer-left { 209 | padding-left: 2em; 210 | } 211 | 212 | /*No buffers*/ 213 | .no-buffer, 214 | .no-buffer-top { 215 | padding-top: 0; 216 | } 217 | .no-buffer, 218 | .no-buffer-right { 219 | padding-right: 0; 220 | } 221 | .no-buffer, 222 | .no-buffer-bottom { 223 | padding-bottom: 0; 224 | } 225 | .no-buffer, 226 | .no-buffer-left { 227 | padding-left: 0; 228 | } 229 | -------------------------------------------------------------------------------- /source/layers/tables.scss: -------------------------------------------------------------------------------- 1 | /*Table gravity*/ 2 | 3 | /*Horizontal*/ 4 | th.left, td.left { 5 | text-align: left; 6 | } 7 | th.right, td.right { 8 | text-align: right; 9 | } 10 | th.center, td.center { 11 | text-align: center; 12 | } 13 | 14 | /*Vertical*/ 15 | th.top, td.top { 16 | vertical-align: top; 17 | } 18 | th.vertical-center, td.vertical-center, th.middle, td.middle { 19 | vertical-align: middle; 20 | } 21 | th.bottom, td.bottom { 22 | vertical-align: bottom; 23 | } 24 | -------------------------------------------------------------------------------- /source/layers/text.scss: -------------------------------------------------------------------------------- 1 | /*Overall rhythm*/ 2 | html { 3 | word-break: break-word; 4 | 5 | -webkit-hyphens: auto; 6 | -moz-hyphens: auto; 7 | -epub-hyphens: auto; 8 | hyphens: auto; 9 | } 10 | input, textarea { 11 | word-break: normal; 12 | } 13 | 14 | /*Font families*/ 15 | html { 16 | font-family: "Segoe UI", "Helvetica Neue", "Helvetica", "Lucida Grande", "Ubuntu", "Roboto", "Arial", sans-serif; 17 | } 18 | blockquote, q { 19 | font-family: "Droid Serif", "Georgia", serif; 20 | } 21 | pre, code, kbd, samp { 22 | font-family: "Menlo", "Monaco", "Segoe UI Mono", "Droid Sans Mono", "Consolas", monospace; 23 | font-size: 0.9em; 24 | } 25 | pre code, pre kbd, pre samp { 26 | font-size: 1em; 27 | } 28 | 29 | /*Sizes*/ 30 | h1, h2, h3 { 31 | text-rendering: optimizeLegibility; 32 | } 33 | -------------------------------------------------------------------------------- /source/layers/tools.scss: -------------------------------------------------------------------------------- 1 | /*Force floats*/ 2 | .keep-left, .keep-right { 3 | clear: none; 4 | } 5 | .keep-left { 6 | float: left; 7 | } 8 | .keep-right { 9 | float: right; 10 | } 11 | .keep-center { 12 | margin-right: auto; 13 | margin-left: auto; 14 | } 15 | 16 | 17 | 18 | /*Positioning*/ 19 | .static { 20 | position: static; 21 | } 22 | .relative { 23 | position: relative; 24 | } 25 | .absolute { 26 | position: absolute; 27 | } 28 | .fixed { 29 | position: fixed; 30 | } 31 | 32 | 33 | 34 | /*Blocks and inline-blocks*/ 35 | .block { 36 | display: block; 37 | } 38 | .inline-block { 39 | display: inline-block; 40 | } 41 | .inline { 42 | display: inline; 43 | } 44 | ul.inline, 45 | ol.inline, 46 | dl.inline { 47 | display: block; 48 | } 49 | 50 | 51 | 52 | /*Utilities for common CSS-based behavior*/ 53 | .hidden { 54 | display: none; 55 | } 56 | .clear { 57 | clear: both; 58 | } 59 | .clear-after:after { 60 | content: " "; 61 | display: table; 62 | clear: both; 63 | } 64 | .clear-after { 65 | *zoom: 1; 66 | } 67 | 68 | 69 | 70 | /*Dry element of its content*/ 71 | .dry { 72 | text-indent: -9999em; 73 | direction: ltr; 74 | } 75 | 76 | 77 | 78 | /*Include padding and border in dimensions*/ 79 | .content-box { 80 | -webkit-box-sizing: content-box; 81 | -moz-box-sizing: content-box; 82 | box-sizing: content-box; 83 | } 84 | .border-box, 85 | button.border-box, 86 | input.border-box, 87 | textarea.border-box { 88 | -webkit-box-sizing: border-box; 89 | -moz-box-sizing: border-box; 90 | box-sizing: border-box; 91 | } 92 | -------------------------------------------------------------------------------- /source/mixins/responsive-consecutive.scss: -------------------------------------------------------------------------------- 1 | @mixin responsive-consecutive ($previous-name, $name, $width, $barely-width) { 2 | 3 | @media handheld, only screen and (max-width: $barely-width) { 4 | 5 | /*Show/hide*/ 6 | .hidden-under-#{$name} { 7 | display: none; 8 | } 9 | 10 | } 11 | @media handheld, only screen and (min-width: $width) { 12 | 13 | /*Show/hide*/ 14 | .hidden-over-#{$name} { 15 | display: none; 16 | } 17 | 18 | /*Width limit*/ 19 | .limit-#{$name} { 20 | max-width: $width; 21 | } 22 | 23 | 24 | 25 | /*Roll back default first-in-line behavior*/ 26 | .column.first[class^="#{$name}-"], 27 | .column.first[class*=" #{$name}-"] { 28 | clear: none; 29 | } 30 | 31 | /*Roll back first-in-line behavior of the previous break point set*/ 32 | .column.#{$previous-name}-first[class^="#{$name}-"], 33 | .column.#{$previous-name}-first[class*=" #{$name}-"] { 34 | clear: none; 35 | } 36 | 37 | 38 | 39 | /*Roll back default last-in-line behavior*/ 40 | .column.last[class^="#{$name}-"], 41 | .column.last[class*=" #{$name}-"], 42 | 43 | /*Roll back last-in-line behavior of the previous break point set*/ 44 | .column.#{$previous-name}-last[class^="#{$name}-"], 45 | .column.#{$previous-name}-last[class*=" #{$name}-"] { 46 | margin-right: 3.8%; 47 | } 48 | 49 | /*Roll back default last-in-line behavior*/ 50 | .column.right.last[class^="#{$name}-"], 51 | .column.right.last[class*=" #{$name}-"], 52 | 53 | /*Roll back last-in-line behavior of the previous break point set*/ 54 | .column.right.#{$previous-name}-last[class^="#{$name}-"], 55 | .column.right.#{$previous-name}-last[class*=" #{$name}-"] { 56 | margin-left: 3.8%; 57 | } 58 | 59 | 60 | 61 | /*Column basics*/ 62 | .column[class^="#{$name}-"], 63 | .column[class*=" #{$name}-"] { 64 | clear: none; 65 | float: left; 66 | min-height: 1px; 67 | margin-left: 0; 68 | margin-right: 3.8%; 69 | } 70 | .column.right[class^="#{$name}-"], 71 | .column.right[class*=" #{$name}-"] { 72 | float: right; 73 | margin-right: 0; 74 | margin-left: 3.8%; 75 | } 76 | .column.reset[class^="#{$name}-"], 77 | .column.reset[class*=" #{$name}-"] { 78 | margin-right: 0; 79 | margin-left: 0; 80 | } 81 | 82 | /*Full-width column*/ 83 | .column.#{$name}-full, 84 | .column.#{$name}-twelve { 85 | width: 100%; 86 | } 87 | 88 | 89 | 90 | /*Fifth*/ 91 | .column.#{$name}-fifth { 92 | width: 16.95%; 93 | } 94 | .column.#{$name}-twofifths { 95 | width: 37.70%; 96 | } 97 | .column.#{$name}-threefifths { 98 | width: 58.45%; 99 | } 100 | .column.#{$name}-fourfifths { 101 | width: 79.20%; 102 | } 103 | .column.#{$name}-push-fifth { 104 | margin-left: 20.45%; 105 | } 106 | .column.#{$name}-right.push-fifth { 107 | margin-right: 20.45%; 108 | } 109 | .column.#{$name}-push-twofifths { 110 | margin-left: 41.50%; 111 | } 112 | .column.#{$name}-right.push-twofifths { 113 | margin-right: 41.50%; 114 | } 115 | .column.#{$name}-push-threefifths { 116 | margin-left: 62.25%; 117 | } 118 | .column.#{$name}-right.push-threefifths { 119 | margin-right: 62.25%; 120 | } 121 | .column.#{$name}-push-fourfifths { 122 | margin-left: 83.00%; 123 | } 124 | .column.#{$name}-right.push-fourfifths { 125 | margin-right: 83.00%; 126 | } 127 | 128 | /*Fluid column widths*/ 129 | .column.#{$name}-one { 130 | width: 4.85%; 131 | } 132 | .column.#{$name}-two, 133 | .column.#{$name}-sixth { 134 | width: 13.45%; 135 | } 136 | .column.#{$name}-three, 137 | .column.#{$name}-fourth { 138 | width: 22.05%; 139 | } 140 | .column.#{$name}-four, 141 | .column.#{$name}-twosixths, 142 | .column.#{$name}-third { 143 | width: 30.75%; 144 | } 145 | .column.#{$name}-five { 146 | width: 39.45%; 147 | } 148 | .column.#{$name}-six, 149 | .column.#{$name}-half, 150 | .column.#{$name}-threesixths, 151 | .column.#{$name}-twofourths { 152 | width: 48%; 153 | } 154 | .column.#{$name}-seven { 155 | width: 56.75%; 156 | } 157 | .column.#{$name}-eight, 158 | .column.#{$name}-foursixths, 159 | .column.#{$name}-twothirds { 160 | width: 65.4%; 161 | } 162 | .column.#{$name}-nine, 163 | .column.#{$name}-threefourths { 164 | width: 74.05%; 165 | } 166 | .column.#{$name}-ten, 167 | .column.#{$name}-fivesixths { 168 | width: 82.7%; 169 | } 170 | .column.#{$name}-eleven { 171 | width: 91.35%; 172 | } 173 | .column.#{$name}-full.reset, 174 | .column.#{$name}-twelve.reset { 175 | width: 100%; 176 | } 177 | 178 | /*Shift guttered columns*/ 179 | .column.#{$name}-push-one { 180 | margin-left: 8.65%; 181 | } 182 | .column.right.#{$name}-push-one { 183 | margin-right: 8.65%; 184 | } 185 | .column.#{$name}-push-two, 186 | .column.#{$name}-push-sixth { 187 | margin-left: 17.25%; 188 | } 189 | .column.right.#{$name}-push-two, 190 | .column.right.#{$name}-push-sixth { 191 | margin-right: 17.25%; 192 | } 193 | .column.#{$name}-push-three, 194 | .column.#{$name}-push-fourth { 195 | margin-left: 25.85%; 196 | } 197 | .column.right.#{$name}-push-three, 198 | .column.right.#{$name}-push-fourth { 199 | margin-right: 25.85%; 200 | } 201 | .column.#{$name}-push-four, 202 | .column.#{$name}-push-twosixths, 203 | .column.#{$name}-push-third { 204 | margin-left: 34.55%; 205 | } 206 | .column.right.#{$name}-push-four, 207 | .column.right.#{$name}-push-twosixths, 208 | .column.right.#{$name}-push-third { 209 | margin-right: 34.55%; 210 | } 211 | .column.#{$name}-push-five { 212 | margin-left: 43.25%; 213 | } 214 | .column.right.#{$name}-push-five { 215 | margin-right: 43.25%; 216 | } 217 | .column.#{$name}-push-six, 218 | .column.#{$name}-push-half, 219 | .column.#{$name}-push-threesixths, 220 | .column.#{$name}-push-twofourths { 221 | margin-left: 51.8%; 222 | } 223 | .column.right.#{$name}-push-six, 224 | .column.right.#{$name}-push-half, 225 | .column.right.#{$name}-push-threesixths, 226 | .column.right.#{$name}-push-twofourths { 227 | margin-right: 51.8%; 228 | } 229 | .column.#{$name}-push-seven { 230 | margin-left: 60.55%; 231 | } 232 | .column.right.#{$name}-push-seven { 233 | margin-right: 60.55%; 234 | } 235 | .column.#{$name}-push-eight, 236 | .column.#{$name}-push-foursixths, 237 | .column.#{$name}-push-twothirds { 238 | margin-left: 69.2%; 239 | } 240 | .column.right.#{$name}-push-eight, 241 | .column.right.#{$name}-push-foursixths, 242 | .column.right.#{$name}-push-twothirds { 243 | margin-right: 69.2%; 244 | } 245 | .column.#{$name}-push-nine, 246 | .column.#{$name}-push-threefourths { 247 | margin-left: 77.85%; 248 | } 249 | .column.right.#{$name}-push-nine, 250 | .column.right.#{$name}-push-threefourths { 251 | margin-right: 77.85%; 252 | } 253 | .column.#{$name}-push-ten, 254 | .column.#{$name}-push-fivesixths { 255 | margin-left: 86.5%; 256 | } 257 | .column.right.#{$name}-push-ten, 258 | .column.right.#{$name}-push-fivesixths { 259 | margin-right: 86.5%; 260 | } 261 | .column.#{$name}-push-eleven { 262 | margin-left: 95.15%; 263 | } 264 | .column.right.#{$name}-push-eleven { 265 | margin-right: 95.15%; 266 | } 267 | 268 | 269 | 270 | /*No gutters*/ 271 | .column.#{$name}-one.reset { 272 | width: 8.3%; 273 | } 274 | .column.#{$name}-two.reset, 275 | .column.#{$name}-sixth.reset { 276 | width: 16.65%; 277 | } 278 | .column.#{$name}-three.reset, 279 | .column.#{$name}-fourth.reset { 280 | width: 25%; 281 | } 282 | .column.#{$name}-four.reset, 283 | .column.#{$name}-twosixths.reset, 284 | .column.#{$name}-third.reset { 285 | width: 33.3%; 286 | } 287 | .column.#{$name}-five.reset { 288 | width: 41.65%; 289 | } 290 | .column.#{$name}-six.reset, 291 | .column.#{$name}-half.reset, 292 | .column.#{$name}-threesixths.reset, 293 | .column.#{$name}-twofourths.reset { 294 | width: 50%; 295 | } 296 | .column.#{$name}-seven.reset { 297 | width: 58.3%; 298 | } 299 | .column.#{$name}-eight.reset, 300 | .column.#{$name}-foursixths.reset, 301 | .column.#{$name}-twothirds.reset { 302 | width: 66.6%; 303 | } 304 | .column.#{$name}-nine.reset, 305 | .column.#{$name}-threefourths.reset { 306 | width: 75%; 307 | } 308 | .column.#{$name}-ten.reset, 309 | .column.#{$name}-fivesixths.reset { 310 | width: 83.35%; 311 | } 312 | .column.#{$name}-eleven.reset { 313 | width: 91.7%; 314 | } 315 | 316 | /*Shift no-gutter columns*/ 317 | .column.reset.#{$name}-push-one { 318 | margin-left: 8.3%; 319 | } 320 | .column.reset.right.#{$name}-push-one { 321 | margin-right: 8.3%; 322 | } 323 | .column.reset.#{$name}-push-two, 324 | .column.reset.#{$name}-push-sixth { 325 | margin-left: 16.65%; 326 | } 327 | .column.reset.right.#{$name}-push-two, 328 | .column.reset.right.#{$name}-push-sixth { 329 | margin-right: 16.65%; 330 | } 331 | .column.reset.#{$name}-push-three, 332 | .column.reset.#{$name}-push-fourth { 333 | margin-left: 25%; 334 | } 335 | .column.reset.right.#{$name}-push-three, 336 | .column.reset.right.#{$name}-push-fourth { 337 | margin-right: 25%; 338 | } 339 | .column.reset.#{$name}-push-four, 340 | .column.reset.#{$name}-push-twosixths, 341 | .column.reset.#{$name}-push-third { 342 | margin-left: 33.3%; 343 | } 344 | .column.reset.right.#{$name}-push-four, 345 | .column.reset.right.#{$name}-push-twosixths, 346 | .column.reset.right.#{$name}-push-third { 347 | margin-right: 33.3%; 348 | } 349 | .column.reset.#{$name}-push-five { 350 | margin-left: 41.65%; 351 | } 352 | .column.reset.right.#{$name}-push-five { 353 | margin-right: 41.65%; 354 | } 355 | .column.reset.#{$name}-push-six, 356 | .column.reset.#{$name}-push-half, 357 | .column.reset.#{$name}-push-threesixths, 358 | .column.reset.#{$name}-push-twofourths { 359 | margin-left: 50%; 360 | } 361 | .column.reset.right.#{$name}-push-six, 362 | .column.right.reset.#{$name}-push-half, 363 | .column.right.reset.#{$name}-push-threesixths, 364 | .column.right.reset.#{$name}-push-twofourths { 365 | margin-right: 50%; 366 | } 367 | .column.reset.#{$name}-push-seven { 368 | margin-left: 58.3%; 369 | } 370 | .column.reset.right.#{$name}-push-seven { 371 | margin-right: 58.3%; 372 | } 373 | .column.reset.#{$name}-push-eight, 374 | .column.reset.#{$name}-push-foursixths, 375 | .column.reset.#{$name}-push-twothirds { 376 | margin-left: 66.6%; 377 | } 378 | .column.reset.right.#{$name}-push-eight, 379 | .column.reset.right.#{$name}-push-foursixths, 380 | .column.reset.right.#{$name}-push-twothirds { 381 | margin-right: 66.6%; 382 | } 383 | .column.reset.#{$name}-push-nine, 384 | .column.reset.#{$name}-push-threefourths { 385 | margin-left: 75%; 386 | } 387 | .column.reset.right.#{$name}-push-nine, 388 | .column.reset.right.#{$name}-push-threefourths { 389 | margin-right: 75%; 390 | } 391 | .column.reset.#{$name}-push-ten, 392 | .column.reset.#{$name}-push-fivesixths { 393 | margin-left: 83.35%; 394 | } 395 | .column.reset.right.#{$name}-push-ten, 396 | .column.reset.right.#{$name}-push-fivesixths { 397 | margin-right: 83.35%; 398 | } 399 | .column.reset.#{$name}-push-eleven { 400 | margin-left: 91.7%; 401 | } 402 | .column.reset.right.#{$name}-push-eleven { 403 | margin-right: 91.7%; 404 | } 405 | 406 | 407 | 408 | /*First column in the series*/ 409 | .column.#{$name}-first[class^="#{$name}-"], 410 | .column.#{$name}-first[class*=" #{$name}-"] { 411 | clear: both; 412 | } 413 | 414 | /*Last column in this series*/ 415 | .column.#{$name}-last, 416 | 417 | /*Attribute selector matches because of the second class, but we need this for specificity*/ 418 | .column.#{$name}-last[class^="#{$name}-"], 419 | .column.#{$name}-last[class*=" #{$name}-"] { 420 | margin-right: 0; 421 | } 422 | 423 | /*The same for right-aligned columns*/ 424 | .column.right.#{$name}-last, 425 | .column.right.#{$name}-last[class^="#{$name}-"], 426 | .column.right.#{$name}-last[class*=" #{$name}-"] { 427 | margin-left: 0; 428 | } 429 | 430 | 431 | 432 | /*Break columns after this*/ 433 | .column.#{$name}-break { 434 | width: auto !important; 435 | float: none !important; 436 | clear: both !important; 437 | margin-right: 0 !important; 438 | margin-left: 0 !important; 439 | } 440 | 441 | } 442 | 443 | } 444 | -------------------------------------------------------------------------------- /source/mixins/responsive-first.scss: -------------------------------------------------------------------------------- 1 | @mixin responsive-first ($name, $width, $barely-width) { 2 | @media handheld, only screen and (max-width: $barely-width) { 3 | 4 | /*Show/hide*/ 5 | .hidden-under-#{$name} { 6 | display: none; 7 | } 8 | 9 | } 10 | @media handheld, only screen and (min-width: $width) { 11 | 12 | /*Show/hide*/ 13 | .hidden-over-#{$name} { 14 | display: none; 15 | } 16 | 17 | /*Width limit*/ 18 | .limit-#{$name} { 19 | max-width: $width; 20 | } 21 | 22 | /*Roll back default first-in-line behavior*/ 23 | .column.first[class^="#{$name}-"], 24 | .column.first[class*=" #{$name}-"] { 25 | clear: none; 26 | } 27 | 28 | /*Roll back default last-in-line behavior*/ 29 | .column.last[class^="#{$name}-"], 30 | .column.last[class*=" #{$name}-"] { 31 | margin-right: 3.8%; 32 | } 33 | 34 | /*Roll back default last-in-line behavior*/ 35 | .column.right.last[class^="#{$name}-"], 36 | .column.right.last[class*=" #{$name}-"] { 37 | margin-left: 3.8%; 38 | } 39 | 40 | 41 | 42 | /*Column basics*/ 43 | .column[class^="#{$name}-"], 44 | .column[class*=" #{$name}-"] { 45 | clear: none; 46 | float: left; 47 | min-height: 1px; 48 | margin-left: 0; 49 | margin-right: 3.8%; 50 | } 51 | .column.right[class^="#{$name}-"], 52 | .column.right[class*=" #{$name}-"] { 53 | float: right; 54 | margin-right: 0; 55 | margin-left: 3.8%; 56 | } 57 | .column.reset[class^="#{$name}-"], 58 | .column.reset[class*=" #{$name}-"] { 59 | margin-right: 0; 60 | margin-left: 0; 61 | } 62 | 63 | /*Full-width column*/ 64 | .column.#{$name}-full, 65 | .column.#{$name}-twelve { 66 | width: 100%; 67 | } 68 | 69 | 70 | 71 | /*Fifth*/ 72 | .column.#{$name}-fifth { 73 | width: 16.95%; 74 | } 75 | .column.#{$name}-twofifths { 76 | width: 37.70%; 77 | } 78 | .column.#{$name}-threefifths { 79 | width: 58.45%; 80 | } 81 | .column.#{$name}-fourfifths { 82 | width: 79.20%; 83 | } 84 | .column.#{$name}-push-fifth { 85 | margin-left: 20.45%; 86 | } 87 | .column.#{$name}-right.push-fifth { 88 | margin-right: 20.45%; 89 | } 90 | .column.#{$name}-push-twofifths { 91 | margin-left: 41.50%; 92 | } 93 | .column.#{$name}-right.push-twofifths { 94 | margin-right: 41.50%; 95 | } 96 | .column.#{$name}-push-threefifths { 97 | margin-left: 62.25%; 98 | } 99 | .column.#{$name}-right.push-threefifths { 100 | margin-right: 62.25%; 101 | } 102 | .column.#{$name}-push-fourfifths { 103 | margin-left: 83.00%; 104 | } 105 | .column.#{$name}-right.push-fourfifths { 106 | margin-right: 83.00%; 107 | } 108 | 109 | /*Fluid column widths*/ 110 | .column.#{$name}-one { 111 | width: 4.85%; 112 | } 113 | .column.#{$name}-two, 114 | .column.#{$name}-sixth { 115 | width: 13.45%; 116 | } 117 | .column.#{$name}-three, 118 | .column.#{$name}-fourth { 119 | width: 22.05%; 120 | } 121 | .column.#{$name}-four, 122 | .column.#{$name}-twosixths, 123 | .column.#{$name}-third { 124 | width: 30.75%; 125 | } 126 | .column.#{$name}-five { 127 | width: 39.45%; 128 | } 129 | .column.#{$name}-six, 130 | .column.#{$name}-half, 131 | .column.#{$name}-threesixths, 132 | .column.#{$name}-twofourths { 133 | width: 48%; 134 | } 135 | .column.#{$name}-seven { 136 | width: 56.75%; 137 | } 138 | .column.#{$name}-eight, 139 | .column.#{$name}-foursixths, 140 | .column.#{$name}-twothirds { 141 | width: 65.4%; 142 | } 143 | .column.#{$name}-nine, 144 | .column.#{$name}-threefourths { 145 | width: 74.05%; 146 | } 147 | .column.#{$name}-ten, 148 | .column.#{$name}-fivesixths { 149 | width: 82.7%; 150 | } 151 | .column.#{$name}-eleven { 152 | width: 91.35%; 153 | } 154 | 155 | /*Shift guttered columns*/ 156 | .column.#{$name}-push-one { 157 | margin-left: 8.65%; 158 | } 159 | .column.right.#{$name}-push-one { 160 | margin-right: 8.65%; 161 | } 162 | .column.#{$name}-push-two, 163 | .column.#{$name}-push-sixth { 164 | margin-left: 17.25%; 165 | } 166 | .column.right.#{$name}-push-two, 167 | .column.right.#{$name}-push-sixth { 168 | margin-right: 17.25%; 169 | } 170 | .column.#{$name}-push-three, 171 | .column.#{$name}-push-fourth { 172 | margin-left: 25.85%; 173 | } 174 | .column.right.#{$name}-push-three, 175 | .column.right.#{$name}-push-fourth { 176 | margin-right: 25.85%; 177 | } 178 | .column.#{$name}-push-four, 179 | .column.#{$name}-push-twosixths, 180 | .column.#{$name}-push-third { 181 | margin-left: 34.55%; 182 | } 183 | .column.right.#{$name}-push-four, 184 | .column.right.#{$name}-push-twosixths, 185 | .column.right.#{$name}-push-third { 186 | margin-right: 34.55%; 187 | } 188 | .column.#{$name}-push-five { 189 | margin-left: 43.25%; 190 | } 191 | .column.right.#{$name}-push-five { 192 | margin-right: 43.25%; 193 | } 194 | .column.#{$name}-push-six, 195 | .column.#{$name}-push-half, 196 | .column.#{$name}-push-threesixths, 197 | .column.#{$name}-push-twofourths { 198 | margin-left: 51.8%; 199 | } 200 | .column.right.#{$name}-push-six, 201 | .column.right.#{$name}-push-half, 202 | .column.right.#{$name}-push-threesixths, 203 | .column.right.#{$name}-push-twofourths { 204 | margin-right: 51.8%; 205 | } 206 | .column.#{$name}-push-seven { 207 | margin-left: 60.55%; 208 | } 209 | .column.right.#{$name}-push-seven { 210 | margin-right: 60.55%; 211 | } 212 | .column.#{$name}-push-eight, 213 | .column.#{$name}-push-foursixths, 214 | .column.#{$name}-push-twothirds { 215 | margin-left: 69.2%; 216 | } 217 | .column.right.#{$name}-push-eight, 218 | .column.right.#{$name}-push-foursixths, 219 | .column.right.#{$name}-push-twothirds { 220 | margin-right: 69.2%; 221 | } 222 | .column.#{$name}-push-nine, 223 | .column.#{$name}-push-threefourths { 224 | margin-left: 77.85%; 225 | } 226 | .column.right.#{$name}-push-nine, 227 | .column.right.#{$name}-push-threefourths { 228 | margin-right: 77.85%; 229 | } 230 | .column.#{$name}-push-ten, 231 | .column.#{$name}-push-fivesixths { 232 | margin-left: 86.5%; 233 | } 234 | .column.right.#{$name}-push-ten, 235 | .column.right.#{$name}-push-fivesixths { 236 | margin-right: 86.5%; 237 | } 238 | .column.#{$name}-push-eleven { 239 | margin-left: 95.15%; 240 | } 241 | .column.right.#{$name}-push-eleven { 242 | margin-right: 95.15%; 243 | } 244 | 245 | 246 | 247 | /*No gutters*/ 248 | .column.#{$name}-one.reset { 249 | width: 8.3%; 250 | } 251 | .column.#{$name}-two.reset, 252 | .column.#{$name}-sixth.reset { 253 | width: 16.65%; 254 | } 255 | .column.#{$name}-three.reset, 256 | .column.#{$name}-fourth.reset { 257 | width: 25%; 258 | } 259 | .column.#{$name}-four.reset, 260 | .column.#{$name}-twosixths.reset, 261 | .column.#{$name}-third.reset { 262 | width: 33.3%; 263 | } 264 | .column.#{$name}-five.reset { 265 | width: 41.65%; 266 | } 267 | .column.#{$name}-six.reset, 268 | .column.#{$name}-half.reset, 269 | .column.#{$name}-threesixths.reset, 270 | .column.#{$name}-twofourths.reset { 271 | width: 50%; 272 | } 273 | .column.#{$name}-seven.reset { 274 | width: 58.3%; 275 | } 276 | .column.#{$name}-eight.reset, 277 | .column.#{$name}-foursixths.reset, 278 | .column.#{$name}-twothirds.reset { 279 | width: 66.6%; 280 | } 281 | .column.#{$name}-nine.reset, 282 | .column.#{$name}-threefourths.reset { 283 | width: 75%; 284 | } 285 | .column.#{$name}-ten.reset, 286 | .column.#{$name}-fivesixths.reset { 287 | width: 83.35%; 288 | } 289 | .column.#{$name}-eleven.reset { 290 | width: 91.7%; 291 | } 292 | .column.#{$name}-full.reset, 293 | .column.#{$name}-twelve.reset { 294 | width: 100%; 295 | } 296 | 297 | /*Shift no-gutter columns*/ 298 | .column.reset.#{$name}-push-one { 299 | margin-left: 8.3%; 300 | } 301 | .column.reset.right.#{$name}-push-one { 302 | margin-right: 8.3%; 303 | } 304 | .column.reset.#{$name}-push-two, 305 | .column.reset.#{$name}-push-sixth { 306 | margin-left: 16.65%; 307 | } 308 | .column.reset.right.#{$name}-push-two, 309 | .column.reset.right.#{$name}-push-sixth { 310 | margin-right: 16.65%; 311 | } 312 | .column.reset.#{$name}-push-three, 313 | .column.reset.#{$name}-push-fourth { 314 | margin-left: 25%; 315 | } 316 | .column.reset.right.#{$name}-push-three, 317 | .column.reset.right.#{$name}-push-fourth { 318 | margin-right: 25%; 319 | } 320 | .column.reset.#{$name}-push-four, 321 | .column.reset.#{$name}-push-twosixths, 322 | .column.reset.#{$name}-push-third { 323 | margin-left: 33.3%; 324 | } 325 | .column.reset.right.#{$name}-push-four, 326 | .column.reset.right.#{$name}-push-twosixths, 327 | .column.reset.right.#{$name}-push-third { 328 | margin-right: 33.3%; 329 | } 330 | .column.reset.#{$name}-push-five { 331 | margin-left: 41.65%; 332 | } 333 | .column.reset.right.#{$name}-push-five { 334 | margin-right: 41.65%; 335 | } 336 | .column.reset.#{$name}-push-six, 337 | .column.reset.#{$name}-push-half, 338 | .column.reset.#{$name}-push-threesixths, 339 | .column.reset.#{$name}-push-twofourths { 340 | margin-left: 50%; 341 | } 342 | .column.reset.right.#{$name}-push-six, 343 | .column.right.reset.#{$name}-push-half, 344 | .column.right.reset.#{$name}-push-threesixths, 345 | .column.right.reset.#{$name}-push-twofourths { 346 | margin-right: 50%; 347 | } 348 | .column.reset.#{$name}-push-seven { 349 | margin-left: 58.3%; 350 | } 351 | .column.reset.right.#{$name}-push-seven { 352 | margin-right: 58.3%; 353 | } 354 | .column.reset.#{$name}-push-eight, 355 | .column.reset.#{$name}-push-foursixths, 356 | .column.reset.#{$name}-push-twothirds { 357 | margin-left: 66.6%; 358 | } 359 | .column.reset.right.#{$name}-push-eight, 360 | .column.reset.right.#{$name}-push-foursixths, 361 | .column.reset.right.#{$name}-push-twothirds { 362 | margin-right: 66.6%; 363 | } 364 | .column.reset.#{$name}-push-nine, 365 | .column.reset.#{$name}-push-threefourths { 366 | margin-left: 75%; 367 | } 368 | .column.reset.right.#{$name}-push-nine, 369 | .column.reset.right.#{$name}-push-threefourths { 370 | margin-right: 75%; 371 | } 372 | .column.reset.#{$name}-push-ten, 373 | .column.reset.#{$name}-push-fivesixths { 374 | margin-left: 83.35%; 375 | } 376 | .column.reset.right.#{$name}-push-ten, 377 | .column.reset.right.#{$name}-push-fivesixths { 378 | margin-right: 83.35%; 379 | } 380 | .column.reset.#{$name}-push-eleven { 381 | margin-left: 91.7%; 382 | } 383 | .column.reset.right.#{$name}-push-eleven { 384 | margin-right: 91.7%; 385 | } 386 | 387 | 388 | 389 | /*First column in the series*/ 390 | .column.#{$name}-first, 391 | .column.first.#{$name}-first { 392 | clear: both; 393 | } 394 | 395 | /*Last column in the series*/ 396 | .column.#{$name}-last, 397 | .column.last.#{$name}-last { 398 | margin-right: 0; 399 | } 400 | .column.right.#{$name}-last, 401 | .column.right.last.#{$name}-last { 402 | margin-left: 0; 403 | } 404 | 405 | 406 | 407 | /*Break columns after this*/ 408 | .column.#{$name}-break { 409 | width: auto !important; 410 | float: none !important; 411 | clear: both !important; 412 | margin-right: 0 !important; 413 | margin-left: 0 !important; 414 | } 415 | 416 | } 417 | 418 | } 419 | -------------------------------------------------------------------------------- /source/mixins/responsive.scss: -------------------------------------------------------------------------------- 1 | // Actual CSS code is here 2 | @import './responsive-first'; 3 | @import './responsive-consecutive'; 4 | 5 | @mixin responsive ($breakpoints) { 6 | /* 7 | Layers CSS 1.2.0 8 | Docs: https://layers-css.vercel.app 9 | Source: https://github.com/jerryjappinen/layers-css 10 | */ 11 | 12 | // NOTE: when compiling, pass the appropriate variables to get the right output 13 | @for $i from 1 through length($breakpoints) { 14 | // $breakpoint: $breakpoints.nth($i); 15 | $breakpoint: nth($breakpoints, $i); 16 | $breakpoint-name: nth($breakpoint, 1); 17 | $breakpoint-width: nth($breakpoint, 2); 18 | $breakpoint-barely-width: nth($breakpoint, 3); 19 | 20 | @if $i == 1 { 21 | @include responsive-first($breakpoint-name, $breakpoint-width, $breakpoint-barely-width); 22 | } @else { 23 | $previous: nth($breakpoints, $i - 1); 24 | $previous-name: nth($previous, 1); 25 | 26 | @include responsive-consecutive($previous-name, $breakpoint-name, $breakpoint-width, $breakpoint-barely-width); 27 | } 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /source/responsive/2-small.css: -------------------------------------------------------------------------------- 1 | /* 2 | Layers CSS 1.2.0 3 | Released by Jerry Jäppinen under the MIT license 4 | https://layers-css.vercel.app/layers-css 5 | 2015-05-29 13:40 UTC 6 | */ 7 | @media handheld, only screen and (max-width: 24.9375em) { 8 | 9 | /*Show/hide*/ 10 | .hidden-under-tiny { 11 | display: none; 12 | } 13 | 14 | } 15 | @media handheld, only screen and (min-width: 25em) { 16 | 17 | /*Show/hide*/ 18 | .hidden-over-tiny { 19 | display: none; 20 | } 21 | 22 | /*Width limit*/ 23 | .limit-tiny { 24 | max-width: 25em; 25 | } 26 | 27 | /*Roll back default first-in-line behavior*/ 28 | .column.first[class^="tiny-"], 29 | .column.first[class*=" tiny-"] { 30 | clear: none; 31 | } 32 | 33 | /*Roll back default last-in-line behavior*/ 34 | .column.last[class^="tiny-"], 35 | .column.last[class*=" tiny-"] { 36 | margin-right: 3.8%; 37 | } 38 | 39 | /*Roll back default last-in-line behavior*/ 40 | .column.right.last[class^="tiny-"], 41 | .column.right.last[class*=" tiny-"] { 42 | margin-left: 3.8%; 43 | } 44 | 45 | 46 | 47 | /*Column basics*/ 48 | .column[class^="tiny-"], 49 | .column[class*=" tiny-"] { 50 | clear: none; 51 | float: left; 52 | min-height: 1px; 53 | margin-left: 0; 54 | margin-right: 3.8%; 55 | } 56 | .column.right[class^="tiny-"], 57 | .column.right[class*=" tiny-"] { 58 | float: right; 59 | margin-right: 0; 60 | margin-left: 3.8%; 61 | } 62 | .column.reset[class^="tiny-"], 63 | .column.reset[class*=" tiny-"] { 64 | margin-right: 0; 65 | margin-left: 0; 66 | } 67 | 68 | /*Full-width column*/ 69 | .column.tiny-full, 70 | .column.tiny-twelve { 71 | width: 100%; 72 | } 73 | 74 | 75 | 76 | /*Fifth*/ 77 | .column.tiny-fifth { 78 | width: 16.95%; 79 | } 80 | .column.tiny-twofifths { 81 | width: 37.70%; 82 | } 83 | .column.tiny-threefifths { 84 | width: 58.45%; 85 | } 86 | .column.tiny-fourfifths { 87 | width: 79.20%; 88 | } 89 | .column.tiny-push-fifth { 90 | margin-left: 20.45%; 91 | } 92 | .column.tiny-right.push-fifth { 93 | margin-right: 20.45%; 94 | } 95 | .column.tiny-push-twofifths { 96 | margin-left: 41.50%; 97 | } 98 | .column.tiny-right.push-twofifths { 99 | margin-right: 41.50%; 100 | } 101 | .column.tiny-push-threefifths { 102 | margin-left: 62.25%; 103 | } 104 | .column.tiny-right.push-threefifths { 105 | margin-right: 62.25%; 106 | } 107 | .column.tiny-push-fourfifths { 108 | margin-left: 83.00%; 109 | } 110 | .column.tiny-right.push-fourfifths { 111 | margin-right: 83.00%; 112 | } 113 | 114 | /*Fluid column widths*/ 115 | .column.tiny-one { 116 | width: 4.85%; 117 | } 118 | .column.tiny-two, 119 | .column.tiny-sixth { 120 | width: 13.45%; 121 | } 122 | .column.tiny-three, 123 | .column.tiny-fourth { 124 | width: 22.05%; 125 | } 126 | .column.tiny-four, 127 | .column.tiny-twosixths, 128 | .column.tiny-third { 129 | width: 30.75%; 130 | } 131 | .column.tiny-five { 132 | width: 39.45%; 133 | } 134 | .column.tiny-six, 135 | .column.tiny-half, 136 | .column.tiny-threesixths, 137 | .column.tiny-twofourths { 138 | width: 48%; 139 | } 140 | .column.tiny-seven { 141 | width: 56.75%; 142 | } 143 | .column.tiny-eight, 144 | .column.tiny-foursixths, 145 | .column.tiny-twothirds { 146 | width: 65.4%; 147 | } 148 | .column.tiny-nine, 149 | .column.tiny-threefourths { 150 | width: 74.05%; 151 | } 152 | .column.tiny-ten, 153 | .column.tiny-fivesixths { 154 | width: 82.7%; 155 | } 156 | .column.tiny-eleven { 157 | width: 91.35%; 158 | } 159 | 160 | /*Shift guttered columns*/ 161 | .column.tiny-push-one { 162 | margin-left: 8.65%; 163 | } 164 | .column.right.tiny-push-one { 165 | margin-right: 8.65%; 166 | } 167 | .column.tiny-push-two, 168 | .column.tiny-push-sixth { 169 | margin-left: 17.25%; 170 | } 171 | .column.right.tiny-push-two, 172 | .column.right.tiny-push-sixth { 173 | margin-right: 17.25%; 174 | } 175 | .column.tiny-push-three, 176 | .column.tiny-push-fourth { 177 | margin-left: 25.85%; 178 | } 179 | .column.right.tiny-push-three, 180 | .column.right.tiny-push-fourth { 181 | margin-right: 25.85%; 182 | } 183 | .column.tiny-push-four, 184 | .column.tiny-push-twosixths, 185 | .column.tiny-push-third { 186 | margin-left: 34.55%; 187 | } 188 | .column.right.tiny-push-four, 189 | .column.right.tiny-push-twosixths, 190 | .column.right.tiny-push-third { 191 | margin-right: 34.55%; 192 | } 193 | .column.tiny-push-five { 194 | margin-left: 43.25%; 195 | } 196 | .column.right.tiny-push-five { 197 | margin-right: 43.25%; 198 | } 199 | .column.tiny-push-six, 200 | .column.tiny-push-half, 201 | .column.tiny-push-threesixths, 202 | .column.tiny-push-twofourths { 203 | margin-left: 51.8%; 204 | } 205 | .column.right.tiny-push-six, 206 | .column.right.tiny-push-half, 207 | .column.right.tiny-push-threesixths, 208 | .column.right.tiny-push-twofourths { 209 | margin-right: 51.8%; 210 | } 211 | .column.tiny-push-seven { 212 | margin-left: 60.55%; 213 | } 214 | .column.right.tiny-push-seven { 215 | margin-right: 60.55%; 216 | } 217 | .column.tiny-push-eight, 218 | .column.tiny-push-foursixths, 219 | .column.tiny-push-twothirds { 220 | margin-left: 69.2%; 221 | } 222 | .column.right.tiny-push-eight, 223 | .column.right.tiny-push-foursixths, 224 | .column.right.tiny-push-twothirds { 225 | margin-right: 69.2%; 226 | } 227 | .column.tiny-push-nine, 228 | .column.tiny-push-threefourths { 229 | margin-left: 77.85%; 230 | } 231 | .column.right.tiny-push-nine, 232 | .column.right.tiny-push-threefourths { 233 | margin-right: 77.85%; 234 | } 235 | .column.tiny-push-ten, 236 | .column.tiny-push-fivesixths { 237 | margin-left: 86.5%; 238 | } 239 | .column.right.tiny-push-ten, 240 | .column.right.tiny-push-fivesixths { 241 | margin-right: 86.5%; 242 | } 243 | .column.tiny-push-eleven { 244 | margin-left: 95.15%; 245 | } 246 | .column.right.tiny-push-eleven { 247 | margin-right: 95.15%; 248 | } 249 | 250 | 251 | 252 | /*No gutters*/ 253 | .column.tiny-one.reset { 254 | width: 8.3%; 255 | } 256 | .column.tiny-two.reset, 257 | .column.tiny-sixth.reset { 258 | width: 16.65%; 259 | } 260 | .column.tiny-three.reset, 261 | .column.tiny-fourth.reset { 262 | width: 25%; 263 | } 264 | .column.tiny-four.reset, 265 | .column.tiny-twosixths.reset, 266 | .column.tiny-third.reset { 267 | width: 33.3%; 268 | } 269 | .column.tiny-five.reset { 270 | width: 41.65%; 271 | } 272 | .column.tiny-six.reset, 273 | .column.tiny-half.reset, 274 | .column.tiny-threesixths.reset, 275 | .column.tiny-twofourths.reset { 276 | width: 50%; 277 | } 278 | .column.tiny-seven.reset { 279 | width: 58.3%; 280 | } 281 | .column.tiny-eight.reset, 282 | .column.tiny-foursixths.reset, 283 | .column.tiny-twothirds.reset { 284 | width: 66.6%; 285 | } 286 | .column.tiny-nine.reset, 287 | .column.tiny-threefourths.reset { 288 | width: 75%; 289 | } 290 | .column.tiny-ten.reset, 291 | .column.tiny-fivesixths.reset { 292 | width: 83.35%; 293 | } 294 | .column.tiny-eleven.reset { 295 | width: 91.7%; 296 | } 297 | .column.tiny-full.reset, 298 | .column.tiny-twelve.reset { 299 | width: 100%; 300 | } 301 | 302 | /*Shift no-gutter columns*/ 303 | .column.reset.tiny-push-one { 304 | margin-left: 8.3%; 305 | } 306 | .column.reset.right.tiny-push-one { 307 | margin-right: 8.3%; 308 | } 309 | .column.reset.tiny-push-two, 310 | .column.reset.tiny-push-sixth { 311 | margin-left: 16.65%; 312 | } 313 | .column.reset.right.tiny-push-two, 314 | .column.reset.right.tiny-push-sixth { 315 | margin-right: 16.65%; 316 | } 317 | .column.reset.tiny-push-three, 318 | .column.reset.tiny-push-fourth { 319 | margin-left: 25%; 320 | } 321 | .column.reset.right.tiny-push-three, 322 | .column.reset.right.tiny-push-fourth { 323 | margin-right: 25%; 324 | } 325 | .column.reset.tiny-push-four, 326 | .column.reset.tiny-push-twosixths, 327 | .column.reset.tiny-push-third { 328 | margin-left: 33.3%; 329 | } 330 | .column.reset.right.tiny-push-four, 331 | .column.reset.right.tiny-push-twosixths, 332 | .column.reset.right.tiny-push-third { 333 | margin-right: 33.3%; 334 | } 335 | .column.reset.tiny-push-five { 336 | margin-left: 41.65%; 337 | } 338 | .column.reset.right.tiny-push-five { 339 | margin-right: 41.65%; 340 | } 341 | .column.reset.tiny-push-six, 342 | .column.reset.tiny-push-half, 343 | .column.reset.tiny-push-threesixths, 344 | .column.reset.tiny-push-twofourths { 345 | margin-left: 50%; 346 | } 347 | .column.reset.right.tiny-push-six, 348 | .column.right.reset.tiny-push-half, 349 | .column.right.reset.tiny-push-threesixths, 350 | .column.right.reset.tiny-push-twofourths { 351 | margin-right: 50%; 352 | } 353 | .column.reset.tiny-push-seven { 354 | margin-left: 58.3%; 355 | } 356 | .column.reset.right.tiny-push-seven { 357 | margin-right: 58.3%; 358 | } 359 | .column.reset.tiny-push-eight, 360 | .column.reset.tiny-push-foursixths, 361 | .column.reset.tiny-push-twothirds { 362 | margin-left: 66.6%; 363 | } 364 | .column.reset.right.tiny-push-eight, 365 | .column.reset.right.tiny-push-foursixths, 366 | .column.reset.right.tiny-push-twothirds { 367 | margin-right: 66.6%; 368 | } 369 | .column.reset.tiny-push-nine, 370 | .column.reset.tiny-push-threefourths { 371 | margin-left: 75%; 372 | } 373 | .column.reset.right.tiny-push-nine, 374 | .column.reset.right.tiny-push-threefourths { 375 | margin-right: 75%; 376 | } 377 | .column.reset.tiny-push-ten, 378 | .column.reset.tiny-push-fivesixths { 379 | margin-left: 83.35%; 380 | } 381 | .column.reset.right.tiny-push-ten, 382 | .column.reset.right.tiny-push-fivesixths { 383 | margin-right: 83.35%; 384 | } 385 | .column.reset.tiny-push-eleven { 386 | margin-left: 91.7%; 387 | } 388 | .column.reset.right.tiny-push-eleven { 389 | margin-right: 91.7%; 390 | } 391 | 392 | 393 | 394 | /*First column in the series*/ 395 | .column.tiny-first, 396 | .column.first.tiny-first { 397 | clear: both; 398 | } 399 | 400 | /*Last column in the series*/ 401 | .column.tiny-last, 402 | .column.last.tiny-last { 403 | margin-right: 0; 404 | } 405 | .column.right.tiny-last, 406 | .column.right.last.tiny-last { 407 | margin-left: 0; 408 | } 409 | 410 | 411 | 412 | /*Break columns after this*/ 413 | .column.tiny-break { 414 | width: auto !important; 415 | float: none !important; 416 | clear: both !important; 417 | margin-right: 0 !important; 418 | margin-left: 0 !important; 419 | } 420 | 421 | } -------------------------------------------------------------------------------- /source/responsive/3-medium.css: -------------------------------------------------------------------------------- 1 | @media handheld, only screen and (max-width: 39.9375em) { 2 | 3 | /*Show/hide*/ 4 | .hidden-under-small { 5 | display: none; 6 | } 7 | 8 | } 9 | @media handheld, only screen and (min-width: 40em) { 10 | 11 | /*Show/hide*/ 12 | .hidden-over-small { 13 | display: none; 14 | } 15 | 16 | /*Width limit*/ 17 | .limit-small { 18 | max-width: 40em; 19 | } 20 | 21 | 22 | 23 | /*Roll back default first-in-line behavior*/ 24 | .column.first[class^="small-"], 25 | .column.first[class*=" small-"] { 26 | clear: none; 27 | } 28 | 29 | /*Roll back first-in-line behavior of the previous break point set*/ 30 | .column.tiny-first[class^="small-"], 31 | .column.tiny-first[class*=" small-"] { 32 | clear: none; 33 | } 34 | 35 | 36 | 37 | /*Roll back default last-in-line behavior*/ 38 | .column.last[class^="small-"], 39 | .column.last[class*=" small-"], 40 | 41 | /*Roll back last-in-line behavior of the previous break point set*/ 42 | .column.tiny-last[class^="small-"], 43 | .column.tiny-last[class*=" small-"] { 44 | margin-right: 3.8%; 45 | } 46 | 47 | /*Roll back default last-in-line behavior*/ 48 | .column.right.last[class^="small-"], 49 | .column.right.last[class*=" small-"], 50 | 51 | /*Roll back last-in-line behavior of the previous break point set*/ 52 | .column.right.tiny-last[class^="small-"], 53 | .column.right.tiny-last[class*=" small-"] { 54 | margin-left: 3.8%; 55 | } 56 | 57 | 58 | 59 | /*Column basics*/ 60 | .column[class^="small-"], 61 | .column[class*=" small-"] { 62 | clear: none; 63 | float: left; 64 | min-height: 1px; 65 | margin-left: 0; 66 | margin-right: 3.8%; 67 | } 68 | .column.right[class^="small-"], 69 | .column.right[class*=" small-"] { 70 | float: right; 71 | margin-right: 0; 72 | margin-left: 3.8%; 73 | } 74 | .column.reset[class^="small-"], 75 | .column.reset[class*=" small-"] { 76 | margin-right: 0; 77 | margin-left: 0; 78 | } 79 | 80 | /*Full-width column*/ 81 | .column.small-full, 82 | .column.small-twelve { 83 | width: 100%; 84 | } 85 | 86 | 87 | 88 | /*Fifth*/ 89 | .column.small-fifth { 90 | width: 16.95%; 91 | } 92 | .column.small-twofifths { 93 | width: 37.70%; 94 | } 95 | .column.small-threefifths { 96 | width: 58.45%; 97 | } 98 | .column.small-fourfifths { 99 | width: 79.20%; 100 | } 101 | .column.small-push-fifth { 102 | margin-left: 20.45%; 103 | } 104 | .column.small-right.push-fifth { 105 | margin-right: 20.45%; 106 | } 107 | .column.small-push-twofifths { 108 | margin-left: 41.50%; 109 | } 110 | .column.small-right.push-twofifths { 111 | margin-right: 41.50%; 112 | } 113 | .column.small-push-threefifths { 114 | margin-left: 62.25%; 115 | } 116 | .column.small-right.push-threefifths { 117 | margin-right: 62.25%; 118 | } 119 | .column.small-push-fourfifths { 120 | margin-left: 83.00%; 121 | } 122 | .column.small-right.push-fourfifths { 123 | margin-right: 83.00%; 124 | } 125 | 126 | /*Fluid column widths*/ 127 | .column.small-one { 128 | width: 4.85%; 129 | } 130 | .column.small-two, 131 | .column.small-sixth { 132 | width: 13.45%; 133 | } 134 | .column.small-three, 135 | .column.small-fourth { 136 | width: 22.05%; 137 | } 138 | .column.small-four, 139 | .column.small-twosixths, 140 | .column.small-third { 141 | width: 30.75%; 142 | } 143 | .column.small-five { 144 | width: 39.45%; 145 | } 146 | .column.small-six, 147 | .column.small-half, 148 | .column.small-threesixths, 149 | .column.small-twofourths { 150 | width: 48%; 151 | } 152 | .column.small-seven { 153 | width: 56.75%; 154 | } 155 | .column.small-eight, 156 | .column.small-foursixths, 157 | .column.small-twothirds { 158 | width: 65.4%; 159 | } 160 | .column.small-nine, 161 | .column.small-threefourths { 162 | width: 74.05%; 163 | } 164 | .column.small-ten, 165 | .column.small-fivesixths { 166 | width: 82.7%; 167 | } 168 | .column.small-eleven { 169 | width: 91.35%; 170 | } 171 | .column.small-full.reset, 172 | .column.small-twelve.reset { 173 | width: 100%; 174 | } 175 | 176 | /*Shift guttered columns*/ 177 | .column.small-push-one { 178 | margin-left: 8.65%; 179 | } 180 | .column.right.small-push-one { 181 | margin-right: 8.65%; 182 | } 183 | .column.small-push-two, 184 | .column.small-push-sixth { 185 | margin-left: 17.25%; 186 | } 187 | .column.right.small-push-two, 188 | .column.right.small-push-sixth { 189 | margin-right: 17.25%; 190 | } 191 | .column.small-push-three, 192 | .column.small-push-fourth { 193 | margin-left: 25.85%; 194 | } 195 | .column.right.small-push-three, 196 | .column.right.small-push-fourth { 197 | margin-right: 25.85%; 198 | } 199 | .column.small-push-four, 200 | .column.small-push-twosixths, 201 | .column.small-push-third { 202 | margin-left: 34.55%; 203 | } 204 | .column.right.small-push-four, 205 | .column.right.small-push-twosixths, 206 | .column.right.small-push-third { 207 | margin-right: 34.55%; 208 | } 209 | .column.small-push-five { 210 | margin-left: 43.25%; 211 | } 212 | .column.right.small-push-five { 213 | margin-right: 43.25%; 214 | } 215 | .column.small-push-six, 216 | .column.small-push-half, 217 | .column.small-push-threesixths, 218 | .column.small-push-twofourths { 219 | margin-left: 51.8%; 220 | } 221 | .column.right.small-push-six, 222 | .column.right.small-push-half, 223 | .column.right.small-push-threesixths, 224 | .column.right.small-push-twofourths { 225 | margin-right: 51.8%; 226 | } 227 | .column.small-push-seven { 228 | margin-left: 60.55%; 229 | } 230 | .column.right.small-push-seven { 231 | margin-right: 60.55%; 232 | } 233 | .column.small-push-eight, 234 | .column.small-push-foursixths, 235 | .column.small-push-twothirds { 236 | margin-left: 69.2%; 237 | } 238 | .column.right.small-push-eight, 239 | .column.right.small-push-foursixths, 240 | .column.right.small-push-twothirds { 241 | margin-right: 69.2%; 242 | } 243 | .column.small-push-nine, 244 | .column.small-push-threefourths { 245 | margin-left: 77.85%; 246 | } 247 | .column.right.small-push-nine, 248 | .column.right.small-push-threefourths { 249 | margin-right: 77.85%; 250 | } 251 | .column.small-push-ten, 252 | .column.small-push-fivesixths { 253 | margin-left: 86.5%; 254 | } 255 | .column.right.small-push-ten, 256 | .column.right.small-push-fivesixths { 257 | margin-right: 86.5%; 258 | } 259 | .column.small-push-eleven { 260 | margin-left: 95.15%; 261 | } 262 | .column.right.small-push-eleven { 263 | margin-right: 95.15%; 264 | } 265 | 266 | 267 | 268 | /*No gutters*/ 269 | .column.small-one.reset { 270 | width: 8.3%; 271 | } 272 | .column.small-two.reset, 273 | .column.small-sixth.reset { 274 | width: 16.65%; 275 | } 276 | .column.small-three.reset, 277 | .column.small-fourth.reset { 278 | width: 25%; 279 | } 280 | .column.small-four.reset, 281 | .column.small-twosixths.reset, 282 | .column.small-third.reset { 283 | width: 33.3%; 284 | } 285 | .column.small-five.reset { 286 | width: 41.65%; 287 | } 288 | .column.small-six.reset, 289 | .column.small-half.reset, 290 | .column.small-threesixths.reset, 291 | .column.small-twofourths.reset { 292 | width: 50%; 293 | } 294 | .column.small-seven.reset { 295 | width: 58.3%; 296 | } 297 | .column.small-eight.reset, 298 | .column.small-foursixths.reset, 299 | .column.small-twothirds.reset { 300 | width: 66.6%; 301 | } 302 | .column.small-nine.reset, 303 | .column.small-threefourths.reset { 304 | width: 75%; 305 | } 306 | .column.small-ten.reset, 307 | .column.small-fivesixths.reset { 308 | width: 83.35%; 309 | } 310 | .column.small-eleven.reset { 311 | width: 91.7%; 312 | } 313 | 314 | /*Shift no-gutter columns*/ 315 | .column.reset.small-push-one { 316 | margin-left: 8.3%; 317 | } 318 | .column.reset.right.small-push-one { 319 | margin-right: 8.3%; 320 | } 321 | .column.reset.small-push-two, 322 | .column.reset.small-push-sixth { 323 | margin-left: 16.65%; 324 | } 325 | .column.reset.right.small-push-two, 326 | .column.reset.right.small-push-sixth { 327 | margin-right: 16.65%; 328 | } 329 | .column.reset.small-push-three, 330 | .column.reset.small-push-fourth { 331 | margin-left: 25%; 332 | } 333 | .column.reset.right.small-push-three, 334 | .column.reset.right.small-push-fourth { 335 | margin-right: 25%; 336 | } 337 | .column.reset.small-push-four, 338 | .column.reset.small-push-twosixths, 339 | .column.reset.small-push-third { 340 | margin-left: 33.3%; 341 | } 342 | .column.reset.right.small-push-four, 343 | .column.reset.right.small-push-twosixths, 344 | .column.reset.right.small-push-third { 345 | margin-right: 33.3%; 346 | } 347 | .column.reset.small-push-five { 348 | margin-left: 41.65%; 349 | } 350 | .column.reset.right.small-push-five { 351 | margin-right: 41.65%; 352 | } 353 | .column.reset.small-push-six, 354 | .column.reset.small-push-half, 355 | .column.reset.small-push-threesixths, 356 | .column.reset.small-push-twofourths { 357 | margin-left: 50%; 358 | } 359 | .column.reset.right.small-push-six, 360 | .column.right.reset.small-push-half, 361 | .column.right.reset.small-push-threesixths, 362 | .column.right.reset.small-push-twofourths { 363 | margin-right: 50%; 364 | } 365 | .column.reset.small-push-seven { 366 | margin-left: 58.3%; 367 | } 368 | .column.reset.right.small-push-seven { 369 | margin-right: 58.3%; 370 | } 371 | .column.reset.small-push-eight, 372 | .column.reset.small-push-foursixths, 373 | .column.reset.small-push-twothirds { 374 | margin-left: 66.6%; 375 | } 376 | .column.reset.right.small-push-eight, 377 | .column.reset.right.small-push-foursixths, 378 | .column.reset.right.small-push-twothirds { 379 | margin-right: 66.6%; 380 | } 381 | .column.reset.small-push-nine, 382 | .column.reset.small-push-threefourths { 383 | margin-left: 75%; 384 | } 385 | .column.reset.right.small-push-nine, 386 | .column.reset.right.small-push-threefourths { 387 | margin-right: 75%; 388 | } 389 | .column.reset.small-push-ten, 390 | .column.reset.small-push-fivesixths { 391 | margin-left: 83.35%; 392 | } 393 | .column.reset.right.small-push-ten, 394 | .column.reset.right.small-push-fivesixths { 395 | margin-right: 83.35%; 396 | } 397 | .column.reset.small-push-eleven { 398 | margin-left: 91.7%; 399 | } 400 | .column.reset.right.small-push-eleven { 401 | margin-right: 91.7%; 402 | } 403 | 404 | 405 | 406 | /*First column in the series*/ 407 | .column.small-first[class^="small-"], 408 | .column.small-first[class*=" small-"] { 409 | clear: both; 410 | } 411 | 412 | /*Last column in this series*/ 413 | .column.small-last, 414 | 415 | /*Attribute selector matches because of the second class, but we need this for specificity*/ 416 | .column.small-last[class^="small-"], 417 | .column.small-last[class*=" small-"] { 418 | margin-right: 0; 419 | } 420 | 421 | /*The same for right-aligned columns*/ 422 | .column.right.small-last, 423 | .column.right.small-last[class^="small-"], 424 | .column.right.small-last[class*=" small-"] { 425 | margin-left: 0; 426 | } 427 | 428 | 429 | 430 | /*Break columns after this*/ 431 | .column.small-break { 432 | width: auto !important; 433 | float: none !important; 434 | clear: both !important; 435 | margin-right: 0 !important; 436 | margin-left: 0 !important; 437 | } 438 | 439 | } -------------------------------------------------------------------------------- /source/responsive/4-large.css: -------------------------------------------------------------------------------- 1 | @media handheld, only screen and (max-width: 69.9375em) { 2 | 3 | /*Show/hide*/ 4 | .hidden-under-medium { 5 | display: none; 6 | } 7 | 8 | } 9 | @media handheld, only screen and (min-width: 70em) { 10 | 11 | /*Show/hide*/ 12 | .hidden-over-medium { 13 | display: none; 14 | } 15 | 16 | /*Width limit*/ 17 | .limit-medium { 18 | max-width: 70em; 19 | } 20 | 21 | 22 | 23 | /*Roll back default first-in-line behavior*/ 24 | .column.first[class^="medium-"], 25 | .column.first[class*=" medium-"] { 26 | clear: none; 27 | } 28 | 29 | /*Roll back first-in-line behavior of the previous break point set*/ 30 | .column.small-first[class^="medium-"], 31 | .column.small-first[class*=" medium-"] { 32 | clear: none; 33 | } 34 | 35 | 36 | 37 | /*Roll back default last-in-line behavior*/ 38 | .column.last[class^="medium-"], 39 | .column.last[class*=" medium-"], 40 | 41 | /*Roll back last-in-line behavior of the previous break point set*/ 42 | .column.small-last[class^="medium-"], 43 | .column.small-last[class*=" medium-"] { 44 | margin-right: 3.8%; 45 | } 46 | 47 | /*Roll back default last-in-line behavior*/ 48 | .column.right.last[class^="medium-"], 49 | .column.right.last[class*=" medium-"], 50 | 51 | /*Roll back last-in-line behavior of the previous break point set*/ 52 | .column.right.small-last[class^="medium-"], 53 | .column.right.small-last[class*=" medium-"] { 54 | margin-left: 3.8%; 55 | } 56 | 57 | 58 | 59 | /*Column basics*/ 60 | .column[class^="medium-"], 61 | .column[class*=" medium-"] { 62 | clear: none; 63 | float: left; 64 | min-height: 1px; 65 | margin-left: 0; 66 | margin-right: 3.8%; 67 | } 68 | .column.right[class^="medium-"], 69 | .column.right[class*=" medium-"] { 70 | float: right; 71 | margin-right: 0; 72 | margin-left: 3.8%; 73 | } 74 | .column.reset[class^="medium-"], 75 | .column.reset[class*=" medium-"] { 76 | margin-right: 0; 77 | margin-left: 0; 78 | } 79 | 80 | /*Full-width column*/ 81 | .column.medium-full, 82 | .column.medium-twelve { 83 | width: 100%; 84 | } 85 | 86 | 87 | 88 | /*Fifth*/ 89 | .column.medium-fifth { 90 | width: 16.95%; 91 | } 92 | .column.medium-twofifths { 93 | width: 37.70%; 94 | } 95 | .column.medium-threefifths { 96 | width: 58.45%; 97 | } 98 | .column.medium-fourfifths { 99 | width: 79.20%; 100 | } 101 | .column.medium-push-fifth { 102 | margin-left: 20.45%; 103 | } 104 | .column.medium-right.push-fifth { 105 | margin-right: 20.45%; 106 | } 107 | .column.medium-push-twofifths { 108 | margin-left: 41.50%; 109 | } 110 | .column.medium-right.push-twofifths { 111 | margin-right: 41.50%; 112 | } 113 | .column.medium-push-threefifths { 114 | margin-left: 62.25%; 115 | } 116 | .column.medium-right.push-threefifths { 117 | margin-right: 62.25%; 118 | } 119 | .column.medium-push-fourfifths { 120 | margin-left: 83.00%; 121 | } 122 | .column.medium-right.push-fourfifths { 123 | margin-right: 83.00%; 124 | } 125 | 126 | /*Fluid column widths*/ 127 | .column.medium-one { 128 | width: 4.85%; 129 | } 130 | .column.medium-two, 131 | .column.medium-sixth { 132 | width: 13.45%; 133 | } 134 | .column.medium-three, 135 | .column.medium-fourth { 136 | width: 22.05%; 137 | } 138 | .column.medium-four, 139 | .column.medium-twosixths, 140 | .column.medium-third { 141 | width: 30.75%; 142 | } 143 | .column.medium-five { 144 | width: 39.45%; 145 | } 146 | .column.medium-six, 147 | .column.medium-half, 148 | .column.medium-threesixths, 149 | .column.medium-twofourths { 150 | width: 48%; 151 | } 152 | .column.medium-seven { 153 | width: 56.75%; 154 | } 155 | .column.medium-eight, 156 | .column.medium-foursixths, 157 | .column.medium-twothirds { 158 | width: 65.4%; 159 | } 160 | .column.medium-nine, 161 | .column.medium-threefourths { 162 | width: 74.05%; 163 | } 164 | .column.medium-ten, 165 | .column.medium-fivesixths { 166 | width: 82.7%; 167 | } 168 | .column.medium-eleven { 169 | width: 91.35%; 170 | } 171 | .column.medium-full.reset, 172 | .column.medium-twelve.reset { 173 | width: 100%; 174 | } 175 | 176 | /*Shift guttered columns*/ 177 | .column.medium-push-one { 178 | margin-left: 8.65%; 179 | } 180 | .column.right.medium-push-one { 181 | margin-right: 8.65%; 182 | } 183 | .column.medium-push-two, 184 | .column.medium-push-sixth { 185 | margin-left: 17.25%; 186 | } 187 | .column.right.medium-push-two, 188 | .column.right.medium-push-sixth { 189 | margin-right: 17.25%; 190 | } 191 | .column.medium-push-three, 192 | .column.medium-push-fourth { 193 | margin-left: 25.85%; 194 | } 195 | .column.right.medium-push-three, 196 | .column.right.medium-push-fourth { 197 | margin-right: 25.85%; 198 | } 199 | .column.medium-push-four, 200 | .column.medium-push-twosixths, 201 | .column.medium-push-third { 202 | margin-left: 34.55%; 203 | } 204 | .column.right.medium-push-four, 205 | .column.right.medium-push-twosixths, 206 | .column.right.medium-push-third { 207 | margin-right: 34.55%; 208 | } 209 | .column.medium-push-five { 210 | margin-left: 43.25%; 211 | } 212 | .column.right.medium-push-five { 213 | margin-right: 43.25%; 214 | } 215 | .column.medium-push-six, 216 | .column.medium-push-half, 217 | .column.medium-push-threesixths, 218 | .column.medium-push-twofourths { 219 | margin-left: 51.8%; 220 | } 221 | .column.right.medium-push-six, 222 | .column.right.medium-push-half, 223 | .column.right.medium-push-threesixths, 224 | .column.right.medium-push-twofourths { 225 | margin-right: 51.8%; 226 | } 227 | .column.medium-push-seven { 228 | margin-left: 60.55%; 229 | } 230 | .column.right.medium-push-seven { 231 | margin-right: 60.55%; 232 | } 233 | .column.medium-push-eight, 234 | .column.medium-push-foursixths, 235 | .column.medium-push-twothirds { 236 | margin-left: 69.2%; 237 | } 238 | .column.right.medium-push-eight, 239 | .column.right.medium-push-foursixths, 240 | .column.right.medium-push-twothirds { 241 | margin-right: 69.2%; 242 | } 243 | .column.medium-push-nine, 244 | .column.medium-push-threefourths { 245 | margin-left: 77.85%; 246 | } 247 | .column.right.medium-push-nine, 248 | .column.right.medium-push-threefourths { 249 | margin-right: 77.85%; 250 | } 251 | .column.medium-push-ten, 252 | .column.medium-push-fivesixths { 253 | margin-left: 86.5%; 254 | } 255 | .column.right.medium-push-ten, 256 | .column.right.medium-push-fivesixths { 257 | margin-right: 86.5%; 258 | } 259 | .column.medium-push-eleven { 260 | margin-left: 95.15%; 261 | } 262 | .column.right.medium-push-eleven { 263 | margin-right: 95.15%; 264 | } 265 | 266 | 267 | 268 | /*No gutters*/ 269 | .column.medium-one.reset { 270 | width: 8.3%; 271 | } 272 | .column.medium-two.reset, 273 | .column.medium-sixth.reset { 274 | width: 16.65%; 275 | } 276 | .column.medium-three.reset, 277 | .column.medium-fourth.reset { 278 | width: 25%; 279 | } 280 | .column.medium-four.reset, 281 | .column.medium-twosixths.reset, 282 | .column.medium-third.reset { 283 | width: 33.3%; 284 | } 285 | .column.medium-five.reset { 286 | width: 41.65%; 287 | } 288 | .column.medium-six.reset, 289 | .column.medium-half.reset, 290 | .column.medium-threesixths.reset, 291 | .column.medium-twofourths.reset { 292 | width: 50%; 293 | } 294 | .column.medium-seven.reset { 295 | width: 58.3%; 296 | } 297 | .column.medium-eight.reset, 298 | .column.medium-foursixths.reset, 299 | .column.medium-twothirds.reset { 300 | width: 66.6%; 301 | } 302 | .column.medium-nine.reset, 303 | .column.medium-threefourths.reset { 304 | width: 75%; 305 | } 306 | .column.medium-ten.reset, 307 | .column.medium-fivesixths.reset { 308 | width: 83.35%; 309 | } 310 | .column.medium-eleven.reset { 311 | width: 91.7%; 312 | } 313 | 314 | /*Shift no-gutter columns*/ 315 | .column.reset.medium-push-one { 316 | margin-left: 8.3%; 317 | } 318 | .column.reset.right.medium-push-one { 319 | margin-right: 8.3%; 320 | } 321 | .column.reset.medium-push-two, 322 | .column.reset.medium-push-sixth { 323 | margin-left: 16.65%; 324 | } 325 | .column.reset.right.medium-push-two, 326 | .column.reset.right.medium-push-sixth { 327 | margin-right: 16.65%; 328 | } 329 | .column.reset.medium-push-three, 330 | .column.reset.medium-push-fourth { 331 | margin-left: 25%; 332 | } 333 | .column.reset.right.medium-push-three, 334 | .column.reset.right.medium-push-fourth { 335 | margin-right: 25%; 336 | } 337 | .column.reset.medium-push-four, 338 | .column.reset.medium-push-twosixths, 339 | .column.reset.medium-push-third { 340 | margin-left: 33.3%; 341 | } 342 | .column.reset.right.medium-push-four, 343 | .column.reset.right.medium-push-twosixths, 344 | .column.reset.right.medium-push-third { 345 | margin-right: 33.3%; 346 | } 347 | .column.reset.medium-push-five { 348 | margin-left: 41.65%; 349 | } 350 | .column.reset.right.medium-push-five { 351 | margin-right: 41.65%; 352 | } 353 | .column.reset.medium-push-six, 354 | .column.reset.medium-push-half, 355 | .column.reset.medium-push-threesixths, 356 | .column.reset.medium-push-twofourths { 357 | margin-left: 50%; 358 | } 359 | .column.reset.right.medium-push-six, 360 | .column.right.reset.medium-push-half, 361 | .column.right.reset.medium-push-threesixths, 362 | .column.right.reset.medium-push-twofourths { 363 | margin-right: 50%; 364 | } 365 | .column.reset.medium-push-seven { 366 | margin-left: 58.3%; 367 | } 368 | .column.reset.right.medium-push-seven { 369 | margin-right: 58.3%; 370 | } 371 | .column.reset.medium-push-eight, 372 | .column.reset.medium-push-foursixths, 373 | .column.reset.medium-push-twothirds { 374 | margin-left: 66.6%; 375 | } 376 | .column.reset.right.medium-push-eight, 377 | .column.reset.right.medium-push-foursixths, 378 | .column.reset.right.medium-push-twothirds { 379 | margin-right: 66.6%; 380 | } 381 | .column.reset.medium-push-nine, 382 | .column.reset.medium-push-threefourths { 383 | margin-left: 75%; 384 | } 385 | .column.reset.right.medium-push-nine, 386 | .column.reset.right.medium-push-threefourths { 387 | margin-right: 75%; 388 | } 389 | .column.reset.medium-push-ten, 390 | .column.reset.medium-push-fivesixths { 391 | margin-left: 83.35%; 392 | } 393 | .column.reset.right.medium-push-ten, 394 | .column.reset.right.medium-push-fivesixths { 395 | margin-right: 83.35%; 396 | } 397 | .column.reset.medium-push-eleven { 398 | margin-left: 91.7%; 399 | } 400 | .column.reset.right.medium-push-eleven { 401 | margin-right: 91.7%; 402 | } 403 | 404 | 405 | 406 | /*First column in the series*/ 407 | .column.medium-first[class^="medium-"], 408 | .column.medium-first[class*=" medium-"] { 409 | clear: both; 410 | } 411 | 412 | /*Last column in this series*/ 413 | .column.medium-last, 414 | 415 | /*Attribute selector matches because of the second class, but we need this for specificity*/ 416 | .column.medium-last[class^="medium-"], 417 | .column.medium-last[class*=" medium-"] { 418 | margin-right: 0; 419 | } 420 | 421 | /*The same for right-aligned columns*/ 422 | .column.right.medium-last, 423 | .column.right.medium-last[class^="medium-"], 424 | .column.right.medium-last[class*=" medium-"] { 425 | margin-left: 0; 426 | } 427 | 428 | 429 | 430 | /*Break columns after this*/ 431 | .column.medium-break { 432 | width: auto !important; 433 | float: none !important; 434 | clear: both !important; 435 | margin-right: 0 !important; 436 | margin-left: 0 !important; 437 | } 438 | 439 | } -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "cleanUrls": true, 4 | "trailingSlash": false 5 | } 6 | --------------------------------------------------------------------------------