Created
September 1, 2014 11:53
-
-
Save branquito/e008fb873b8656e8605f to your computer and use it in GitHub Desktop.
susy2 grid 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
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| .container { | |
| max-width: 1140px; | |
| margin-left: 0; | |
| margin-right: auto; | |
| background-image: linear-gradient(to right, rgba(0, 128, 0, 0.25), rgba(0, 204, 0, 0.25) 88.88889%, transparent 88.88889%); | |
| background-size: 8.41121%; | |
| background-origin: content-box; | |
| background-clip: content-box; | |
| background-position: left top; | |
| font-size: small; } | |
| .container:after { | |
| content: " "; | |
| display: block; | |
| clear: both; } | |
| .one { | |
| width: 66.35514%; | |
| float: left; | |
| margin-left: 16.82243%; | |
| margin-right: -100%; | |
| height: 200px; | |
| background-color: blue; | |
| color: white; } | |
| .buttons a { | |
| width: 15.49296%; | |
| float: left; | |
| margin-left: 8.4507%; | |
| margin-right: -100%; } | |
| .notice { | |
| clear: both; | |
| width: 100%; | |
| float: left; | |
| margin-left: 0; | |
| margin-right: 0; | |
| background-color: yellow; } | |
| .notice { | |
| padding: 5px 8px; } | |
| em { | |
| background-color: yellow; | |
| color: black; | |
| font-weight: bold; } |
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
| @import 'susy'; | |
| $susy: ( | |
| flow: ltr, | |
| output: float, | |
| math: fluid, | |
| // column-width: false, | |
| container: 1140px, | |
| container-position: left, | |
| last-flow: to, | |
| columns: 12, | |
| gutters: 1/8, | |
| gutter-position: after, | |
| global-box-sizing: border-box, | |
| debug: ( | |
| image: show, | |
| color: rgba(green, .25), | |
| output: background, | |
| toggle: top right | |
| ), | |
| ); | |
| @include global-box-sizing(border-box); | |
| .container { | |
| @include container; | |
| font-size: small; | |
| } | |
| .one { | |
| @include span(isolate 8 at 3); // can be narrow(default), wide & wider | |
| height: 200px; | |
| background-color: blue; | |
| color: white; | |
| } | |
| .buttons a { | |
| // @include break; | |
| @include span(isolate 2 at 2); | |
| } | |
| .notice { | |
| @include full; | |
| background-color: yellow; | |
| } | |
| .notice { | |
| padding: 5px 8px; | |
| } | |
| em { | |
| background-color: yellow; | |
| color: black; | |
| font-weight: bold; | |
| } |
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Working with Susy 2 Grid Layouts</title> | |
| <link rel="stylesheet" href="css/app.css" type="text/css" media="screen" title="no title" charset="utf-8"> | |
| <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" title="no title" charset="utf-8"> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"> | |
| </head> | |
| <body> | |
| <div class="notice"><h3>Susy is GREAT.. But really..!</h3></div> | |
| <div class="container"> | |
| <div class="one"><strong>1</strong><br /> | |
| @include span(8)<br /> | |
| @include prefix(1) <em>//padding</em><br /> | |
| </div> | |
| <div class="buttons"> | |
| <a href="#" class="pure-button">A Pure Button</a> | |
| </div> | |
| <div class="notice">this is some notice</div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment