diff --git a/_docs/tools/clearfix.md b/_docs/tools/clearfix.md index 074fa99..91213bc 100644 --- a/_docs/tools/clearfix.md +++ b/_docs/tools/clearfix.md @@ -10,4 +10,13 @@ filename: "_tools.clearfix.scss" {% include file-info.html %} -Clearfix mixin +A clearfix mixin to prevent collapsing of two (or more) floated elements. + +Further reading: +[http://www.cssmojo.com/the-very-latest-clearfix-reloaded/](http://www.cssmojo.com/the-very-latest-clearfix-reloaded/) + +## Mixins + + .usage { + @include inuit-clearfix(); + } diff --git a/_docs/tools/font-size.md b/_docs/tools/font-size.md index 1283619..3c0e189 100644 --- a/_docs/tools/font-size.md +++ b/_docs/tools/font-size.md @@ -10,4 +10,71 @@ filename: "_tools.font-size.scss" {% include file-info.html %} -Font-size mixin +Create a fully formed type style (sizing and vertical rhythm) by passing in a +single value, e.g.: + + .usage { + @include inuit-font-size(12px); + } + +This will generate a rem-based font-size, a `px` fallback for older browsers, as well as a unitless line-height +which will place the element on your baseline, e.g.: + + // CSS + .usage { + font-size: 12px; + font-size: 0.75rem; + line-height: 2; + } + +If you do not want to generate a line-height automatically, you +simply pass in your own value as a second paramater: + + .usage { + @include inuit-font-size(12px, 1.5); + } + +This will yield: + + // CSS + .usage { + font-size: 12px; + font-size: 0.75rem; + line-height: 1.5; + } + +This parameter can be any integer, `inherit`, or `normal`. If you don't want +a line-height at all, pass in a second paramater of `false` or `"none"`: + + .usage { + @include inuit-font-size(12px, false); + } + +This will yield: + + // CSS + .usage { + font-size: 12px; + font-size: 0.75rem; + } + +There may be situations where the generated declarations of the mixin need to carry an `!important` (e.g. when you are using the mixin in the utilities layer). In this case you can just pass `$important: true` as last parameter in the mixin call: + + .usage { + @include inuit-font-size(12px, $important: true); + } + + // CSS + .usage { + font-size: 12px !important; + font-size: 0.75rem !important; + line-height: 2 !important; + } + + + +## Mixins + + .usage { + @include inuit-font-size(, [line-height], [$important: true]); + } diff --git a/_docs/tools/hidden.md b/_docs/tools/hidden.md index 5367132..6452098 100644 --- a/_docs/tools/hidden.md +++ b/_docs/tools/hidden.md @@ -10,4 +10,10 @@ filename: "_tools.hidden.scss" {% include file-info.html %} -Mixin to hide elements accessibility-friendly +Mixin to quickly apply accessible hiding to elements. + +## Mixins + + .usage { + @include inuit-hidden-visually(); + } diff --git a/_docs/tools/index.md b/_docs/tools/index.md deleted file mode 100644 index 66e0190..0000000 --- a/_docs/tools/index.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: page -title: "Tools" -group: tools -page-class: c-page--docs -has-sub-content: true -sub-content: docs -permalink: /docs/tools/ ---- - -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/_docs/tools/rem.md b/_docs/tools/rem.md deleted file mode 100644 index 8b18e43..0000000 --- a/_docs/tools/rem.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -layout: page -title: "Rem" -group: tools -page-class: c-page--docs -has-sub-content: true -sub-content: docs -filename: "_tools.rem.scss" ---- - -{% include file-info.html %} - -Mixin to convert `px`-values to `rem`-values diff --git a/_includes/nav-docs.html b/_includes/nav-docs.html index 331b2df..f70f8db 100644 --- a/_includes/nav-docs.html +++ b/_includes/nav-docs.html @@ -38,7 +38,7 @@
  • - Tools + Tools