x-grid

Version:

Scalable grid. Source provides sass mixins to generate grids classes for different breakpoints.

56 lines (50 loc) • 9.89 kB

HTML

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>flexibleGrid</title><link rel="stylesheet" href="assets/css/main.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><meta property="og:title" content="flexibleGrid - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="Release the docs!"><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">flexibleGrid</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-function"><a href="#undefined-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="media-querie" data-type="function"><a href="#undefined-function-media-querie">media-querie</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-mixin"><a href="#undefined-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="box-sizing" data-type="mixin"><a href="#undefined-mixin-box-sizing">box-sizing</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="hide-column" data-type="mixin"><a href="#undefined-mixin-hide-column">hide-column</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="show-column" data-type="mixin"><a href="#undefined-mixin-show-column">show-column</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="center-column" data-type="mixin"><a href="#undefined-mixin-center-column">center-column</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="iterate-properties" data-type="mixin"><a href="#undefined-mixin-iterate-properties">iterate-properties</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="undefined-function-media-querie"><h3 class="item__heading"><a class="item__name" href="#function-media-querie">media-querie</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function media-querie() { $range-value: map-has-key($screen-list, $screen); @if $range-value { @if $range == "up" { $lower-boundary: get-map-values($screen,range,$value-index:1); @return "only screen and (min-width:#{$lower-boundary})"; } @else if $range == "only" { $lower-boundary: get-map-values($screen,range,$value-index:1); $upper-boundary: get-map-values($screen,range,$value-index:2); @return "only screen and (min-width:#{$lower-boundary}) and (max-width:#{$upper-boundary})"; } @else if $range == "down" { $upper-boundary: get-map-values($screen,range,$value-index:2); @return "only screen and (max-width:#{$upper-boundary})"; } } @else { @return false; } }" data-collapsed="@function media-querie() { ... }"><code>@function media-querie() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>mixin to create clear columns classes parameters include $screen- and $range: "up","only","down"; @group API</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>sudheer</p></li></ul></section></section><section class="main__sub-section" id="undefined-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="undefined-mixin-box-sizing"><h3 class="item__heading"><a class="item__name" href="#mixin-box-sizing">box-sizing</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin box-sizing() { -webkit-box-sizing: $type; -moz-box-sizing: $type; box-sizing: $type; }" data-collapsed="@mixin box-sizing() { ... }"><code>@mixin box-sizing() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>mixin to create clear columns classes parameters include $screen- and $range: "up","only","down";</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p></section><section class="main__item container item" id="undefined-mixin-hide-column"><h3 class="item__heading"><a class="item__name" href="#mixin-hide-column">hide-column</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin hide-column() { $class-name: make-grid-class(hide,$screen,$range); .#{$class-name} { display: none; } }" data-collapsed="@mixin hide-column() { ... }"><code>@mixin hide-column() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>mixin to hide classes parameters include $screen- and $range: "up","only","down";</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p></section><section class="main__item container item" id="undefined-mixin-show-column"><h3 class="item__heading"><a class="item__name" href="#mixin-show-column">show-column</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin show-column() { @each $show-type in $types { $class-name: make-grid-class($show-type,$screen,$range); .#{$class-name} { display: #{$show-type}; } } }" data-collapsed="@mixin show-column() { ... }"><code>@mixin show-column() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>mixin to create show classes parameters include $screen- and $range: "up","only","down";</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p></section><section class="main__item container item" id="undefined-mixin-center-column"><h3 class="item__heading"><a class="item__name" href="#mixin-center-column">center-column</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin center-column() { $class-name: make-grid-class(hide,$screen,$range); .#{$class-name} { margin: 0px auto; float: none; } }" data-collapsed="@mixin center-column() { ... }"><code>@mixin center-column() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>mixin to create center columnclasses parameters include $screen- and $range: "up","only","down";</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p></section><section class="main__item container item" id="undefined-mixin-iterate-properties"><h3 class="item__heading"><a class="item__name" href="#mixin-iterate-properties">iterate-properties</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin iterate-properties() { @each $property, $values in $all-properties { @if type-of($values) != map and $property != range and type-of($property) != list { #{$property}: $values; } @else if $property != range { #{$property}{ @include iterate-properties($values); } } } }" data-collapsed="@mixin iterate-properties() { ... }"><code>@mixin iterate-properties() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>mixin to create clear columns classes parameters include $screen- and $range: "up","only","down";</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><span class="project-info__name">flexibleGrid</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>