Applied to plain HTML (or skip to the code):
Last active
August 29, 2015 14:10
-
-
Save DTrejo/f4ff76d354751ad91498 to your computer and use it in GitHub Desktop.
Use the lobotomized owl selector in conjunction with margin auto and max-width for easy responsive single column sites. Inspired by http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
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
| * { | |
| margin-top: 0; | |
| } | |
| * + * { | |
| margin-top: 1.5rem; | |
| } | |
| html { | |
| font-size: 125%; | |
| line-height: 1.5; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| li, | |
| p, | |
| span { | |
| text-rendering: optimizeLegibility; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| ul, | |
| ol, | |
| p, | |
| .logos, | |
| hr { | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 300px; | |
| } | |
| @media screen and (min-width: 450px) { | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| ul, | |
| ol, | |
| p, | |
| .logos, | |
| hr { | |
| max-width: 430px; | |
| } | |
| } | |
| @media screen and (min-width: 543px) { | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| ul, | |
| ol, | |
| p, | |
| .logos, | |
| hr { | |
| max-width: 523px; | |
| } | |
| } | |
| @media screen and (min-width: 600px) { | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| ul, | |
| ol, | |
| p, | |
| .logos, | |
| hr { | |
| max-width: 590px; | |
| } | |
| } | |
| @media screen and (min-width: 680px) { | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| ul, | |
| ol, | |
| p, | |
| .logos, | |
| hr { | |
| max-width: 33rem; | |
| } | |
| } |
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
| // | |
| // spacing & flow | |
| // | |
| margin = 1.5rem | |
| * | |
| margin-top 0 | |
| * + * | |
| margin-top margin | |
| html | |
| // 1 rem is 20px | |
| font-size 125% | |
| line-height 1.5 | |
| h1, h2, h3, h4, h5, h6, li, p, span | |
| // MASSIVELY slows down page load when on body element :( | |
| text-rendering optimizeLegibility | |
| h1, h2, h3, h4, h5, h6, ul, ol, p, .logos, hr | |
| margin-left auto | |
| margin-right auto | |
| // gives 10px left and right space on iphone 3G | |
| max-width 300px | |
| @media screen and (min-width: 450px) | |
| max-width 430px | |
| @media screen and (min-width: 543px) | |
| max-width 523px | |
| // wider, with 10px breathing | |
| @media screen and (min-width: 600px) | |
| max-width 590px | |
| // big enough for 33em, with 10px breathing | |
| @media screen and (min-width: 680px) | |
| max-width 33rem |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
please i need help to run my npm ?
i have install node now need to run npm