Last active
August 29, 2015 14:27
-
-
Save tjbenton/1674d2e0e3337517e54a to your computer and use it in GitHub Desktop.
Very simple responsive example
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
| <main> | |
| <section> | |
| <h1>Section</h1> | |
| <h3>Lorem ipsum dolor sit amet</h3> | |
| <p>Consectetur adipisicing elit. Itaque omnis quisquam aut, adipisci molestiae odit ut dolorem voluptas minima molestias natus iusto dolorum inventore eaque error possimus nobis laboriosam cupiditate!</p> | |
| <h3>Lorem ipsum dolor sit amet</h3> | |
| <p>Consectetur adipisicing elit. Itaque omnis quisquam aut, adipisci molestiae odit ut dolorem voluptas minima molestias natus iusto dolorum inventore eaque error possimus nobis laboriosam cupiditate!</p> | |
| <h3>Lorem ipsum dolor sit amet</h3> | |
| <p>Consectetur adipisicing elit. Itaque omnis quisquam aut, adipisci molestiae odit ut dolorem voluptas minima molestias natus iusto dolorum inventore eaque error possimus nobis laboriosam cupiditate!</p> | |
| <h3>Lorem ipsum dolor sit amet</h3> | |
| <p>Consectetur adipisicing elit. Itaque omnis quisquam aut, adipisci molestiae odit ut dolorem voluptas minima molestias natus iusto dolorum inventore eaque error possimus nobis laboriosam cupiditate!</p> | |
| </section> | |
| <aside> | |
| <h3>Aside</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum odio, exercitationem possimus quae, molestiae ipsum repudiandae ducimus quisquam, et, est facere esse adipisci explicabo fugiat officiis quos sit pariatur! Fugiat id ullam error sit architecto, suscipit blanditiis explicabo, quibusdam, optio hic ad omnis. Aspernatur tempore voluptatum asperiores mollitia aliquid repudiandae assumenda, at voluptatibus officiis nam, perferendis voluptatem atque odio voluptates. Distinctio laboriosam ipsam officia doloremque voluptas facere voluptate sint esse laborum quae dolorem suscipit, aspernatur excepturi atque perspiciatis, quibusdam, deserunt et tempore ratione ut soluta vitae possimus quas. Mollitia quas tempore officia dicta, fuga esse nam accusamus id necessitatibus ratione.</p> | |
| </aside> | |
| </main> |
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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| @media (min-width: 600px) { | |
| section, | |
| aside { | |
| float: left; | |
| } | |
| section { | |
| width: 65%; | |
| } | |
| aside { | |
| width: 35%; | |
| } | |
| } | |
| /* demo styles, not important */ | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| } | |
| *:before, | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| * + * { | |
| margin-top: 1em; | |
| } | |
| html, | |
| body { | |
| font: 16px/1.4em Helvetica; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| section { | |
| background: #e2e2e2; | |
| padding: 1.4em; | |
| } | |
| aside { | |
| background: #cbcbcb; | |
| margin: 0; | |
| padding: 1.4em; | |
| } | |
| .u-clear:after { | |
| display: table; | |
| clear: both; | |
| content: ""; | |
| } |
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
| @media (min-width: 600px) { | |
| section, | |
| aside { | |
| float: left; | |
| } | |
| section { | |
| width: 65%; | |
| } | |
| aside { | |
| width: 35%; | |
| } | |
| } | |
| /* demo styles, not important */ | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| } | |
| *:before, | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| * + * { | |
| margin-top: 1em; | |
| } | |
| html, | |
| body { | |
| font: 16px/1.4em Helvetica; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| section { | |
| background: #e2e2e2; | |
| padding: 1.4em; | |
| } | |
| aside { | |
| background: #cbcbcb; | |
| margin: 0; | |
| padding: 1.4em; | |
| } | |
| .u-clear:after { | |
| display: table; | |
| clear: both; | |
| content: ""; | |
| } |
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
| <main> | |
| <section> | |
| <h1>Section</h1> | |
| <h3>Lorem ipsum dolor sit amet</h3> | |
| <p>Consectetur adipisicing elit. Itaque omnis quisquam aut, adipisci molestiae odit ut dolorem voluptas minima molestias natus iusto dolorum inventore eaque error possimus nobis laboriosam cupiditate!</p> | |
| <h3>Lorem ipsum dolor sit amet</h3> | |
| <p>Consectetur adipisicing elit. Itaque omnis quisquam aut, adipisci molestiae odit ut dolorem voluptas minima molestias natus iusto dolorum inventore eaque error possimus nobis laboriosam cupiditate!</p> | |
| <h3>Lorem ipsum dolor sit amet</h3> | |
| <p>Consectetur adipisicing elit. Itaque omnis quisquam aut, adipisci molestiae odit ut dolorem voluptas minima molestias natus iusto dolorum inventore eaque error possimus nobis laboriosam cupiditate!</p> | |
| <h3>Lorem ipsum dolor sit amet</h3> | |
| <p>Consectetur adipisicing elit. Itaque omnis quisquam aut, adipisci molestiae odit ut dolorem voluptas minima molestias natus iusto dolorum inventore eaque error possimus nobis laboriosam cupiditate!</p> | |
| </section> | |
| <aside> | |
| <h3>Aside</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum odio, exercitationem possimus quae, molestiae ipsum repudiandae ducimus quisquam, et, est facere esse adipisci explicabo fugiat officiis quos sit pariatur! Fugiat id ullam error sit architecto, suscipit blanditiis explicabo, quibusdam, optio hic ad omnis. Aspernatur tempore voluptatum asperiores mollitia aliquid repudiandae assumenda, at voluptatibus officiis nam, perferendis voluptatem atque odio voluptates. Distinctio laboriosam ipsam officia doloremque voluptas facere voluptate sint esse laborum quae dolorem suscipit, aspernatur excepturi atque perspiciatis, quibusdam, deserunt et tempore ratione ut soluta vitae possimus quas. Mollitia quas tempore officia dicta, fuga esse nam accusamus id necessitatibus ratione.</p> | |
| </aside> | |
| </main> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment