Created
August 15, 2012 15:18
-
-
Save gioele/3360968 to your computer and use it in GitHub Desktop.
Susy grid + padding problem https://github.com/ericam/susy/issues/98
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
| @import "compass/reset"; | |
| @import "susy"; | |
| $total-columns : 3; | |
| $column-width : 80%; | |
| $gutter-width : 20%; | |
| $grid-padding : 0; | |
| $container-width: 100%; | |
| $container-style: fluid; | |
| html { | |
| @include container; | |
| @include susy-grid-background; | |
| } | |
| body { | |
| @include push(1); | |
| @include span-columns(1); | |
| // the padding will make the element go over the column border | |
| padding-left: 2em; | |
| padding-right: 2em; | |
| } | |
| h1, h2 { | |
| font-weight: bold; | |
| margin-top: 2ex; | |
| margin-bottom: 2ex; | |
| } | |
| p { | |
| margin-bottom: 2ex; | |
| } |
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> | |
| <title>Susy grid padding test</title> | |
| <link href="grid-padding.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body> | |
| <h1>Heading</h1> | |
| <p>Sed faucibus, eros vitae molestie mollis, enim nunc convallis | |
| lacus, id aliquam est urna in justo. Etiam feugiat ornare nunc, consequat | |
| viverra augue ullamcorper id. Curabitur consectetur semper nulla, in pellentesque | |
| sapien dictum. Mauris auctor elementum mauris sed sodales. Maecenas eget congue | |
| nisl. Morbi suscipit lacus vitae ante tempor eget egestas nisl ullamcorper.</p> | |
| <p>Etiam vel purus dui. Aenean fringilla, ipsum non rhoncus | |
| varius, eros urna aliquam justo, vel tincidunt purus felis id est. Mauris ornare | |
| placerat tortor at pulvinar. Sed quis lorem ac ipsum vehicula gravida. Sed massa | |
| hendrerit, ipsum ut suscipit pretium, est nibh varius urna, nec sollicitudin arcu | |
| erat nec nisi. Vivamus justo mi, vehicula vitae faucibus eget, pharetra at ante.</p> | |
| <h2>Sub heading</h2> | |
| <p>Fusce erat sapien, ultrices feugiat mattis vitae, tristique | |
| quis risus. Integer erat mi, tempor vitae sodales sit amet, varius nec tortor. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo aliquam | |
| blandit. Aliquam erat volutpat.</p> | |
| </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
| 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: inherit; | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| } | |
| html { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| caption, th, td { | |
| text-align: left; | |
| font-weight: normal; | |
| vertical-align: middle; | |
| } | |
| q, blockquote { | |
| quotes: none; | |
| } | |
| q:before, q:after, blockquote:before, blockquote:after { | |
| content: ""; | |
| content: none; | |
| } | |
| a img { | |
| border: none; | |
| } | |
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { | |
| display: block; | |
| } | |
| /* line 12, grid-padding.scss */ | |
| html { | |
| *zoom: 1; | |
| width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 0; | |
| padding-right: 0; | |
| background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(0%, rgba(100, 100, 225, 0.25)), color-stop(28.57143%, rgba(100, 100, 225, 0.25)), color-stop(28.57143%, rgba(0, 0, 0, 0)), color-stop(35.71429%, rgba(0, 0, 0, 0)), color-stop(35.71429%, rgba(100, 100, 225, 0.25)), color-stop(64.28571%, rgba(100, 100, 225, 0.25)), color-stop(64.28571%, rgba(0, 0, 0, 0)), color-stop(71.42857%, rgba(0, 0, 0, 0)), color-stop(71.42857%, rgba(100, 100, 225, 0.25)), color-stop(100.0%, rgba(100, 100, 225, 0.25)), color-stop(100.0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))); | |
| background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 28.57143%, rgba(0, 0, 0, 0) 28.57143%, rgba(0, 0, 0, 0) 35.71429%, rgba(100, 100, 225, 0.25) 35.71429%, rgba(100, 100, 225, 0.25) 64.28571%, rgba(0, 0, 0, 0) 64.28571%, rgba(0, 0, 0, 0) 71.42857%, rgba(100, 100, 225, 0.25) 71.42857%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%); | |
| background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 28.57143%, rgba(0, 0, 0, 0) 28.57143%, rgba(0, 0, 0, 0) 35.71429%, rgba(100, 100, 225, 0.25) 35.71429%, rgba(100, 100, 225, 0.25) 64.28571%, rgba(0, 0, 0, 0) 64.28571%, rgba(0, 0, 0, 0) 71.42857%, rgba(100, 100, 225, 0.25) 71.42857%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%); | |
| background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 28.57143%, rgba(0, 0, 0, 0) 28.57143%, rgba(0, 0, 0, 0) 35.71429%, rgba(100, 100, 225, 0.25) 35.71429%, rgba(100, 100, 225, 0.25) 64.28571%, rgba(0, 0, 0, 0) 64.28571%, rgba(0, 0, 0, 0) 71.42857%, rgba(100, 100, 225, 0.25) 71.42857%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%); | |
| background-image: linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 28.57143%, rgba(0, 0, 0, 0) 28.57143%, rgba(0, 0, 0, 0) 35.71429%, rgba(100, 100, 225, 0.25) 35.71429%, rgba(100, 100, 225, 0.25) 64.28571%, rgba(0, 0, 0, 0) 64.28571%, rgba(0, 0, 0, 0) 71.42857%, rgba(100, 100, 225, 0.25) 71.42857%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%); | |
| background-position: left top; | |
| -webkit-background-origin: content; | |
| -moz-background-origin: content; | |
| -ms-background-origin: content-box; | |
| -o-background-origin: content-box; | |
| background-origin: content-box; | |
| -webkit-background-clip: content-box; | |
| -moz-background-clip: content-box; | |
| background-clip: content-box; | |
| } | |
| html:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| /* line 18, grid-padding.scss */ | |
| body { | |
| margin-left: 35.71429%; | |
| width: 28.57143%; | |
| float: left; | |
| margin-right: 7.14286%; | |
| display: block; | |
| padding-left: 2em; | |
| padding-right: 2em; | |
| } | |
| /* line 26, grid-padding.scss */ | |
| h1, h2 { | |
| font-weight: bold; | |
| margin-top: 2ex; | |
| margin-bottom: 2ex; | |
| } | |
| /* line 32, grid-padding.scss */ | |
| p { | |
| margin-bottom: 2ex; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment