Last active
May 26, 2022 13:50
-
-
Save solrevdev/6bd02aa109e03de1c4eab03906c31f20 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| body { | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| font-size: 1rem; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| color: #212529; | |
| text-align: left; | |
| background-color: #fff; | |
| } | |
| .container { | |
| width: 100%; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin-right: -15px; | |
| margin-left: -15px; | |
| } | |
| .col { | |
| flex-basis: 0; | |
| flex-grow: 1; | |
| position: relative; | |
| max-width: 100%; | |
| min-height: 1px; | |
| width: 100%; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| } | |
| .row > .col, | |
| .row > [class^=col-] { | |
| padding-top: 0.75rem; | |
| padding-bottom: 0.75rem; | |
| background-color: rgba(86, 61, 124, 0.15); | |
| border: 1px solid rgba(86, 61, 124, 0.2); | |
| position: relative; | |
| max-width: 100%; | |
| min-height: 1px; | |
| width: 100%; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| } | |
| .col-1 { | |
| flex: 0 0 8.3333333333%; | |
| } | |
| .col-2 { | |
| flex: 0 0 16.6666666667%; | |
| } | |
| .col-3 { | |
| flex: 0 0 25%; | |
| } | |
| .col-4 { | |
| flex: 0 0 33.3333333333%; | |
| } | |
| .col-5 { | |
| flex: 0 0 41.6666666667%; | |
| } | |
| .col-6 { | |
| flex: 0 0 50%; | |
| } | |
| .col-7 { | |
| flex: 0 0 58.3333333333%; | |
| } | |
| .col-8 { | |
| flex: 0 0 66.6666666667%; | |
| } | |
| .col-9 { | |
| flex: 0 0 75%; | |
| } | |
| .col-10 { | |
| flex: 0 0 83.3333333333%; | |
| } | |
| .col-11 { | |
| flex: 0 0 91.6666666667%; | |
| } | |
| .col-12 { | |
| flex: 0 0 100%; | |
| } | |
| hr { | |
| margin: 2rem 0 2rem 0; | |
| } | |
| @media (min-width: 1200px) { | |
| .container { | |
| max-width: 1140px; | |
| } | |
| } |
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" type="text/css" href="readme.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Building a flexbox grid with Sass</h1> | |
| </div> | |
| <!--/container --> | |
| <hr> | |
| <h2>Equal-width</h2> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| 1 of 2 | |
| </div> | |
| <div class="col"> | |
| 2 of 2 | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| 1 of 3 | |
| </div> | |
| <div class="col"> | |
| 2 of 3 | |
| </div> | |
| <div class="col"> | |
| 3 of 3 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container" style="margin-top:1rem;"> | |
| <div class="row"> | |
| <div class="col">Column</div> | |
| <div class="col">Column</div> | |
| <div class="w-100"></div> | |
| <div class="col">Column</div> | |
| <div class="col">Column</div> | |
| </div> | |
| </div> | |
| <hr> | |
| <h2>Setting one column width</h2> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| 1 of 3 | |
| </div> | |
| <div class="col-6"> | |
| 2 of 3 (wider) | |
| </div> | |
| <div class="col"> | |
| 3 of 3 | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| 1 of 3 | |
| </div> | |
| <div class="col-5"> | |
| 2 of 3 (wider) | |
| </div> | |
| <div class="col"> | |
| 3 of 3 | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <h2>Equal-width multi-row</h2> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col">col</div> | |
| <div class="col">col</div> | |
| <div class="w-100"></div> | |
| <div class="col">col</div> | |
| <div class="col">col</div> | |
| </div> | |
| </div> | |
| <hr> | |
| <h2>All breakpoints</h2> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col">col</div> | |
| <div class="col">col</div> | |
| <div class="col">col</div> | |
| <div class="col">col</div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-8">col-8</div> | |
| <div class="col-4">col-4</div> | |
| </div> | |
| </div> | |
| <hr> | |
| <h2>Column wrapping</h2> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-9">.col-9</div> | |
| <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line | |
| as one contiguous unit.</div> | |
| <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div> | |
| </div> | |
| </div> | |
| <hr> | |
| </body> | |
| </html> |
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
| // sass - building own grid system | |
| // ------------------------------- | |
| // we will have a 12 grid system | |
| $cols: 12; | |
| body { | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, | |
| 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; | |
| font-size: 1rem; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| color: #212529; | |
| text-align: left; | |
| background-color: #fff; | |
| } | |
| .container { | |
| width: 100%; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| // row will be the container flexbox | |
| .row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin-right: -15px; | |
| margin-left: -15px; | |
| } | |
| .col { | |
| flex-basis: 0; | |
| flex-grow: 1; | |
| position: relative; | |
| max-width: 100%; | |
| min-height: 1px; | |
| width: 100%; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| } | |
| .row > .col, | |
| .row > [class^='col-'] { | |
| padding-top: 0.75rem; | |
| padding-bottom: 0.75rem; | |
| background-color: rgba(86, 61, 124, 0.15); | |
| border: 1px solid rgba(86, 61, 124, 0.2); | |
| position: relative; | |
| max-width: 100%; | |
| min-height: 1px; | |
| width: 100%; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| } | |
| // iterate from 1 through to 12 making classes like col-1, col-2 etc | |
| @for $i from 1 through $cols { | |
| .col-#{$i} { | |
| flex: 0 0 (100% / (12 / $i)); | |
| } | |
| } | |
| hr { | |
| margin: 2rem 0 2rem 0; | |
| } | |
| // media queries | |
| @media (min-width: 1200px) { | |
| .container { | |
| max-width: 1140px; | |
| } | |
| } |
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
| { | |
| "sass": { | |
| "compiler": "dart-sass/1.32.12", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment