Group items tagged

Filter: All | Bookmarks | Topics Simple Middle

shared by Vernon Fowler on 22 Jun 14 - Cached

shared by Vernon Fowler on 19 Jun 14 - No Cached

try to choose semantic names for your variables
...

Cancel
describe its function or purpose
...

Cancel
// Better $brand-color: red; $accent-color: yellow;
...

Cancel
...3 more annotations...
postfix color names with -color:
...

Cancel
add a prefix like header- or footer- for specific sections: // Header $header-height: 100px; $header-background-color: $color-brand; // Footer $footer-height: 200px; $footer-background-color: #aaa;
...

Cancel
I like to keep all my variables in a single file, called _config.scss, that I include in my primary stylesheet using the @import directive.
...

Cancel

shared by Vernon Fowler on 18 Jun 14 - No Cached

List @extend(s) First
...

Cancel
List "Regular" Styles Next
...

Cancel
List @include(s) Next
...

Cancel
...9 more annotations...
All Vendor Prefixes Use @mixins
...

Cancel
Global and Section-Specific Sass Files Are just Table of Contents In other words, no styles directly in them. Force yourself to keep all styles organized into component parts.
...

Cancel
If you find yourself using a number other than 0 or 100% over and over, it likely deserves a variable.
...

Cancel
List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts
...

Cancel
In Deployment, Compile Compressed
...

Cancel
Comments get stripped when compiling to compressed code, so there is no cost.
...

Cancel
Partials are named _partial.scss
...

Cancel
Variablize All Colors Except perhaps white and black.
...

Cancel
In your global stylesheet, @import a _shame.scss file last.
...

Cancel

shared by Vernon Fowler on 23 Jul 14 - No Cached

shared by Vernon Fowler on 30 Jul 14 - No Cached

shared by Vernon Fowler on 30 Jul 14 - No Cached

I'd use these rules-of-thumb for when :target is a good choice: When a "state" is needed When the jump-down behavior is acceptable When it's acceptable to affect the browser history
...

Cancel

shared by Vernon Fowler on 02 Mar 14 - No Cached

Use REM for consistent padding and margins
...

Cancel
update font sizes and padding within a media query
...

Cancel
@media screen and (min-width: 1400px) {   html { font-size: 1.25em; } }
...

Cancel
...2 more annotations...
If a style sheet is built in a modular fashion, then rem shouldn’t be needed very often, but it can be handy at times.
...

Cancel
The initial values are calculated by incrementing 1em(16px) at a 1:1.2 ratio.
...

Cancel

1 - 7 of 7

Showing 20▼ items per page