Skip to content

Instantly share code, notes, and snippets.

@chriscoyier
Created May 5, 2015 21:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chriscoyier/60e300b17e05bc108fd7 to your computer and use it in GitHub Desktop.
Save chriscoyier/60e300b17e05bc108fd7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="col">
test
</div>
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// Jeet (v6.1.2)
// ----
@import "jeet/index";
.col {
@include col(1/2);
background: red;
}
/* Syntax Quick Reference -------------------------- column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter) span($ratio: 1, $offset: 0) shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter) unshift() edit() center($max_width: 1410px, $pad: 0) stack($pad: 0, $align: false) unstack() align($direction: both) cf()
*/
/** Grid settings. All values are defaults and can therefore be easily overidden. */
/** List functions courtesy of the wonderful folks at Team Sass. Check out their awesome grid: Singularity. */
/** Get percentage from a given ratio. @param {number} [$ratio=1] - The column ratio of the element. @returns {number} - The percentage value. */
/** Work out the column widths based on the ratio and gutter sizes. @param {number} [$ratios=1] - The column ratio of the element. @param {number} [$gutter=$jeet-gutter] - The gutter for the column. @returns {list} $width $gutter - A list containing the with and gutter for the element. */
/** Get the set layout direction for the project. @returns {string} $direction - The layout direction. */
/** Replace a specified list value with a new value (uses built in set-nth() if available) @param {list} $list - The list of values you want to alter. @param {number} $index - The index of the list item you want to replace. @param {*} $value - The value you want to replace $index with. @returns {list} $list - The list with the value replaced or removed. @warn if an invalid index is supplied. */
/** Reverse a list (progressively enhanced for Sass 3.3) @param {list} $list - The list of values you want to reverse. @returns {list} $result - The reversed list. */
/** Get the opposite direction to a given value. @param {string} $dir - The direction you want the opposite of. @returns {string} - The opposite direction to $dir. @warn if an incorrect string is provided. */
/** Style an element as a column with a gutter. @param {number} [$ratios=1] - A width relative to its container as a fraction. @param {number} [$offset=0] - A offset specified as a fraction (see $ratios). @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns. @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one. @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. */
/** An alias for the column mixin. @param [$args...] - All arguments get passed through to column(). */
/** Get the width of a column and nothing else. @param {number} [$ratios=1] - A width relative to its container as a fraction. @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. */
/** Get the gutter size of a column and nothing else. @param {number} [ratios=1] - A width relative to its container as a fraction. @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width. */
/** An alias for the column-width function. @param [$args...] - All arguments get passed through to column(). */
/** An alias for the column-gutter function. @param [$args...] - All arguments get passed through to column(). */
/** Style an element as a column without any gutters for a seamless row. @param {number} [$ratios=1] - A width relative to its container as a fraction. @param {number} [$offset=0] - A offset specified as a fraction (see $ratios). @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns. @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one. */
/** Reorder columns without altering the HTML. @param {number} [$ratios=0] - Specify how far along you want the element to move. @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not. @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. */
/** Reset an element that has had shift() applied to it. */
/** View the grid and its layers for easy debugging. @param {string} [$color=black] - The background tint applied. @param {boolean} [$important=false] - Whether to apply the style as !important. */
/** Alias for edit(). */
/** Horizontally center an element. @param {number} [$max-width=1410px] - The max width the element can be. @param {number} [$pad=0] - Specify the element's left and right padding. */
/** Uncenter an element. */
/** Stack an element so that nothing is either side of it. @param {number} [$pad=0] - Specify the element's left and right padding. @param {boolean/string} [$align=false] - Specify the text align for the element. */
/** Unstack an element. */
/** Center an element on either or both axes. @requires A parent container with relative positioning. @param {string} [$direction=both] - Specify which axes to center the element on. */
/** Apply a clearfix to an element. */
.col { *zoom: 1; float: left; clear: none; text-align: inherit; width: 48.5%; margin-left: 0%; margin-right: 3%; background: red; }
.col:before, .col:after { content: ''; display: table; }
.col:after { clear: both; }
.col:last-child { margin-right: 0%; }
<div class="col">
test
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment