Last active
December 25, 2015 02:29
-
-
Save lucasdinonolte/6902726 to your computer and use it in GitHub Desktop.
Getting Started Frontend Trail Solution
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
| source 'https://rubygems.org' | |
| gem 'compass' | |
| gem 'modular-scale' | |
| gem 'crispy-grid' |
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Grid Demo</title> | |
| <!-- or wherever your compiled css lives --> | |
| <link rel="stylesheet" type="text/css" href="css/main.css"> | |
| </head> | |
| <body> | |
| <div id="app-body"> | |
| <article id="app-content"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
| </article> | |
| <aside id="app-sidebar"> | |
| <p>Here is some sidebar content...</p> | |
| </aside> | |
| </div> | |
| </body> | |
| </html> |
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
| // Library Imports | |
| // --------------- | |
| @import compass/reset | |
| @import compass/css3 | |
| // Set up the horizontal grid system | |
| $device: desktop | |
| $grid-column-width: 55px | |
| // Use a gutter width of at least the baseline distance of the main copy | |
| $grid-gutter-width: 25px | |
| $grid-columns: 12 | |
| @import crispy/grid | |
| // Set up required Typography | |
| body | |
| margin-top: 100px | |
| color: #222 | |
| font: | |
| family: "Helvetica Neue", Helvetica, sans-serif | |
| size: 16px | |
| line-height: 1.6 | |
| // Set up the grid | |
| #app-body | |
| +grid-container | |
| #app-content | |
| +column(7) | |
| #app-sidebar | |
| +last-column(5) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This sets up the required grid layout with a typographic measure of max. 72 characters per line for
lorem ipsum.