Created
July 25, 2014 13:51
-
-
Save ezekg/71519c1983e6391c479e to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| <div class="one"> | |
| <div class="two"> | |
| <div class="three"> | |
| <div class="four"> | |
| <div class="five"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="one--sucky"> | |
| <div class="two--sucky"> | |
| <div class="three--sucky"> | |
| <div class="four--sucky"> | |
| <div class="five--sucky"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
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
| // ---- | |
| // Sass (v3.3.10) | |
| // Compass (v1.0.0.alpha.20) | |
| // Flint (v1.7.1) | |
| // ---- | |
| $flint: ( | |
| // Grid configuration | |
| "config": ( | |
| // Define breakpoints [any amount of breakpoints] | |
| // Any alias you like, minus reserved Flint words [i.e. "settings", "config", etc.] | |
| "desktop": ( | |
| // Options: 0-infinity | |
| "columns": 16, | |
| // Options: number[unit] | |
| "breakpoint": 80em, | |
| ), | |
| // Same applies for other breakpoints | |
| // ---- | |
| // Remember, you're not fixed to just 4 breakpoints like we have here | |
| "laptop": ( | |
| "columns": 12, | |
| "breakpoint": 60em, | |
| ), | |
| "tablet": ( | |
| "columns": 8, | |
| "breakpoint": 40em, | |
| ), | |
| "mobile": ( | |
| "columns": 4, | |
| "breakpoint": 20em, | |
| ), | |
| // Additional grid settings [required] | |
| "settings": ( | |
| // Any breakpoint's alias | |
| "default": "mobile", | |
| // Options: fluid | fixed | |
| "grid": "fluid", | |
| // Options: number[unit] | |
| "gutter": 0.625em, | |
| // Options: left | right | |
| "float-style": "left", | |
| // Options: true [uses highest breakpoint] | false | number[unit] | |
| "max-width": true, | |
| // Options: true | false | |
| "center-container": true, | |
| // Options: true | false | |
| "border-box-sizing": true, | |
| // Syntax support: string | false | |
| "support-syntax": false, | |
| // Options: true | false | |
| "debug-mode": true, | |
| ), | |
| ), | |
| ); | |
| @import "flint"; | |
| div { | |
| background: rgba(gray, 0.5); | |
| height: 400px; | |
| } | |
| // Notice how these auto-adjust their width based on the parent | |
| .one { | |
| @include _(4); | |
| .two { | |
| @include _(4, auto); | |
| .three { | |
| @include _(4, auto); | |
| .four { | |
| @include _(4, auto); | |
| .five { | |
| @include _(4, auto); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Sucky ones | |
| .one--sucky { | |
| @include _(4); | |
| .two--sucky { | |
| @include _(4); | |
| .three--sucky { | |
| @include _(4); | |
| .four--sucky { | |
| @include _(4); | |
| .five--sucky { | |
| @include _(4); | |
| } | |
| } | |
| } | |
| } | |
| } |
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
| div { | |
| background: rgba(128, 128, 128, 0.5); | |
| height: 400px; | |
| } | |
| .one { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 4; | |
| -flint-parent-selector: none; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one { | |
| width: 23.4375%; | |
| margin-right: 0.78125%; | |
| margin-left: 0.78125%; | |
| -flint-instance-count: 1; | |
| -flint-parent-selector: none; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-output-width: 23.4375%; | |
| -flint-output-margin-right: 0.78125%; | |
| -flint-output-margin-left: 0.78125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one { | |
| width: 31.25%; | |
| margin-right: 1.04167%; | |
| margin-left: 1.04167%; | |
| -flint-instance-count: 2; | |
| -flint-parent-selector: none; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-output-width: 31.25%; | |
| -flint-output-margin-right: 1.04167%; | |
| -flint-output-margin-left: 1.04167%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one { | |
| width: 46.875%; | |
| margin-right: 1.5625%; | |
| margin-left: 1.5625%; | |
| -flint-instance-count: 3; | |
| -flint-parent-selector: none; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-output-width: 46.875%; | |
| -flint-output-margin-right: 1.5625%; | |
| -flint-output-margin-left: 1.5625%; | |
| } | |
| } | |
| .one .two { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 8; | |
| -flint-parent-selector: .one::mobile; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one .two { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 5; | |
| -flint-parent-selector: .one::desktop; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one .two { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 6; | |
| -flint-parent-selector: .one::laptop; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one .two { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 7; | |
| -flint-parent-selector: .one::tablet; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| .one .two .three { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 12; | |
| -flint-parent-selector: .one .two::mobile; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one .two .three { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 9; | |
| -flint-parent-selector: .one .two::desktop; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one .two .three { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 10; | |
| -flint-parent-selector: .one .two::laptop; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one .two .three { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 11; | |
| -flint-parent-selector: .one .two::tablet; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| .one .two .three .four { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 16; | |
| -flint-parent-selector: .one .two .three::mobile; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one .two .three .four { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 13; | |
| -flint-parent-selector: .one .two .three::desktop; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one .two .three .four { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 14; | |
| -flint-parent-selector: .one .two .three::laptop; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one .two .three .four { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 15; | |
| -flint-parent-selector: .one .two .three::tablet; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| .one .two .three .four .five { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 20; | |
| -flint-parent-selector: .one .two .three .four::mobile; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one .two .three .four .five { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 17; | |
| -flint-parent-selector: .one .two .three .four::desktop; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one .two .three .four .five { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 18; | |
| -flint-parent-selector: .one .two .three .four::laptop; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one .two .three .four .five { | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 19; | |
| -flint-parent-selector: .one .two .three .four::tablet; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-context: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| } | |
| .one--sucky { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 24; | |
| -flint-parent-selector: none; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one--sucky { | |
| width: 23.4375%; | |
| margin-right: 0.78125%; | |
| margin-left: 0.78125%; | |
| -flint-instance-count: 21; | |
| -flint-parent-selector: none; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-output-width: 23.4375%; | |
| -flint-output-margin-right: 0.78125%; | |
| -flint-output-margin-left: 0.78125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one--sucky { | |
| width: 31.25%; | |
| margin-right: 1.04167%; | |
| margin-left: 1.04167%; | |
| -flint-instance-count: 22; | |
| -flint-parent-selector: none; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-output-width: 31.25%; | |
| -flint-output-margin-right: 1.04167%; | |
| -flint-output-margin-left: 1.04167%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one--sucky { | |
| width: 46.875%; | |
| margin-right: 1.5625%; | |
| margin-left: 1.5625%; | |
| -flint-instance-count: 23; | |
| -flint-parent-selector: none; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-output-width: 46.875%; | |
| -flint-output-margin-right: 1.5625%; | |
| -flint-output-margin-left: 1.5625%; | |
| } | |
| } | |
| .one--sucky .two--sucky { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 28; | |
| -flint-parent-selector: .one--sucky::mobile; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one--sucky .two--sucky { | |
| width: 23.4375%; | |
| margin-right: 0.78125%; | |
| margin-left: 0.78125%; | |
| -flint-instance-count: 25; | |
| -flint-parent-selector: .one--sucky::desktop; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-output-width: 23.4375%; | |
| -flint-output-margin-right: 0.78125%; | |
| -flint-output-margin-left: 0.78125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one--sucky .two--sucky { | |
| width: 31.25%; | |
| margin-right: 1.04167%; | |
| margin-left: 1.04167%; | |
| -flint-instance-count: 26; | |
| -flint-parent-selector: .one--sucky::laptop; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-output-width: 31.25%; | |
| -flint-output-margin-right: 1.04167%; | |
| -flint-output-margin-left: 1.04167%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one--sucky .two--sucky { | |
| width: 46.875%; | |
| margin-right: 1.5625%; | |
| margin-left: 1.5625%; | |
| -flint-instance-count: 27; | |
| -flint-parent-selector: .one--sucky::tablet; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-output-width: 46.875%; | |
| -flint-output-margin-right: 1.5625%; | |
| -flint-output-margin-left: 1.5625%; | |
| } | |
| } | |
| .one--sucky .two--sucky .three--sucky { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 32; | |
| -flint-parent-selector: .one--sucky .two--sucky::mobile; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one--sucky .two--sucky .three--sucky { | |
| width: 23.4375%; | |
| margin-right: 0.78125%; | |
| margin-left: 0.78125%; | |
| -flint-instance-count: 29; | |
| -flint-parent-selector: .one--sucky .two--sucky::desktop; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-output-width: 23.4375%; | |
| -flint-output-margin-right: 0.78125%; | |
| -flint-output-margin-left: 0.78125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one--sucky .two--sucky .three--sucky { | |
| width: 31.25%; | |
| margin-right: 1.04167%; | |
| margin-left: 1.04167%; | |
| -flint-instance-count: 30; | |
| -flint-parent-selector: .one--sucky .two--sucky::laptop; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-output-width: 31.25%; | |
| -flint-output-margin-right: 1.04167%; | |
| -flint-output-margin-left: 1.04167%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one--sucky .two--sucky .three--sucky { | |
| width: 46.875%; | |
| margin-right: 1.5625%; | |
| margin-left: 1.5625%; | |
| -flint-instance-count: 31; | |
| -flint-parent-selector: .one--sucky .two--sucky::tablet; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-output-width: 46.875%; | |
| -flint-output-margin-right: 1.5625%; | |
| -flint-output-margin-left: 1.5625%; | |
| } | |
| } | |
| .one--sucky .two--sucky .three--sucky .four--sucky { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 36; | |
| -flint-parent-selector: .one--sucky .two--sucky .three--sucky::mobile; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one--sucky .two--sucky .three--sucky .four--sucky { | |
| width: 23.4375%; | |
| margin-right: 0.78125%; | |
| margin-left: 0.78125%; | |
| -flint-instance-count: 33; | |
| -flint-parent-selector: .one--sucky .two--sucky .three--sucky::desktop; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-output-width: 23.4375%; | |
| -flint-output-margin-right: 0.78125%; | |
| -flint-output-margin-left: 0.78125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one--sucky .two--sucky .three--sucky .four--sucky { | |
| width: 31.25%; | |
| margin-right: 1.04167%; | |
| margin-left: 1.04167%; | |
| -flint-instance-count: 34; | |
| -flint-parent-selector: .one--sucky .two--sucky .three--sucky::laptop; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-output-width: 31.25%; | |
| -flint-output-margin-right: 1.04167%; | |
| -flint-output-margin-left: 1.04167%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one--sucky .two--sucky .three--sucky .four--sucky { | |
| width: 46.875%; | |
| margin-right: 1.5625%; | |
| margin-left: 1.5625%; | |
| -flint-instance-count: 35; | |
| -flint-parent-selector: .one--sucky .two--sucky .three--sucky::tablet; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-output-width: 46.875%; | |
| -flint-output-margin-right: 1.5625%; | |
| -flint-output-margin-left: 1.5625%; | |
| } | |
| } | |
| .one--sucky .two--sucky .three--sucky .four--sucky .five--sucky { | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| float: left; | |
| width: 93.75%; | |
| margin-right: 3.125%; | |
| margin-left: 3.125%; | |
| -flint-instance-count: 40; | |
| -flint-parent-selector: .one--sucky .two--sucky .three--sucky .four--sucky::mobile; | |
| -flint-key: mobile; | |
| -flint-breakpoint: 20em; | |
| -flint-columns: 4; | |
| -flint-span: 4; | |
| -flint-output-width: 93.75%; | |
| -flint-output-margin-right: 3.125%; | |
| -flint-output-margin-left: 3.125%; | |
| } | |
| @media only screen and (min-width: 60.0625em) { | |
| .one--sucky .two--sucky .three--sucky .four--sucky .five--sucky { | |
| width: 23.4375%; | |
| margin-right: 0.78125%; | |
| margin-left: 0.78125%; | |
| -flint-instance-count: 37; | |
| -flint-parent-selector: .one--sucky .two--sucky .three--sucky .four--sucky::desktop; | |
| -flint-key: desktop; | |
| -flint-breakpoint: 80em; | |
| -flint-columns: 16; | |
| -flint-span: 4; | |
| -flint-output-width: 23.4375%; | |
| -flint-output-margin-right: 0.78125%; | |
| -flint-output-margin-left: 0.78125%; | |
| } | |
| } | |
| @media only screen and (min-width: 40.0625em) and (max-width: 60em) { | |
| .one--sucky .two--sucky .three--sucky .four--sucky .five--sucky { | |
| width: 31.25%; | |
| margin-right: 1.04167%; | |
| margin-left: 1.04167%; | |
| -flint-instance-count: 38; | |
| -flint-parent-selector: .one--sucky .two--sucky .three--sucky .four--sucky::laptop; | |
| -flint-key: laptop; | |
| -flint-breakpoint: 60em; | |
| -flint-columns: 12; | |
| -flint-span: 4; | |
| -flint-output-width: 31.25%; | |
| -flint-output-margin-right: 1.04167%; | |
| -flint-output-margin-left: 1.04167%; | |
| } | |
| } | |
| @media only screen and (min-width: 20.0625em) and (max-width: 40em) { | |
| .one--sucky .two--sucky .three--sucky .four--sucky .five--sucky { | |
| width: 46.875%; | |
| margin-right: 1.5625%; | |
| margin-left: 1.5625%; | |
| -flint-instance-count: 39; | |
| -flint-parent-selector: .one--sucky .two--sucky .three--sucky .four--sucky::tablet; | |
| -flint-key: tablet; | |
| -flint-breakpoint: 40em; | |
| -flint-columns: 8; | |
| -flint-span: 4; | |
| -flint-output-width: 46.875%; | |
| -flint-output-margin-right: 1.5625%; | |
| -flint-output-margin-left: 1.5625%; | |
| } | |
| } |
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
| <div class="one"> | |
| <div class="two"> | |
| <div class="three"> | |
| <div class="four"> | |
| <div class="five"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="one--sucky"> | |
| <div class="two--sucky"> | |
| <div class="three--sucky"> | |
| <div class="four--sucky"> | |
| <div class="five--sucky"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment