Created
July 29, 2013 08:33
-
-
Save daneden/6102954 to your computer and use it in GitHub Desktop.
The starter stylesheet I use for nearly all my projects these days. Includes a Sublime Text snippet, activated by typing `css.starter` and hitting tab. Spits out the contents of s.css. Enjoy!
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
| <snippet> | |
| <content><![CDATA[ | |
| /*-----------------------------------*\ | |
| \$RESET | |
| Blanket reset. For something less | |
| volatile, I’d recommend Eric | |
| Meyer’s reset. | |
| \*-----------------------------------*/ | |
| /* Sloppy reset. Applied to everything. */ | |
| *, :before, :after { | |
| margin: 0; | |
| padding: 0; | |
| /* Layout for dummies */ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| position: relative; | |
| } | |
| /* Blanket ban on oversized images. */ | |
| img { | |
| max-width: 100%; | |
| } | |
| /*-----------------------------------*\ | |
| \$SHARED | |
| Reserved for html-level shared | |
| properties and simple helpers. | |
| \*-----------------------------------*/ | |
| /* Set up some vertical rhythm and block-level element helpers */ | |
| p, .p, blockquote, table, form, ul, ol, .img, | |
| h1, .alpha, h2, .beta, .mega, .ultra { | |
| display: block; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Remove this for hanging bullets */ | |
| ul, ol { | |
| padding-left: 1.3em; | |
| } | |
| /* Restore some normality to our nested lists */ | |
| li > ul, li > ol { | |
| margin-bottom: 0; | |
| } | |
| /*-----------------------------------*\ | |
| \$TYPE | |
| Low-level type things. Headings, | |
| links, blockquotes, etc. | |
| \*-----------------------------------*/ | |
| h1, .alpha { | |
| font-size: 3rem; | |
| line-height: 1; | |
| } | |
| h2, .beta { | |
| font-size: 2rem; | |
| line-height: 1.5; | |
| } | |
| h3 { | |
| font-size: 1rem; | |
| } | |
| /*-----------------------------------*\ | |
| \$OBJECTS | |
| Abstracted things and common | |
| patterns go here. Not to be | |
| confused with helpers. | |
| \*-----------------------------------*/ | |
| .nav, .nav ul { | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .nav li, .nav a { | |
| display: inline-block; | |
| } | |
| /*-----------------------------------*\ | |
| \$MAIN | |
| Anything that can’t be abstracted | |
| or assigned to another section. | |
| Low-level stuff. | |
| \*-----------------------------------*/ | |
| html { | |
| font: 120%/1.5 Georgia, serif; | |
| color: #222; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /*-----------------------------------*\ | |
| \$HEADER | |
| \*-----------------------------------*/ | |
| .site--header { | |
| } | |
| .site--title { | |
| } | |
| .site--nav { | |
| } | |
| /*-----------------------------------*\ | |
| \$POSTS | |
| \*-----------------------------------*/ | |
| .entry { | |
| } | |
| .entry--header { | |
| } | |
| .entry--title { | |
| } | |
| .entry--content { | |
| } | |
| /*-----------------------------------*\ | |
| \$PAGES | |
| \*-----------------------------------*/ | |
| ]]></content> | |
| <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> | |
| <tabTrigger>css.starter</tabTrigger> | |
| <!-- Optional: Set a scope to limit where the snippet will trigger --> | |
| <!-- <scope>source.css</scope> --> | |
| </snippet> |
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
| /*-----------------------------------*\ | |
| $RESET | |
| Blanket reset. For something less | |
| volatile, I’d recommend Eric | |
| Meyer’s reset. | |
| \*-----------------------------------*/ | |
| /* Sloppy reset. Applied to everything. */ | |
| *, :before, :after { | |
| margin: 0; | |
| padding: 0; | |
| /* Layout for dummies */ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| position: relative; | |
| } | |
| /* Blanket ban on oversized images. */ | |
| img { | |
| max-width: 100%; | |
| } | |
| /*-----------------------------------*\ | |
| $SHARED | |
| Reserved for html-level shared | |
| properties and simple helpers. | |
| \*-----------------------------------*/ | |
| /* Set up some vertical rhythm and block-level element helpers */ | |
| p, .p, blockquote, table, form, ul, ol, .img, | |
| h1, .alpha, h2, .beta, .mega, .ultra { | |
| display: block; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Remove this for hanging bullets */ | |
| ul, ol { | |
| padding-left: 1.3em; | |
| } | |
| /* Restore some normality to our nested lists */ | |
| li > ul, li > ol { | |
| margin-bottom: 0; | |
| } | |
| /*-----------------------------------*\ | |
| $TYPE | |
| Low-level type things. Headings, | |
| links, blockquotes, etc. | |
| \*-----------------------------------*/ | |
| h1, .alpha { | |
| font-size: 3rem; | |
| line-height: 1; | |
| } | |
| h2, .beta { | |
| font-size: 2rem; | |
| line-height: 1.5; | |
| } | |
| h3 { | |
| font-size: 1rem; | |
| } | |
| /*-----------------------------------*\ | |
| $OBJECTS | |
| Abstracted things and common | |
| patterns go here. Not to be | |
| confused with helpers. | |
| \*-----------------------------------*/ | |
| .nav, .nav ul { | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .nav li, .nav a { | |
| display: inline-block; | |
| } | |
| /*-----------------------------------*\ | |
| $MAIN | |
| Anything that can’t be abstracted | |
| or assigned to another section. | |
| Low-level stuff. | |
| \*-----------------------------------*/ | |
| html { | |
| font: 120%/1.5 Georgia, serif; | |
| color: #222; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /*-----------------------------------*\ | |
| $HEADER | |
| \*-----------------------------------*/ | |
| .site--header { | |
| } | |
| .site--title { | |
| } | |
| .site--nav { | |
| } | |
| /*-----------------------------------*\ | |
| $POSTS | |
| \*-----------------------------------*/ | |
| .entry { | |
| } | |
| .entry--header { | |
| } | |
| .entry--title { | |
| } | |
| .entry--content { | |
| } | |
| /*-----------------------------------*\ | |
| $PAGES | |
| \*-----------------------------------*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Are you following the BEM naming conventions? or is this your own approach?