From e3858412dfc2138af93024ae431559eb70ea3ac2 Mon Sep 17 00:00:00 2001 From: Ashley Nolan Date: Thu, 6 Apr 2017 14:33:46 +0100 Subject: [PATCH] Update README with custom variables --- readme.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/readme.md b/readme.md index 57200d0..6c256a1 100755 --- a/readme.md +++ b/readme.md @@ -27,6 +27,42 @@ Alternatively, you can download the source files from Github and include them as Finally, if you just want some straight up CSS, you can either grab a copy of the [generated CSS file – index.css](https://github.com/TryKickoff/kickoff-grid.css/blob/master/index.css) which is based off our standard variables, or you can generate your own by downloading the repo, changing the variables in `scss/_grid-variables.scss` file and recompiling the code using Sass. +## Custom Grid Variables + +Here is a list of the grid variables that you can override. Simply copy the variable and change the value as required. + +``` +/** + * Grid Variables + * ================================= + * These are defined here so that the grid can run as a standalone module (outside of Kickoff), + * as well as allowing these files to be generated into standard CSS. + * + * When importing the grid into your own project, copy the variables from this file into your own variables.scss + * They will then override the values specified here (as long as the grid is imported below where your own variables are defined). + */ + +$breakpoints: ko-map-to-em(( + narrow : 400px, + mid : 750px, + wide : 1000px, + huge : 1250px +), 16) !default; + + +// Setup layout max-width +$layout-max-width : 1000 !default; // [in pixels] + +// Grid specific variables +$grid-column-count : 12 !default; // Total column count +$grid-gutter-width : 20 !default; // [in pixels] + +//Settings here override & affect the grid classes output +$responsive-grid-sizes : true !default; // Disable this if you don't want grid sizes for each breakpoint +$use-legacy-grid : true !default; // Disable this if you don’t want to output .no-flexbox classes for older browsers to use +``` + + ## Usage For details on how to use the grid’s features once imported, [see our documentation](http://trykickoff.com/learn/grid):