Ethan Anderson BigMucho
BigMucho
/ OQ-dummy-config-2
Created
January 16, 2018 21:29
Re run at: https://www.json-generator.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
| [ | |
| { | |
| projects: [ | |
| '{{repeat(2, 6)}}', | |
| { | |
| index: '{{index()}}', | |
| projectName: '{{lorem(3, "words")}}', | |
| projectSecondary: '4 Tasks, 12 Contractors, 36 workers', | |
| tasks: [ | |
| '{{repeat(3, 5)}}', |
BigMucho
/ oq-dummy-data-2
Created
January 16, 2018 21:21
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
| [ | |
| { | |
| "projects": [ | |
| { | |
| "index": 0, | |
| "projectName": "id commodo eiusmod", | |
| "projectSecondary": "4 Tasks, 12 Contractors, 36 workers", | |
| "tasks": [ | |
| { | |
| "index": 0, |
BigMucho
/ flexgrid.SCSS
Last active
September 16, 2017 15:24
Simple Flexbox grid mixin, apply to parent of child grid items. Specify number of columns, gutters in rems, breakpoint for two columns, breakpoint for one column.
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
| @mixin flexgrid($cols, $gutters, $drop-two, $drop-one) { | |
| // flexgrid(columns, gutters, breakpoint for two columns, breakpoint for one column) | |
| // flexgrid(4, 2, $lg, $sm) // 4 columns, 2rem gutters, below $lg drop to two cols, below $sm drop to one col | |
| // flexgrid(4, 2, false, false) // Columns never reduce | |
| // flexgrid(4, 2, $md, false) //drops to two at $md does not drop to one | |
| // flexgrid(4, 2, false, $sm) //drops to one below $sm (never drops to 2 columns) | |
| // | |
| // Apply to parent of grid children | |
| // Gutter in rems | |
| // Relies on the SASS "Breakpoint" plugin to manage responsive breakpoints. |
BigMucho
/ width-max.scss
Last active
July 8, 2017 14:43
SASS mixin utilizing CALC to set the max width of a container elements child content. Child content will remain horizontally centered at it's set width independent of it's parent. When parent width drops below "$width" the child content simply expands to fill.
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
| @mixin width-max($width) { | |
| @media (min-width: $width) { | |
| padding-left: calc((100% - #{$width})/2); | |
| padding-right: calc((100% - #{$width})/2); | |
| } | |
| } | |
| // usage: | |
| // #el-container { @include width-max(768px)} | |
| // The container element expands horizontally without restriction, it's children | |
| // would be centered horizontally, and limited to a total width of 768px |
BigMucho
/ test-outline.scss
Created
July 8, 2017 14:25
A simple SASS mixin that adds a CSS testing outline to any set of elements to help visualize layouts during development.
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
| @mixin test ($color) { | |
| outline-style: solid !important; | |
| outline-width: 1px !important; | |
| outline-color: $color !important; | |
| } | |
| // #el1 { @include test(red) } | |
| // #el2 { @include test(blue) } | |
| // outline everything | |
| // * { @include test(gray) } |
BigMucho
/ aspect-ratio.scss
Last active
July 8, 2017 14:17
A SASS mixin to set an arbitrary aspect-ratio of a container element.
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
| @mixin ar($width-ratio, $height-ratio) { | |
| // usage: #el { @include ar(16,9) }; | |
| position: relative; | |
| &:before { | |
| display: block; | |
| content: ""; | |
| width: 100%; | |
| padding-top: ($height-ratio / $width-ratio) * 100%; | |
| } | |
| > * { |