Richard Powell byrichardpowell
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // INLINE LIST | |
| // An inline list is an object at its most basic level, e.g | |
| // A list where each item is displayed alongside each other | |
| // The .list-inline class styles ONLY the style needed for this type of list | |
| .list-inline { margin:0 0 @line 0; padding:0; display:inline-block;} | |
| .list-inline { | |
| > * { display:inline-block; margin:0; } | |
| li { list-style-type:none;} |
byrichardpowell
/ gist:3468636
Created
August 25, 2012 18:04
Use dashes to separate words in class names
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* GOOD: */ | |
| .my-class { /* Styles */ } | |
| /* BAD: */ | |
| .myClass { /* Styles */ } | |
| .MyClass { /* Styles */ } | |
| .my_class { /* Styles */ } |
byrichardpowell
/ gist:3468310
Created
August 25, 2012 17:38
Styling should be independent of markup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* BAD: This CSS (LESS) is highly dependant on specific markup */ | |
| header { /* Styles */ } | |
| header { | |
| section { /* Styles */ } | |
| h1 { /* Styles */ } | |
| small { /* Styles */ } | |
| nav { /* Styles */ } | |
| input[type=search] { /* Styles */ } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* BAD: */ | |
| #header-page { /* Styles */ } | |
| /* GOOD: */ | |
| .header-page { /* Styles */ } |
byrichardpowell
/ gist:3468161
Created
August 25, 2012 17:23
Structure CSS Logically & Provide an index
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 1. NORMALISE ======================================================== */ | |
| /* Normalises default styles cross browser. Like a gloabl reset but better */ | |
| /* 2. PAGE LAYOUT ==================================================== */ | |
| /* Header, footer, columns, main nav... stuff like that */ | |
| /* 3. FORMS ======================================================== */ | |
| /* Default form styles & specific forms */ | |
| /* 4. LISTS ========================================================= */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* The nav-trail object is clearly separated & namespaced using nested selectors */ | |
| .nav-trail { margin:0; padding:0; background:#ccc; } | |
| .nav-trail { | |
| .title { font-weigth:bold; } | |
| ul { margin:0; padding:10px; } | |
| li, | |
| a { dispaly:inline-block; } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* BAD: The following selectors should be avoided if possible */ | |
| .one .two .three .four { /* styles */ } | |
| .one ul li a { /* styles */ } | |
| .one ul a:hover { /* styles */ } | |
| .one ul li:first-child { /* styles */ } | |
| /* BAD: Pre-processed nested selectors */ | |
| .one { |
byrichardpowell
/ gist:3467313
Created
August 25, 2012 15:52
Make prefixes less painful using a preprocessor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* helpers.less */ | |
| .shadow (@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { | |
| -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); | |
| -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); | |
| -o-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); | |
| -ms-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); | |
| box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); | |
| } | |
| /* site.less */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .shadow { -webkit-box-shadow: 10px 10px 10px #000; | |
| -moz-box-shadow: 10px 10px 10px #000; | |
| -o-box-shadow: 10px 10px 10px #000; | |
| -ms-box-shadow: 10px 10px 10px #000; | |
| box-shadow: 10px 10px 10px #000; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DependencyMap = function( config ) { | |
| var Map = function( config ) { | |
| this.w = config.w; | |
| this.h = config.h; | |
| this.wrapper = config.wrapper; | |
| } |