| <h1>Responsive logic with <a href="https://github.com/HugoGiraudel/SassyJSON">SassyJSON</a></h1> | |
| <p><a href="#demo">This is a demonstration</a> of how SassyJSON can be useful for Responsive Design.</p> | |
| <h2>The <em>real world</em> problem</h2> | |
| <p>Sometimes you need to trigger some JS actions, like initializing a lib, changing some plugin options, but only when the layout is in a specific configuration. For instance, changing the zoom of a map depending on how many columns it fills, or switching from a simple lightweight list of images to a full featured gallery or just <a href="http://24ways.org/2011/conditional-loading-for-responsive-designs/">loading content</a>...</p> | |
| <p>There is some micro-libraries for this kind of thing, or you can do it yourself. One solution is to hard-code in your JS the same media-queries you used in your CSS. Another solution is to check if an element is visible or not, and bind this visibility with the same media-queries that drives the layout. The same hack can be implemented in m |
| // ---- | |
| // Sass (v3.3.0.rc.2) | |
| // Compass (v1.0.0.alpha.17) | |
| // SassyCast (v0.0.1) | |
| // ---- | |
| @import "SassyCast"; | |
| @function to-list($value, $keep: 'both') { | |
| @if type-of($value) == map { |
I think it's time for Sass frameworks to agree on some standards. There are plenty of them now and it's great! We even have the chance to combine them without too much bloat if we want to, but it's not as easy as it should. For instance, I can use :
| <div class="checkbox"> | |
| <input id="my-checkbox" type="checkbox"> | |
| <label for="my-checkbox"> | |
| <span class="checked-content">Checked</span> | |
| <span class="unchecked-content">Unchecked</span> | |
| </label> | |
| </div> | |
| <div class="checkbox fake-checkbox"> | |
| <input id="my-fake-checkbox" type="checkbox"> |
| <?php | |
| function tirage_list($nb_tirage = 5, $list = array()) { | |
| $result = array(); | |
| for($i = 1; $i <= $nb_tirage; $i++) { | |
| $count = count($list); | |
| if($count > 0) { | |
| $result = array_merge($result, array_splice($list, rand(0, $count - 1), 1)); | |
| } | |
| } | |
| return $result; |
| // les mixins commençant par with-*** concernent les conditions via sélecteur (parent) | |
| @mixin with-two-sidebars { | |
| .l-main-wrapper--with-two-sidebars { | |
| @content; | |
| } | |
| } | |
| // les mixins commençant par when-*** concernent les conditions via media-query | |
| @mixin when-sidebar-left-is-visible { | |
| @include for-min-width(40em) { |