Created
July 16, 2013 19:43
-
-
Save kcjonson/6011962 to your computer and use it in GitHub Desktop.
Core CSS for Responsive Development Demonstration
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
| /* Redfin Basic Responsive Demo - CSS | |
| Eric Gideon & Kevin Jonson, 2013 | |
| For use with the HTML at https://gist.github.com/kcjonson/6011849 | |
| */ | |
| /* Reset */ | |
| /* http://meyerweb.com/eric/tools/css/reset/ | |
| v2.0 | 20110126 | |
| License: none (public domain) | |
| */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| /* Utility Classes */ | |
| .clearfix:after { | |
| content: ""; | |
| display: block; | |
| clear: both; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| /* Common page elements */ | |
| body { | |
| font-size: 16px; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| padding: 0 1em; | |
| } | |
| h1, h2, h3, p { | |
| margin: 1em 0; | |
| text-rendering: optimizeLegibility; | |
| } | |
| h1 { | |
| font-size: 3.6em; | |
| } | |
| h2 { | |
| font-size: 2.3em; | |
| } | |
| h3 { | |
| font-size: 1.3em; | |
| } | |
| p, | |
| ul { | |
| font-size: 1em; | |
| line-height: 1.4em; | |
| } | |
| p:first-child { | |
| margin-top: 0; | |
| } | |
| /* Basic page styles */ | |
| #siteheader { | |
| background: #ddd; | |
| padding: 0 1em; | |
| } | |
| #siteheader h1 { | |
| font-weight: 100; | |
| } | |
| nav#menu, | |
| nav.access a { | |
| color: #fff; | |
| background: #333; | |
| } | |
| nav.access { | |
| position: absolute; | |
| top: .6em; | |
| right: 1em; | |
| } | |
| nav.access a { | |
| display: block; | |
| font-size: 40px; | |
| line-height: 40px; | |
| height: 40px; | |
| width: 40px; | |
| padding: 4px; | |
| text-align: center; | |
| vertical-align: baseline; | |
| text-decoration: none; | |
| } | |
| nav#menu a { | |
| color: #fff; | |
| padding: 0 1em 0 0; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| } | |
| aside.more { | |
| background: #ccc; | |
| margin: 0 -1em; | |
| padding: 1em; | |
| } | |
| aside.more ul { | |
| padding: 0 1em; | |
| } | |
| footer { | |
| background: #555; | |
| color: #fff; | |
| padding: 2em 0; | |
| text-align: center; | |
| } | |
| /* Default Formatting: Small Screen */ | |
| .form .field > * { | |
| display: block; | |
| width: 100%; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box | |
| } | |
| .form .input { | |
| border: 1px solid #999999; | |
| border-radius: 2px; | |
| background: #ffffff; | |
| padding: .25em; | |
| font-size: 1em; | |
| margin: 0 0 1em 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment