Last active
August 29, 2015 14:04
-
-
Save redroot/b9d366148d821b50eb02 to your computer and use it in GitHub Desktop.
SASS parts and HTML5 <html> tag
This file contains hidden or 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
| <!DOCTYPE html> | |
| <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | |
| <!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--> | |
| <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> | |
| <head> | |
| </head> | |
| <body> | |
| </body> | |
| </html> | |
| These conditional comments means the html tag will get classes that help you specify the version of IE to target | |
| e.g. on top on your normal '.header' statement, you could add '.lt-ie9 .header' to target IE8 and below users |
This file contains hidden or 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
| @mixin respond-to($media) { | |
| @if $media == mobile-portrait { | |
| @media only screen and (max-width: 479px) { @content; } | |
| }@else if $media == mobile-landscape { | |
| @media only screen and (min-width: 480px) and (max-width: 720px) { @content; } | |
| }@else if $media == mobile { | |
| @media only screen and (max-width: 720px) { @content; } | |
| }@else if $media == tablet { | |
| @media only screen and (min-width: 721px) and (max-width: 1079px) { @content; } | |
| }@else if $media == tablet-down { | |
| @media only screen and (max-width: 1079px) { @content; } | |
| }@else if $media == tablet-up { | |
| @media only screen and (min-width: 721px) { @content; } | |
| }@else if $media == wide { | |
| @media only screen and (min-width: 1080px) { @content; } | |
| } | |
| } | |
| // usage | |
| .header { | |
| background: blue; | |
| @include respond-to(tablet) { background: red; } | |
| @include respond-to(mobile) { background: green; } | |
| } |
This file contains hidden or 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
| // useful for the html statement above | |
| .header { | |
| background: blue; | |
| .lt-ie9 & { | |
| background: red; | |
| } | |
| } | |
| // renders: | |
| .header { background: blue; } | |
| .lt-ie9 .header { background: red; } |
This file contains hidden or 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
| // this is roughly how i order thing to keep them consitent | |
| // 1) any extends go at the top | |
| // 2) normal style for the selector nexts | |
| // 3) Any simple one-line include after this | |
| // 4) any modifiers, such as pseudo states, additional classes | |
| // 5) multiline includes, for mixins such as respond-to | |
| // 6) then sub elements, which have the same ordering inside them as well | |
| .button-red { | |
| @extend .button; | |
| font-style: bold; | |
| font-size: 18px; | |
| line-height: 24px; | |
| color: red; | |
| @include clearfix; | |
| @include equal-padding; | |
| &:hover { color: white; } | |
| &.button-large { font-size: 30px; } | |
| @include respond-to(mobile){ | |
| display: block; | |
| } | |
| // sub elements are the same | |
| .text-span { | |
| // same ordering | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment