| <style> | |
| /* Remove space around the email design. */ | |
| html, | |
| body { | |
| margin: 0 auto !important; | |
| padding: 0 !important; | |
| height: 100% !important; | |
| width: 100% !important; | |
| } |
| // clearfix | |
| @mixin clearfix { | |
| &::after { | |
| content: ""; | |
| display: block; | |
| clear: both; | |
| } | |
| } | |
| // edit font rendering -> tip: use for light text on dark backgrounds |
| // https://codepen.io/cmykw/pen/gemxJm | |
| // layout | |
| <nav/> | |
| // style | |
| <style> | |
| body { min-height: 200vh; } | |
| nav { |
FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.
| /** | |
| * Sass-Ready media queries | |
| * Here there are some presets of useful | |
| * media queries breakpoints for various devices | |
| * Usage: @media #{variable-name} { } | |
| * and it will compile to: @media variable-name { } | |
| * | |
| */ | |
| // Devices |
##Sass Functions Cheat Sheet
This is a collection of my most often used lines of code, as well as a few other examples I want to have ready at a moment's notice. These snippets focus on building HTML from scratch, linking in good web fonts, and setting up responsive styles for your pages.
⇐ back to the gist-blog at jrw.fi
Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.
This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso
| /* | |
| SCSS Color Methods for Accessibility | |
| ================================================================================ | |
| Adjust given colors to ensure that those color combination provide sufficient | |
| contrast. | |
| @version 0.1 | |
| @link http://eye48.com/go/scsscontrast |
