diff --git a/_docs/settings/core.md b/_docs/settings/core.md index 43bf711..1bc85c5 100644 --- a/_docs/settings/core.md +++ b/_docs/settings/core.md @@ -6,11 +6,12 @@ page-class: c-page--docs has-sub-content: true sub-content: docs filename: "_settings.core.scss" +permalink: /docs/settings/core/ --- {% include file-info.html %} -This is probably the most important file of the whole framework. It provides some really far-reaching Sass variables which—when altered—can change the look of your application massivley. That's why you should determine the values of the variables right at the beginning of your project. +Although it might not look like that, but this is probably the most important file of the whole framework. It provides some really far-reaching Sass variables which—when altered—can change the look of your application massivley. That's why you should determine the values of the variables right at the beginning of your project. The two most important variables are: @@ -21,4 +22,48 @@ The following is very important: $inuit-global-spacing-unit: round($inuit-global-line-height) !default; -What this does is reassigning the global line-height to a multipurpose spacing variable +Probably the most opinionated thing inuitcss will ever do is reassign your `$inuit-global-line-height` variable to `$inuit-global-spacing-unit`. This value then becomes the cornerstone of your UI, acting as the default margin and padding value for any components that require it. + +While this might seem overly opinionated, it does mean that: + +1. **You get a free vertical rhythm** because everything sits on a multiple of your baseline, and… +2. **We reduce the amount of [magic numbers](http://csswizardry.com/2012/11/code-smells-in-css/#magic-numbers) in our codebase** because we can rationalise where the majority of values in our CSS came from. + +On top of `$inuit-global-spacing-unit` as base spacing variable, you also get four variants to use for spacings: + +* `$inuit-global-spacing-unit-tiny` +* `$inuit-global-spacing-unit-small` +* `$inuit-global-spacing-unit-large` +* `$inuit-global-spacing-unit-huge` + +They all depend on `$inuit-global-spacing-unit` regarding their values, but you can control the factor in which they alter from the base spacing by overriding their value: + + $inuit-global-spacing-unit-factor-tiny: 0.25 !default; + $inuit-global-spacing-unit-factor-small: 0.5 !default; + $inuit-global-spacing-unit-factor-large: 2 !default; + $inuit-global-spacing-unit-factor-huge: 4 !default; + +## Variables + + // The basic font-size for your whole site + $inuit-global-font-size + + // The basic line-height for your whole site + $inuit-global-line-height + + // A base spacing variable for your whole project + $inuit-global-spacing-unit + + // Sizing variants for spacings + $inuit-global-spacing-unit-tiny + $inuit-global-spacing-unit-small + $inuit-global-spacing-unit-large + $inuit-global-spacing-unit-huge + + // Controls the factor in which the sizing + // variants differ from the base spacing + $inuit-global-spacing-unit-factor-tiny + $inuit-global-spacing-unit-factor-small + $inuit-global-spacing-unit-factor-large + $inuit-global-spacing-unit-factor-huge + diff --git a/_docs/settings/index.md b/_docs/settings/index.md deleted file mode 100644 index cbdff80..0000000 --- a/_docs/settings/index.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: page -title: "Settings" -group: settings -page-class: c-page--docs -has-sub-content: true -sub-content: docs -permalink: /docs/settings/ ---- - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptatum -reiciendis provident dignissimos repudiandae qui ratione nam dicta officia, -quidem illo non id laboriosam, eum recusandae assumenda repellat autem. -Suscipit. - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ipsum -beatae inventore, commodi quae odio, laborum eum reiciendis quibusdam id, -aliquam facere est aut doloremque. Neque in voluptatibus, unde magnam repellat -ullam quos nihil voluptates iste, suscipit fugit saepe, quidem, minima veritatis -quae aspernatur. Dolores culpa quod, sunt nesciunt eligendi repudiandae odit -ipsum cum repellat veritatis ut aspernatur, doloremque reiciendis illum maxime -consectetur quisquam cumque nemo, modi rem provident, vel fugit. Modi deserunt, -iusto tempore impedit commodi reprehenderit iure. Corporis voluptate autem -mollitia nulla, modi officiis, fugiat magnam nostrum distinctio rem temporibus -vero ipsum, similique nemo adipisci rerum odio quis error nisi veritatis. - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur -deserunt perferendis repellendus totam voluptatibus quia eaque at, commodi -consectetur ipsum aliquid molestiae, excepturi porro quaerat facere odio. Amet -eius sint minus, provident, aut consequuntur culpa placeat autem, iste neque -perspiciatis vero tempore molestiae possimus recusandae reprehenderit error -alias. diff --git a/_includes/nav-docs.html b/_includes/nav-docs.html index 4bfdd13..331b2df 100644 --- a/_includes/nav-docs.html +++ b/_includes/nav-docs.html @@ -27,7 +27,7 @@
  • - Settings + Settings