{"category":"57616cbdca7ea70e00a12810","project":"56c293c347394f0d00e22868","user":"56c2937a326dc317005b99b2","version":"57616cbdca7ea70e00a1280f","updates":[],"_id":"57616cbdca7ea70e00a12813","createdAt":"2016-02-16T03:13:09.010Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"examples":{"codes":[]},"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Here is how to get started with Cask. Cask supports a number of delivery methods including [RubyGems.org](rubygems.org), [NPM](https://www.npmjs.com), and [Bower](https://www.npmjs.com). Your SCSS files can be run with a number of compilers and Cask supports both [Ruby Sass](http://sass-lang.com) as well as [LibSass](http://libsass.org).\n\nCheck out the **[examples](page:example)** for some inspiration and to see it in action.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"gem 'cask'\\n\",\n      \"language\": \"ruby\",\n      \"name\": \"Ruby\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install cask-grid --save\",\n      \"language\": \"shell\",\n      \"name\": \"NPM\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"bower install cask\",\n      \"language\": \"shell\",\n      \"name\": \"Bower\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]","excerpt":"","slug":"getting-started","type":"basic","title":"Getting Started with Cask","__v":0,"childrenPages":[]}

Getting Started with Cask


Here is how to get started with Cask. Cask supports a number of delivery methods including [RubyGems.org](rubygems.org), [NPM](https://www.npmjs.com), and [Bower](https://www.npmjs.com). Your SCSS files can be run with a number of compilers and Cask supports both [Ruby Sass](http://sass-lang.com) as well as [LibSass](http://libsass.org). Check out the **[examples](page:example)** for some inspiration and to see it in action. [block:code] { "codes": [ { "code": "gem 'cask'\n", "language": "ruby", "name": "Ruby" } ], "sidebar": true } [/block] [block:code] { "codes": [ { "code": "npm install cask-grid --save", "language": "shell", "name": "NPM" } ], "sidebar": true } [/block] [block:code] { "codes": [ { "code": "bower install cask", "language": "shell", "name": "Bower" } ], "sidebar": true } [/block]
Here is how to get started with Cask. Cask supports a number of delivery methods including [RubyGems.org](rubygems.org), [NPM](https://www.npmjs.com), and [Bower](https://www.npmjs.com). Your SCSS files can be run with a number of compilers and Cask supports both [Ruby Sass](http://sass-lang.com) as well as [LibSass](http://libsass.org). Check out the **[examples](page:example)** for some inspiration and to see it in action. [block:code] { "codes": [ { "code": "gem 'cask'\n", "language": "ruby", "name": "Ruby" } ], "sidebar": true } [/block] [block:code] { "codes": [ { "code": "npm install cask-grid --save", "language": "shell", "name": "NPM" } ], "sidebar": true } [/block] [block:code] { "codes": [ { "code": "bower install cask", "language": "shell", "name": "Bower" } ], "sidebar": true } [/block]
{"__v":1,"_id":"57616cbdca7ea70e00a12814","api":{"auth":"required","examples":{"codes":[]},"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"settings":"","url":""},"body":"The `$grid-settings` map allows you to specify project-wide settings that effect many of Cask's defaults including the number of columns, the width of your gutters, and maximum site width.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$grid-settings: (\\n\\t  gutter: 1.25rem,\\n    row-width: 80rem,\\n    text-direction: ltr,\\n    total-columns: 12\\n  );\\n\",\n      \"language\": \"scss\",\n      \"name\": \"\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"options\",\n  \"title\": \"Settings\"\n}\n[/block]\n### `gutter ` \nThe `gutter` is the space between the columns of the grid. The default value for this setting is `1.25rem. Cask supports any unit of measure for gutter values. `10px`, `1.2rem`, `4%`, and even `2vw` are all valid inputs! Rems are preferred.\n\n### `row-width`\n\nThe `row-width` is the maximum width for the [Grid Row](doc:grid-row).\n\n### `text-direction`\n\nThe `text-direction` is a global setting that assigns the text direction for the project. The default for this property is ltr. This property will cause all grid objects to float left. If you are working on a project that supports ltr and rtl languages, this setting can be used to reverse the order of grid objects on the page. \n\n### `total-columns` \nThe `total-columns` defines the number of total columns in the grid. This serves as the default value whenever the `grid-column()` is called.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Defining your own settings\"\n}\n[/block]\nTo change your grid settings, you can use the following. Because of the way the project settings are called, you can update one or all of the settings as needed.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$grid-settings: (\\n  gutter: 24px,\\n  row-width: 1280px\\n);\",\n      \"language\": \"scss\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"\",\n  \"body\": \"Sass maps are a way of storing complex information in variables. They are an easy and powerful way of storing complex information. [Learn more](https://viget.com/extend/sass-maps-are-awesome)\"\n}\n[/block]","category":"57616cbdca7ea70e00a12811","createdAt":"2016-02-29T03:15:17.159Z","excerpt":"Assigns determine basic attributes of the grid\n\n[View Source](https://github.com/whmii/cask/tree/v0.3.2/core/_variables.scss)","githubsync":"","hidden":false,"isReference":false,"link_external":false,"link_url":"","order":1,"project":"56c293c347394f0d00e22868","slug":"grid-settings","sync_unique":"","title":"Grid Settings","type":"basic","updates":[],"user":"56c2937a326dc317005b99b2","version":"57616cbdca7ea70e00a1280f","childrenPages":[]}

Grid Settings

Assigns determine basic attributes of the grid [View Source](https://github.com/whmii/cask/tree/v0.3.2/core/_variables.scss)

The `$grid-settings` map allows you to specify project-wide settings that effect many of Cask's defaults including the number of columns, the width of your gutters, and maximum site width. [block:code] { "codes": [ { "code": "$grid-settings: (\n\t gutter: 1.25rem,\n row-width: 80rem,\n text-direction: ltr,\n total-columns: 12\n );\n", "language": "scss", "name": "" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Settings" } [/block] ### `gutter ` The `gutter` is the space between the columns of the grid. The default value for this setting is `1.25rem. Cask supports any unit of measure for gutter values. `10px`, `1.2rem`, `4%`, and even `2vw` are all valid inputs! Rems are preferred. ### `row-width` The `row-width` is the maximum width for the [Grid Row](doc:grid-row). ### `text-direction` The `text-direction` is a global setting that assigns the text direction for the project. The default for this property is ltr. This property will cause all grid objects to float left. If you are working on a project that supports ltr and rtl languages, this setting can be used to reverse the order of grid objects on the page. ### `total-columns` The `total-columns` defines the number of total columns in the grid. This serves as the default value whenever the `grid-column()` is called. [block:api-header] { "type": "basic", "title": "Defining your own settings" } [/block] To change your grid settings, you can use the following. Because of the way the project settings are called, you can update one or all of the settings as needed. [block:code] { "codes": [ { "code": "$grid-settings: (\n gutter: 24px,\n row-width: 1280px\n);", "language": "scss" } ] } [/block] [block:callout] { "type": "info", "title": "", "body": "Sass maps are a way of storing complex information in variables. They are an easy and powerful way of storing complex information. [Learn more](https://viget.com/extend/sass-maps-are-awesome)" } [/block]
The `$grid-settings` map allows you to specify project-wide settings that effect many of Cask's defaults including the number of columns, the width of your gutters, and maximum site width. [block:code] { "codes": [ { "code": "$grid-settings: (\n\t gutter: 1.25rem,\n row-width: 80rem,\n text-direction: ltr,\n total-columns: 12\n );\n", "language": "scss", "name": "" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Settings" } [/block] ### `gutter ` The `gutter` is the space between the columns of the grid. The default value for this setting is `1.25rem. Cask supports any unit of measure for gutter values. `10px`, `1.2rem`, `4%`, and even `2vw` are all valid inputs! Rems are preferred. ### `row-width` The `row-width` is the maximum width for the [Grid Row](doc:grid-row). ### `text-direction` The `text-direction` is a global setting that assigns the text direction for the project. The default for this property is ltr. This property will cause all grid objects to float left. If you are working on a project that supports ltr and rtl languages, this setting can be used to reverse the order of grid objects on the page. ### `total-columns` The `total-columns` defines the number of total columns in the grid. This serves as the default value whenever the `grid-column()` is called. [block:api-header] { "type": "basic", "title": "Defining your own settings" } [/block] To change your grid settings, you can use the following. Because of the way the project settings are called, you can update one or all of the settings as needed. [block:code] { "codes": [ { "code": "$grid-settings: (\n gutter: 24px,\n row-width: 1280px\n);", "language": "scss" } ] } [/block] [block:callout] { "type": "info", "title": "", "body": "Sass maps are a way of storing complex information in variables. They are an easy and powerful way of storing complex information. [Learn more](https://viget.com/extend/sass-maps-are-awesome)" } [/block]
{"__v":1,"_id":"57616cbdca7ea70e00a12815","api":{"auth":"required","examples":{"codes":[]},"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"settings":"","url":""},"body":"The `grid-column()` mixin specifies the width of an object, usually based on the number of columns an element should span.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@include grid-column(\\n    $columns: false,\\n    $collapse: false,\\n    $center: false\\n  );\",\n      \"language\": \"scss\",\n      \"name\": \"\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"options\",\n  \"title\": \"Arguments\"\n}\n[/block]\n### `$columns` \nThe `columns` argument is the *unitless* number of columns the element spans. The default of this property is `false` which will cause the object to be 100% of its container, or full-width.\n\nA set of values can also be passed in to specify the number of columns the object is as well as the number of total columns in this instance. Values can be separated with a `of` as in `7 of 12`. This is useful for specific layouts that break the default column count of the project defined in the `$grid-settings`.\n\nIf only one value is passed, the number of total columns is the total-columns set in the `$grid-settings`.\n\n### `$collapse`\n\nThe `collapse` argument is a boolean attribute that will cause the element to consume the margins on either side of it. The default of this property is `false` which will cause the object preserve the gutters on either side. This option is useful when creating containers as well as nested grids.\n\n### `$center`\n\nThe `center` argument is a boolean attribute that will cause the element no longer be floated and will instead be centered in its container. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Examples\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n  @include grid-column(2);\\n}\",\n      \"language\": \"scss\",\n      \"name\": null\n    },\n    {\n      \"code\": \".card {\\n  margin-left: 1.25rem;\\n  margin-right: 0;\\n  float: left;\\n  width: calc(16.66667% - 1.45833rem);\\n}\",\n      \"language\": \"css\",\n      \"name\": null\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n\\t@include grid-column(2 of 5);\\n}\\n\",\n      \"language\": \"scss\"\n    },\n    {\n      \"code\": \".card {\\n\\tmargin-left: 1.25rem;\\n  margin-right: 0;\\n  float: left;\\n  width: calc(40% - 1.75rem);\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n  @include grid-column($columns: 6, $center: true);\\n}\",\n      \"language\": \"scss\"\n    },\n    {\n      \"code\": \".card {\\n  margin-left: auto;\\n  margin-right: auto;\\n  float: none;\\n  width: calc(50% - 1.875rem);\\n} \",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n  @include grid-column($columns: 1 of 2, $collapse: true);\\n}\",\n      \"language\": \"scss\"\n    },\n    {\n      \"code\": \".card {\\n  margin-left: 0;\\n  margin-right: -1.25rem;\\n  float: left;\\n  width: calc(50% - -0.625rem);\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]","category":"57616cbdca7ea70e00a12812","createdAt":"2016-02-22T23:17:40.039Z","excerpt":"Specifies the number of columns an element should span\n\n[View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-column.scss)","githubsync":"","hidden":false,"isReference":false,"link_external":false,"link_url":"","order":2,"project":"56c293c347394f0d00e22868","slug":"grid-column","sync_unique":"","title":"Grid Column","type":"basic","updates":[],"user":"56c2937a326dc317005b99b2","version":"57616cbdca7ea70e00a1280f","childrenPages":[]}

Grid Column

Specifies the number of columns an element should span [View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-column.scss)

The `grid-column()` mixin specifies the width of an object, usually based on the number of columns an element should span. [block:code] { "codes": [ { "code": "@include grid-column(\n $columns: false,\n $collapse: false,\n $center: false\n );", "language": "scss", "name": "" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$columns` The `columns` argument is the *unitless* number of columns the element spans. The default of this property is `false` which will cause the object to be 100% of its container, or full-width. A set of values can also be passed in to specify the number of columns the object is as well as the number of total columns in this instance. Values can be separated with a `of` as in `7 of 12`. This is useful for specific layouts that break the default column count of the project defined in the `$grid-settings`. If only one value is passed, the number of total columns is the total-columns set in the `$grid-settings`. ### `$collapse` The `collapse` argument is a boolean attribute that will cause the element to consume the margins on either side of it. The default of this property is `false` which will cause the object preserve the gutters on either side. This option is useful when creating containers as well as nested grids. ### `$center` The `center` argument is a boolean attribute that will cause the element no longer be floated and will instead be centered in its container. [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column(2);\n}", "language": "scss", "name": null }, { "code": ".card {\n margin-left: 1.25rem;\n margin-right: 0;\n float: left;\n width: calc(16.66667% - 1.45833rem);\n}", "language": "css", "name": null } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n\t@include grid-column(2 of 5);\n}\n", "language": "scss" }, { "code": ".card {\n\tmargin-left: 1.25rem;\n margin-right: 0;\n float: left;\n width: calc(40% - 1.75rem);\n}", "language": "css" } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column($columns: 6, $center: true);\n}", "language": "scss" }, { "code": ".card {\n margin-left: auto;\n margin-right: auto;\n float: none;\n width: calc(50% - 1.875rem);\n} ", "language": "css" } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column($columns: 1 of 2, $collapse: true);\n}", "language": "scss" }, { "code": ".card {\n margin-left: 0;\n margin-right: -1.25rem;\n float: left;\n width: calc(50% - -0.625rem);\n}", "language": "css" } ] } [/block]
The `grid-column()` mixin specifies the width of an object, usually based on the number of columns an element should span. [block:code] { "codes": [ { "code": "@include grid-column(\n $columns: false,\n $collapse: false,\n $center: false\n );", "language": "scss", "name": "" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$columns` The `columns` argument is the *unitless* number of columns the element spans. The default of this property is `false` which will cause the object to be 100% of its container, or full-width. A set of values can also be passed in to specify the number of columns the object is as well as the number of total columns in this instance. Values can be separated with a `of` as in `7 of 12`. This is useful for specific layouts that break the default column count of the project defined in the `$grid-settings`. If only one value is passed, the number of total columns is the total-columns set in the `$grid-settings`. ### `$collapse` The `collapse` argument is a boolean attribute that will cause the element to consume the margins on either side of it. The default of this property is `false` which will cause the object preserve the gutters on either side. This option is useful when creating containers as well as nested grids. ### `$center` The `center` argument is a boolean attribute that will cause the element no longer be floated and will instead be centered in its container. [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column(2);\n}", "language": "scss", "name": null }, { "code": ".card {\n margin-left: 1.25rem;\n margin-right: 0;\n float: left;\n width: calc(16.66667% - 1.45833rem);\n}", "language": "css", "name": null } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n\t@include grid-column(2 of 5);\n}\n", "language": "scss" }, { "code": ".card {\n\tmargin-left: 1.25rem;\n margin-right: 0;\n float: left;\n width: calc(40% - 1.75rem);\n}", "language": "css" } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column($columns: 6, $center: true);\n}", "language": "scss" }, { "code": ".card {\n margin-left: auto;\n margin-right: auto;\n float: none;\n width: calc(50% - 1.875rem);\n} ", "language": "css" } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column($columns: 1 of 2, $collapse: true);\n}", "language": "scss" }, { "code": ".card {\n margin-left: 0;\n margin-right: -1.25rem;\n float: left;\n width: calc(50% - -0.625rem);\n}", "language": "css" } ] } [/block]
{"__v":1,"_id":"57616cbdca7ea70e00a12816","api":{"auth":"required","examples":{"codes":[]},"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"settings":"","url":""},"body":"The `grid-row()` mixin creates a container,  in to which grid columns and other objects can be placed. It contains 3 major features:\n1. It has collapsed gutters\n2. The object is full width but contains a max-width\n3. A clearfix is also added\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@include grid-row(\\n    $center: true,\\n    $max-width: grid-settings(row-width)\\n  );\",\n      \"language\": \"scss\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"options\",\n  \"title\": \"Arguments\"\n}\n[/block]\n### `$center` \nUnlike the `grid-column` mixin, the `center` argument in the `grid-column` mixin defaults to true. As with the columns, `true` causes the element not to be floated and instead be centered in its container. Setting this to false will cause the element to floated to the `default-float` set in the `$grid-settings`.\n\n### `$max-width`\n\nThe `max-width` argument directly sets the `max-width` property on the element. any format that fits the [`max-width` css specification](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) will be accepted. This value will default to the `max-width` set in the `$grid-settings`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Examples\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n  @include grid-row();\\n}\",\n      \"language\": \"scss\",\n      \"name\": null\n    },\n    {\n      \"code\": \".card {\\n  margin-left: auto;\\n  margin-right: auto;\\n  float: none;\\n  width: calc(100% - 0rem);\\n  max-width: 80rem;\\n}\\n\\n.card:after {\\n  clear: both;\\n  content: \\\"\\\";\\n  display: table;\\n}\",\n      \"language\": \"css\",\n      \"name\": null\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n\\t@include grid-row($center: false, $max-width: none;\\n}\\n\",\n      \"language\": \"scss\"\n    },\n    {\n      \"code\": \".card {\\n  margin-left: 0;\\n  margin-right: 0;\\n  float: left;\\n  width: calc(100% - 0rem);\\n  max-width: none;\\n}\\n\\n.card:after {\\n  clear: both;\\n  content: \\\"\\\";\\n  display: table;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]","category":"57616cbdca7ea70e00a12812","createdAt":"2016-02-29T00:41:34.971Z","excerpt":"Create default and collapsed rows\n\n[View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-row.scss)","githubsync":"","hidden":false,"isReference":false,"link_external":false,"link_url":"","order":3,"project":"56c293c347394f0d00e22868","slug":"grid-row","sync_unique":"","title":"Grid Row","type":"basic","updates":[],"user":"56c2937a326dc317005b99b2","version":"57616cbdca7ea70e00a1280f","childrenPages":[]}

Grid Row

Create default and collapsed rows [View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-row.scss)

The `grid-row()` mixin creates a container, in to which grid columns and other objects can be placed. It contains 3 major features: 1. It has collapsed gutters 2. The object is full width but contains a max-width 3. A clearfix is also added [block:code] { "codes": [ { "code": "@include grid-row(\n $center: true,\n $max-width: grid-settings(row-width)\n );", "language": "scss" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$center` Unlike the `grid-column` mixin, the `center` argument in the `grid-column` mixin defaults to true. As with the columns, `true` causes the element not to be floated and instead be centered in its container. Setting this to false will cause the element to floated to the `default-float` set in the `$grid-settings`. ### `$max-width` The `max-width` argument directly sets the `max-width` property on the element. any format that fits the [`max-width` css specification](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) will be accepted. This value will default to the `max-width` set in the `$grid-settings`. [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-row();\n}", "language": "scss", "name": null }, { "code": ".card {\n margin-left: auto;\n margin-right: auto;\n float: none;\n width: calc(100% - 0rem);\n max-width: 80rem;\n}\n\n.card:after {\n clear: both;\n content: \"\";\n display: table;\n}", "language": "css", "name": null } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n\t@include grid-row($center: false, $max-width: none;\n}\n", "language": "scss" }, { "code": ".card {\n margin-left: 0;\n margin-right: 0;\n float: left;\n width: calc(100% - 0rem);\n max-width: none;\n}\n\n.card:after {\n clear: both;\n content: \"\";\n display: table;\n}", "language": "css" } ] } [/block]
The `grid-row()` mixin creates a container, in to which grid columns and other objects can be placed. It contains 3 major features: 1. It has collapsed gutters 2. The object is full width but contains a max-width 3. A clearfix is also added [block:code] { "codes": [ { "code": "@include grid-row(\n $center: true,\n $max-width: grid-settings(row-width)\n );", "language": "scss" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$center` Unlike the `grid-column` mixin, the `center` argument in the `grid-column` mixin defaults to true. As with the columns, `true` causes the element not to be floated and instead be centered in its container. Setting this to false will cause the element to floated to the `default-float` set in the `$grid-settings`. ### `$max-width` The `max-width` argument directly sets the `max-width` property on the element. any format that fits the [`max-width` css specification](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) will be accepted. This value will default to the `max-width` set in the `$grid-settings`. [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-row();\n}", "language": "scss", "name": null }, { "code": ".card {\n margin-left: auto;\n margin-right: auto;\n float: none;\n width: calc(100% - 0rem);\n max-width: 80rem;\n}\n\n.card:after {\n clear: both;\n content: \"\";\n display: table;\n}", "language": "css", "name": null } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n\t@include grid-row($center: false, $max-width: none;\n}\n", "language": "scss" }, { "code": ".card {\n margin-left: 0;\n margin-right: 0;\n float: left;\n width: calc(100% - 0rem);\n max-width: none;\n}\n\n.card:after {\n clear: both;\n content: \"\";\n display: table;\n}", "language": "css" } ] } [/block]
{"__v":1,"_id":"57616cbdca7ea70e00a12817","api":{"auth":"required","examples":{"codes":[]},"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"settings":"","url":""},"body":"The `grid-push()` mixin causes an object to push or pull a [Grid Column](doc:grid-column) horizontally in the direction of the `default-float`. The mixin will override the column's margin and move the column left or right. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@include grid-push(\\n    $push: false\\n  );\",\n      \"language\": \"scss\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"options\",\n  \"title\": \"Arguments\"\n}\n[/block]\n### `$push` \nThe `push` argument is the *unitless* number of columns (based on the default column count) the element will be moved pushed. Positive values will push the column and negative values will pull it.\n\nThe default for this value is `false` which will cause the margin to reset to the default gutter value.\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"Like the grid-column mixin, grid-push also accepts [sub-grid](doc:grid-column) settings like `2 of 5` or `4 of 7`.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Examples\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n  @include grid-column(5);\\n  @include grid-push(2);\\n}\",\n      \"language\": \"scss\",\n      \"name\": null\n    },\n    {\n      \"code\": \".card {\\n\\tmargin-left: 1.25rem;\\n  margin-right: 0;\\n  float: left;\\n  width: calc(41.66667% - 1.77083rem);\\n  margin-left: calc(16.66667% - 1.45833rem + 2.5rem);\\n}\",\n      \"language\": \"css\",\n      \"name\": null\n    }\n  ]\n}\n[/block]","category":"57616cbdca7ea70e00a12812","createdAt":"2016-02-29T02:10:34.777Z","excerpt":"Push columns away from their container\n\n[View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-push.scss)","githubsync":"","hidden":false,"isReference":false,"link_external":false,"link_url":"","order":4,"project":"56c293c347394f0d00e22868","slug":"grid-push","sync_unique":"","title":"Grid Push","type":"basic","updates":[],"user":"56c2937a326dc317005b99b2","version":"57616cbdca7ea70e00a1280f","childrenPages":[]}

Grid Push

Push columns away from their container [View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-push.scss)

The `grid-push()` mixin causes an object to push or pull a [Grid Column](doc:grid-column) horizontally in the direction of the `default-float`. The mixin will override the column's margin and move the column left or right. [block:code] { "codes": [ { "code": "@include grid-push(\n $push: false\n );", "language": "scss" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$push` The `push` argument is the *unitless* number of columns (based on the default column count) the element will be moved pushed. Positive values will push the column and negative values will pull it. The default for this value is `false` which will cause the margin to reset to the default gutter value. [block:callout] { "type": "success", "body": "Like the grid-column mixin, grid-push also accepts [sub-grid](doc:grid-column) settings like `2 of 5` or `4 of 7`." } [/block] [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column(5);\n @include grid-push(2);\n}", "language": "scss", "name": null }, { "code": ".card {\n\tmargin-left: 1.25rem;\n margin-right: 0;\n float: left;\n width: calc(41.66667% - 1.77083rem);\n margin-left: calc(16.66667% - 1.45833rem + 2.5rem);\n}", "language": "css", "name": null } ] } [/block]
The `grid-push()` mixin causes an object to push or pull a [Grid Column](doc:grid-column) horizontally in the direction of the `default-float`. The mixin will override the column's margin and move the column left or right. [block:code] { "codes": [ { "code": "@include grid-push(\n $push: false\n );", "language": "scss" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$push` The `push` argument is the *unitless* number of columns (based on the default column count) the element will be moved pushed. Positive values will push the column and negative values will pull it. The default for this value is `false` which will cause the margin to reset to the default gutter value. [block:callout] { "type": "success", "body": "Like the grid-column mixin, grid-push also accepts [sub-grid](doc:grid-column) settings like `2 of 5` or `4 of 7`." } [/block] [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column(5);\n @include grid-push(2);\n}", "language": "scss", "name": null }, { "code": ".card {\n\tmargin-left: 1.25rem;\n margin-right: 0;\n float: left;\n width: calc(41.66667% - 1.77083rem);\n margin-left: calc(16.66667% - 1.45833rem + 2.5rem);\n}", "language": "css", "name": null } ] } [/block]
{"__v":1,"_id":"57616cbdca7ea70e00a12818","api":{"auth":"required","examples":{"codes":[]},"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"settings":"","url":""},"body":"The `grid-shift()` mixin uses relative positioning to shift a [Grid Column](doc:grid-column) horizontally. The mixin behaves similarly to [Grid Push](doc:grid-push) but will allow you to move sibling columns independent of each other. This is most useful in reordering columns of content on different screen sizes.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@include grid-shift(\\n  \\t$shift: false\\n  );\",\n      \"language\": \"scss\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"options\",\n  \"title\": \"Arguments\"\n}\n[/block]\n### `$shift` \nThe `shift` argument is the *unitless* number of columns (based on the default column count) the element will be moved shifted. Positive values will shift the column away from its float direction and negative values will shift them toward the default float direction.\n\nThe default for this value is `false` which will cause the object to reset its position.\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"\",\n  \"body\": \"Like the grid-column mixin, grid-push also accepts [sub-grid](doc:grid-column) settings like `2 of 5` or `4 of 7`.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Relative positioning\",\n  \"body\": \"The `grid-shift()` mixin requires that the column be [`position: relative`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) in order to be moved. This may effect other aspects of your layout, especially if you are using absolutely positioned elements inside the column.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Examples\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n  @include grid-column(5);\\n  @include grid-shift(4)\\n}\",\n      \"language\": \"scss\",\n      \"name\": null\n    },\n    {\n      \"code\": \".card {\\n  margin-left: 1.25rem;\\n  margin-right: 0;\\n  float: left;\\n  width: calc(33.33333% - 1.66667rem);\\n  left: calc(33.33333% - 1.66667rem + 1.25rem);\\n  position: relative;\\n}\",\n      \"language\": \"css\",\n      \"name\": null\n    }\n  ]\n}\n[/block]","category":"57616cbdca7ea70e00a12812","createdAt":"2016-02-29T02:48:36.095Z","excerpt":"Shift columns and reorder them within their container\n\n[View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-shift.scss)","githubsync":"","hidden":false,"isReference":false,"link_external":false,"link_url":"","order":5,"project":"56c293c347394f0d00e22868","slug":"grid-shift","sync_unique":"","title":"Grid Shift","type":"basic","updates":[],"user":"56c2937a326dc317005b99b2","version":"57616cbdca7ea70e00a1280f","childrenPages":[]}

Grid Shift

Shift columns and reorder them within their container [View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-shift.scss)

The `grid-shift()` mixin uses relative positioning to shift a [Grid Column](doc:grid-column) horizontally. The mixin behaves similarly to [Grid Push](doc:grid-push) but will allow you to move sibling columns independent of each other. This is most useful in reordering columns of content on different screen sizes. [block:code] { "codes": [ { "code": "@include grid-shift(\n \t$shift: false\n );", "language": "scss" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$shift` The `shift` argument is the *unitless* number of columns (based on the default column count) the element will be moved shifted. Positive values will shift the column away from its float direction and negative values will shift them toward the default float direction. The default for this value is `false` which will cause the object to reset its position. [block:callout] { "type": "success", "title": "", "body": "Like the grid-column mixin, grid-push also accepts [sub-grid](doc:grid-column) settings like `2 of 5` or `4 of 7`." } [/block] [block:callout] { "type": "info", "title": "Relative positioning", "body": "The `grid-shift()` mixin requires that the column be [`position: relative`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) in order to be moved. This may effect other aspects of your layout, especially if you are using absolutely positioned elements inside the column." } [/block] [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column(5);\n @include grid-shift(4)\n}", "language": "scss", "name": null }, { "code": ".card {\n margin-left: 1.25rem;\n margin-right: 0;\n float: left;\n width: calc(33.33333% - 1.66667rem);\n left: calc(33.33333% - 1.66667rem + 1.25rem);\n position: relative;\n}", "language": "css", "name": null } ] } [/block]
The `grid-shift()` mixin uses relative positioning to shift a [Grid Column](doc:grid-column) horizontally. The mixin behaves similarly to [Grid Push](doc:grid-push) but will allow you to move sibling columns independent of each other. This is most useful in reordering columns of content on different screen sizes. [block:code] { "codes": [ { "code": "@include grid-shift(\n \t$shift: false\n );", "language": "scss" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$shift` The `shift` argument is the *unitless* number of columns (based on the default column count) the element will be moved shifted. Positive values will shift the column away from its float direction and negative values will shift them toward the default float direction. The default for this value is `false` which will cause the object to reset its position. [block:callout] { "type": "success", "title": "", "body": "Like the grid-column mixin, grid-push also accepts [sub-grid](doc:grid-column) settings like `2 of 5` or `4 of 7`." } [/block] [block:callout] { "type": "info", "title": "Relative positioning", "body": "The `grid-shift()` mixin requires that the column be [`position: relative`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) in order to be moved. This may effect other aspects of your layout, especially if you are using absolutely positioned elements inside the column." } [/block] [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-column(5);\n @include grid-shift(4)\n}", "language": "scss", "name": null }, { "code": ".card {\n margin-left: 1.25rem;\n margin-right: 0;\n float: left;\n width: calc(33.33333% - 1.66667rem);\n left: calc(33.33333% - 1.66667rem + 1.25rem);\n position: relative;\n}", "language": "css", "name": null } ] } [/block]
{"__v":1,"_id":"57616cbdca7ea70e00a12819","api":{"auth":"required","examples":{"codes":[]},"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"settings":"","url":""},"body":"The `grid-clearfix()` mixin creates a standard clearfix with some basic options. This mixin is leveraged by other parts of the framework and is name spaced under `grid-` to avoid conflicts with other libraries.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@include grid-clearfix(\\n\\t  $clear: bottom\\n  );\",\n      \"language\": \"scss\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"options\",\n  \"title\": \"Arguments\"\n}\n[/block]\n### `$clear` \n\nthe `clear` argument defines where the clearfix is put. It only accepts 3 distict options\n* `bottom` will apply clearfix css to the `::after` pseudo-element.\n* `top` will apply clearfix css to the `::before` pseudo-element.\n* `both` will apply clearfix css to the `::before` and `::after` pseudo-elements.\n\nThe default value for `clear` is `bottom` since that is the most typically used behavior.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Examples\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n  @include grid-clearfix();\\n}\",\n      \"language\": \"scss\",\n      \"name\": null\n    },\n    {\n      \"code\": \".card:after {\\n  clear: both;\\n  content: \\\"\\\";\\n  display: block;\\n}\",\n      \"language\": \"css\",\n      \"name\": null\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".card {\\n  @include grid-clearfix($clear: both);\\n}\",\n      \"language\": \"scss\"\n    },\n    {\n      \"code\": \".card::before {\\n  clear: both;\\n  content: \\\"\\\";\\n  display: block;\\n}\\n\\n.card::after {\\n  clear: both;\\n  content: \\\"\\\";\\n  display: block;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]","category":"57616cbdca7ea70e00a12812","createdAt":"2016-02-29T01:21:14.930Z","excerpt":"Provides an easy way to include a clearfix for containing floats\n\n[View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-clearfix.scss)","githubsync":"","hidden":false,"isReference":false,"link_external":false,"link_url":"","order":6,"project":"56c293c347394f0d00e22868","slug":"grid-clearfix","sync_unique":"","title":"Grid Clearfix","type":"basic","updates":[],"user":"56c2937a326dc317005b99b2","version":"57616cbdca7ea70e00a1280f","childrenPages":[]}

Grid Clearfix

Provides an easy way to include a clearfix for containing floats [View Source](https://github.com/whmii/cask/blob/v0.3.2/core/mixins/_grid-clearfix.scss)

The `grid-clearfix()` mixin creates a standard clearfix with some basic options. This mixin is leveraged by other parts of the framework and is name spaced under `grid-` to avoid conflicts with other libraries. [block:code] { "codes": [ { "code": "@include grid-clearfix(\n\t $clear: bottom\n );", "language": "scss" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$clear` the `clear` argument defines where the clearfix is put. It only accepts 3 distict options * `bottom` will apply clearfix css to the `::after` pseudo-element. * `top` will apply clearfix css to the `::before` pseudo-element. * `both` will apply clearfix css to the `::before` and `::after` pseudo-elements. The default value for `clear` is `bottom` since that is the most typically used behavior. [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-clearfix();\n}", "language": "scss", "name": null }, { "code": ".card:after {\n clear: both;\n content: \"\";\n display: block;\n}", "language": "css", "name": null } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-clearfix($clear: both);\n}", "language": "scss" }, { "code": ".card::before {\n clear: both;\n content: \"\";\n display: block;\n}\n\n.card::after {\n clear: both;\n content: \"\";\n display: block;\n}", "language": "css" } ] } [/block]
The `grid-clearfix()` mixin creates a standard clearfix with some basic options. This mixin is leveraged by other parts of the framework and is name spaced under `grid-` to avoid conflicts with other libraries. [block:code] { "codes": [ { "code": "@include grid-clearfix(\n\t $clear: bottom\n );", "language": "scss" } ], "sidebar": true } [/block] [block:api-header] { "type": "options", "title": "Arguments" } [/block] ### `$clear` the `clear` argument defines where the clearfix is put. It only accepts 3 distict options * `bottom` will apply clearfix css to the `::after` pseudo-element. * `top` will apply clearfix css to the `::before` pseudo-element. * `both` will apply clearfix css to the `::before` and `::after` pseudo-elements. The default value for `clear` is `bottom` since that is the most typically used behavior. [block:api-header] { "type": "basic", "title": "Examples" } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-clearfix();\n}", "language": "scss", "name": null }, { "code": ".card:after {\n clear: both;\n content: \"\";\n display: block;\n}", "language": "css", "name": null } ] } [/block] [block:code] { "codes": [ { "code": ".card {\n @include grid-clearfix($clear: both);\n}", "language": "scss" }, { "code": ".card::before {\n clear: both;\n content: \"\";\n display: block;\n}\n\n.card::after {\n clear: both;\n content: \"\";\n display: block;\n}", "language": "css" } ] } [/block]