Created
June 21, 2016 18:12
-
-
Save fetchTe/85f5d27dbecb99a050081a715e768d22 to your computer and use it in GitHub Desktop.
Lost-Stylus-Mod
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
| // Lost Grid v5.1.6 - https://github.com/corysimmons/lost | |
| $gutter = 30px | |
| $rtl = false | |
| $flexbox = true | |
| /** | |
| * Sets a translucent background color to all elements it affects. Helpful while setting up, or debugging, the structure of your site to make sure all items are cleared correctly. | |
| * | |
| * @param {color} [$bg=blue] - A color to be lightened, so make sure you pick a darkish color. | |
| * | |
| * @example | |
| * section | |
| * edit(red) | |
| */ | |
| edit($bg = blue) | |
| * | |
| background: rgba($bg, 10%) | |
| /** | |
| * Clearfix used to clear floated children elements. http://nicolasgallagher.com/micro-clearfix-hack | |
| * | |
| * @example | |
| * .parent | |
| * clearfix() | |
| * .child | |
| * column('1/2') | |
| */ | |
| clearfix() | |
| *zoom: 1 | |
| &:before, &:after | |
| content: '' | |
| display: table | |
| &:after | |
| clear: both | |
| /** | |
| * Creates a Flexbox container. | |
| * | |
| * @param {string} [$direction=row] - The flex-direction the container should create. This is typically opposite to the element you're creating so a row() would need flex-container(column). | |
| * | |
| * @example | |
| * $flexbox = true | |
| * | |
| * section | |
| * flex-container() | |
| * figure | |
| * column('1/2') | |
| */ | |
| flex-container($direction = row) | |
| display: flex | |
| if $direction is row | |
| flex-flow: row wrap | |
| if $direction is column | |
| flex-flow: column nowrap | |
| /** | |
| * Horizontally center a container element and apply padding to it. | |
| * | |
| * @param {unit} [$max-size=1140px] - A max-width to assign. Can be any unit. | |
| * @param {unit} [$pad=0] - Padding on the left and right of the element. Can be any unit. | |
| * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not. | |
| * | |
| * @example | |
| * section | |
| * center(900px) | |
| */ | |
| center($max-size = 1140px, $pad = 0, $flex = $flexbox) | |
| if $flex is false | |
| clearfix() | |
| else | |
| flex-container() | |
| if $pad is not 0 | |
| padding-left: $pad | |
| padding-right: $pad | |
| max-width: $max-size | |
| margin-left: auto | |
| margin-right: auto | |
| /** | |
| * Align nested elements. | |
| * | |
| * @param {string} [$location=middle-center] - The position the nested element takes relative to the containing element. | |
| * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not. | |
| * | |
| * - reset | |
| * - top-left | |
| * - top-center or top | |
| * - top-right | |
| * - middle-left or left | |
| * - middle-right or right | |
| * - bottom-left | |
| * - bottom-center or bottom | |
| * - bottom-right | |
| * | |
| * @example | |
| * .parent | |
| * align(right) | |
| * width: 600px | |
| * height: 400px | |
| * .child | |
| * width: 300px | |
| * height: 150px | |
| */ | |
| align($location = middle-center, $flex = $flexbox) | |
| if $flex is false | |
| position: relative | |
| > * | |
| if $location is reset | |
| position: static | |
| else | |
| position: absolute | |
| if $location is reset | |
| top: auto | |
| right: auto | |
| bottom: auto | |
| left: auto | |
| transform: translate3d(0, 0, 0) | |
| else if $location is top-left | |
| top: 0 | |
| right: auto | |
| bottom: auto | |
| left: 0 | |
| transform: translate3d(0, 0, 0) | |
| else if $location is top-center or $location is top | |
| top: 0 | |
| right: auto | |
| bottom: auto | |
| left: 50% | |
| transform: translate3d(-50%, 0, 0) | |
| else if $location is top-right | |
| top: 0 | |
| right: 0 | |
| bottom: auto | |
| left: auto | |
| transform: translate3d(0, 0, 0) | |
| else if $location is middle-left or $location is left | |
| top: 50% | |
| right: auto | |
| bottom: auto | |
| left: 0 | |
| transform: translate3d(0, -50%, 0) | |
| else if $location is middle-right or $location is right | |
| top: 50% | |
| right: 0 | |
| bottom: auto | |
| left: auto | |
| transform: translate3d(0, -50%, 0) | |
| else if $location is bottom-left | |
| top: auto | |
| right: auto | |
| bottom: 0 | |
| left: 0 | |
| transform: translate3d(0, 0, 0) | |
| else if $location is bottom-center or $location is bottom | |
| top: auto | |
| right: auto | |
| bottom: 0 | |
| left: 50% | |
| transform: translate3d(-50%, 0, 0) | |
| else if $location is bottom-right | |
| top: auto | |
| right: 0 | |
| bottom: 0 | |
| left: auto | |
| transform: translate3d(0, 0, 0) | |
| else | |
| top: 50% | |
| right: auto | |
| bottom: auto | |
| left: 50% | |
| transform: translate3d(-50%, -50%, 0) | |
| else | |
| display: flex | |
| if $location is reset | |
| justify-content: inherit | |
| align-items: inherit | |
| else if $location is top-left | |
| justify-content: flex-start | |
| align-items: flex-start | |
| else if $location is top-center or $location is top | |
| justify-content: center | |
| align-items: flex-start | |
| else if $location is top-right | |
| justify-content: flex-end | |
| align-items: flex-start | |
| else if $location is middle-left or $location is left | |
| justify-content: flex-start | |
| align-items: center | |
| else if $location is middle-right or $location is right | |
| justify-content: flex-end | |
| align-items: center | |
| else if $location is bottom-left | |
| justify-content: flex-start | |
| align-items: flex-end | |
| else if $location is bottom-center or $location is bottom | |
| justify-content: center | |
| align-items: flex-end | |
| else if $location is bottom-right | |
| justify-content: flex-end | |
| align-items: flex-end | |
| else | |
| justify-content: center | |
| align-items: center | |
| /** | |
| * Creates a column that is a fraction of the size of it's containing element with a gutter. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes. | |
| * | |
| * @param {string} [$fraction='1/1'] - This is a simple fraction of the containing element's width. This must be a string written as a fraction. | |
| * @param {number} [$cycle=convert(unquote(split('/', $fraction)[1]))] - Lost works by assigning a margin-right to all elements except the last in the row. It does this by default by using the denominator of the fraction you pick. To override this default use this param. e.g. column('2/4', $cycle: 2) | |
| * @param {number} [$gut=$gutter] - The margin on the right side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all). | |
| * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not. | |
| * | |
| * @example | |
| * figure | |
| * column('1/3') | |
| */ | |
| column($fraction = '1/1', $cycle = convert(unquote(split('/', $fraction)[1])), $gut = $gutter, $flex = $flexbox) | |
| _get-size() | |
| if $gut is 0 | |
| return s('calc(99.999999% * %s)', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * %s - (%s - %s * %s))', unquote($fraction), $gut, $gut, unquote($fraction)) | |
| width: _get-size() | |
| if $flex is false | |
| if $rtl | |
| &:nth-child(n) | |
| margin-left: $gut | |
| float: right | |
| clear: none | |
| &:last-child | |
| margin-left: 0 | |
| &:nth-child({$cycle}n) | |
| margin-left: 0 | |
| float: left | |
| &:nth-child({$cycle}n + 1) | |
| clear: right | |
| else | |
| &:nth-child(n) | |
| margin-right: $gut | |
| float: left | |
| clear: none | |
| &:last-child | |
| margin-right: 0 | |
| &:nth-child({$cycle}n) | |
| margin-right: 0 | |
| float: right | |
| &:nth-child({$cycle}n + 1) | |
| clear: left | |
| else | |
| flex: 0 0 auto | |
| if $rtl | |
| &:nth-child(n) | |
| margin-left: $gut | |
| &:last-child | |
| margin-left: 0 | |
| &:nth-child({$cycle}n) | |
| margin-left: 0 | |
| else | |
| &:nth-child(n) | |
| margin-right: $gut | |
| &:last-child | |
| margin-right: 0 | |
| &:nth-child({$cycle}n) | |
| margin-right: 0 | |
| /** | |
| * Creates a row that is a fraction of the size of it's containing element with a gutter. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes. | |
| * | |
| * @param {string} [$fraction='1/1'] - This is a simple fraction of the containing element's height. This must be a string written as a fraction. | |
| * @param {number} [$gut=$gutter] - The margin on the bottom of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all). | |
| * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not. | |
| * | |
| * @example | |
| * figure | |
| * row('1/3') | |
| */ | |
| row($fraction = '1/1', $gut = $gutter, $flex = $flexbox) | |
| _get-size() | |
| if $gut is 0 | |
| return s('calc(99.999999% * %s)', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * %s - (%s - %s * %s))', unquote($fraction), $gut, $gut, unquote($fraction)) | |
| width: 100% | |
| height: _get-size() | |
| margin-bottom: $gut | |
| if $flex is true | |
| flex: 0 0 auto | |
| &:last-child | |
| margin-bottom: 0 | |
| /** | |
| * Creates a block that is a fraction of the size of it's containing element with a gutter on the right and bottom. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes. | |
| * | |
| * @param {string} [$fraction='1/1'] - This is a simple fraction of the containing element's width/height. This must be a string written as a fraction. | |
| * @param {number} [$cycle=convert(unquote(split('/', $fraction)[1]))] - Lost works by assigning a margin-right/bottom to all elements except the last row (no margin-bottom) and the last column (no margin-right). It does this by default by using the denominator of the fraction you pick. To override this default use this param. e.g. waffle('2/4', $cycle: 2) | |
| * @param {number} [$gut=$gutter] - The margin on the right and bottom side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all). | |
| * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not. | |
| * | |
| * @example | |
| * figure | |
| * waffle('1/3') | |
| */ | |
| waffle($fraction = '1/1', $cycle = convert(unquote(split('/', $fraction)[1])), $gut = $gutter, $flex = $flexbox) | |
| _get-size() | |
| if $gut is 0 | |
| return s('calc(99.999999% * %s)', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * %s - (%s - %s * %s))', unquote($fraction), $gut, $gut, unquote($fraction)) | |
| width: _get-size() | |
| height: _get-size() | |
| if $flex is false | |
| if $rtl | |
| &:nth-child(n) | |
| float: right | |
| margin-left: $gut | |
| clear: none | |
| &:nth-child({$cycle}n), &:last-child | |
| margin-left: 0 | |
| &:nth-child({$cycle}n + 1) | |
| clear: right | |
| else | |
| &:nth-child(n) | |
| float: left | |
| margin-right: $gut | |
| clear: none | |
| &:nth-child({$cycle}n), &:last-child | |
| margin-right: 0 | |
| &:nth-child({$cycle}n + 1) | |
| clear: left | |
| else | |
| flex: 0 0 auto | |
| if $rtl | |
| &:nth-child(n) | |
| margin-left: $gut | |
| &:nth-child({$cycle}n), &:last-child | |
| margin-left: 0 | |
| else | |
| &:nth-child(n) | |
| margin-right: $gut | |
| &:nth-child({$cycle}n), &:last-child | |
| margin-right: 0 | |
| &:nth-child(n) | |
| margin-bottom: $gut | |
| &:last-child | |
| margin-bottom: 0 | |
| &:nth-last-child(-n + {$cycle}) | |
| margin-bottom: 0 | |
| /** | |
| * Margin to the left, right, bottom, or top, of an element depending on if the fraction passed is positive or negative. It works for both horizontal and vertical grids but not both. | |
| * | |
| * @param {string} [$fraction='1/1'] - Fraction of the container to be offset. Must be a string. | |
| * @param {string} [$dir=row] - Direction the grid is going. Should be the opposite of the column() or row() it's being used on. | |
| * @param {number} [$gut=$gutter] - How large the gutter involved is, typically this won't be adjusted, but if you have set the elements for that container to have different gutters than default, you will need to match that gutter here as well. | |
| * | |
| * @example | |
| * .two-elements | |
| * column('1/3') | |
| * &:first-child | |
| * offset('1/3') | |
| */ | |
| offset($fraction = '1/1', $dir = row, $gut = $gutter) | |
| $numerator = convert(unquote(split('/', $fraction)[0])) | |
| _get-size() | |
| if $dir is row | |
| if $numerator > 0 | |
| if $gut is 0 | |
| return s('calc(99.999999% * %s)', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * %s - (%s - %s * %s) + (%s * 2))', unquote($fraction), $gut, $gut, unquote($fraction), $gut) | |
| if $numerator < 0 | |
| if $gut is 0 | |
| return s('calc(99.999999% * (%s * -1))', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * (%s * -1) - (%s - %s * (%s * -1)) + %s)', unquote($fraction), $gut, $gut, unquote($fraction), $gut) | |
| else | |
| if $numerator > 0 | |
| if $gut is 0 | |
| return s('calc(99.999999% * %s)', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * %s - (%s - %s * %s) + (%s * 2))', unquote($fraction), $gut, $gut, unquote($fraction), $gut) | |
| if $numerator < 0 | |
| if $gut is 0 | |
| return s('calc(99.999999% * (%s * -1))', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * (%s * -1) - (%s - %s * (%s * -1)) + (%s * 2))', unquote($fraction), $gut, $gut, unquote($fraction), $gut) | |
| if $dir is row | |
| if $numerator > 0 | |
| margin-right: _get-size() !important | |
| else if $numerator < 0 | |
| margin-left: _get-size() !important | |
| else | |
| margin-left: 0 !important | |
| margin-right: $gut !important | |
| else | |
| if $numerator > 0 | |
| margin-bottom: _get-size() !important | |
| else if $numerator < 0 | |
| margin-top: _get-size() !important | |
| else | |
| margin-top: 0 !important | |
| margin-bottom: $gut !important | |
| /** | |
| * Source ordering. Shift elements left, right, up, or down, by their left or top position by passing a positive or negative fraction. | |
| * | |
| * @param {string} [$fraction='1/1'] - Fraction of the container to be shifted. Must be a string. | |
| * @param {string} [$dir=row] - Direction the grid is going. Should be the opposite of the column() or row() it's being used on. | |
| * @param {number} [$gut=$gutter] - Adjust the size of the gutter for this movement. Should match the element's $gut. | |
| * | |
| * @example | |
| * figure | |
| * column('1/2') | |
| * &:first-child | |
| * move('1/2') | |
| */ | |
| move($fraction = '1/1', $dir = row, $gut = $gutter) | |
| _get-size() | |
| if $gut is 0 | |
| return s('calc(99.999999% * %s)', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * %s - (%s - %s * %s) + %s)', unquote($fraction), $gut, $gut, unquote($fraction), $gut) | |
| position: relative | |
| if $dir is row | |
| left: _get-size() | |
| else | |
| top: _get-size() | |
| /** | |
| * Creates a wrapping element for working with JS masonry libraries like Isotope. Assigns a negative margin on each side of this wrapping element. | |
| * | |
| * @param {number} [$gut=$gutter] - How large the gutter involved is, typically this won't be adjusted and will inherit the global $gutter setting, but it's made available if you want your masonry grid to have a special $gut, it should match your masonry-column's $gut. | |
| * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not. | |
| * | |
| * @example | |
| * section | |
| * masonry-wrap() | |
| * figure | |
| * masonry-column('1/3') | |
| */ | |
| masonry-wrap($gut = $gutter, $flex = $flexbox) | |
| if $flex is false | |
| clearfix() | |
| else | |
| flex-container() | |
| margin-left: -($gut / 2) | |
| margin-right: -($gut / 2) | |
| /** | |
| * Creates a column for working with JS masonry libraries like Isotope. Assigns a margin to each side of the element. | |
| * | |
| * @param {number} [$gut=$gutter] - How large the gutter involved is, typically this won't be adjusted and will inherit the global $gutter setting, but it's made available if you want your masonry grid to have a special $gut, it should match your masonry-row's $gut. | |
| * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not. | |
| * | |
| * @example | |
| * section | |
| * masonry-wrap() | |
| * figure | |
| * masonry-column('1/3') | |
| */ | |
| masonry-column($fraction = '1/1', $gut = $gutter, $flex = $flexbox) | |
| _get-size() | |
| if $gut is 0 | |
| return s('calc(99.999999% * %s)', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * %s - %s)', unquote($fraction), $gut) | |
| if $flex is true | |
| flex: 0 0 auto | |
| width: _get-size() | |
| margin-left: ($gut / 2) | |
| margin-right: ($gut / 2) | |
| /** | |
| * A function to return the size of a column minus it's gutter if a gutter is assigned. Handy for generating CSS classes. | |
| * | |
| * @param {string} [$fraction='1/1'] - This is a simple fraction of the containing element's width. This must be a string written as a fraction. | |
| * @param {number} [$gut=$gutter] - The gutter assigned to this size. | |
| * | |
| * @example | |
| * [class*="col-"] | |
| * float: left | |
| * margin-right: $gutter | |
| * &:last-child | |
| * margin-right: 0 | |
| * | |
| * for $i in 1..12 | |
| * .col-{$i} | |
| * width: get-size(s('%s/12', $i)) | |
| */ | |
| get-size($fraction = '1/1', $gut = $gutter) | |
| if $gut is 0 | |
| return s('calc(99.999999% * %s)', unquote($fraction)) | |
| else | |
| return s('calc(99.99% * %s - (%s - %s * %s))', unquote($fraction), $gut, $gut, unquote($fraction)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment