OO Sass Grid ('-' * 12)
A Pen by Jason Weaver on CodePen.
| initialPayload = { | |
| brands: ['BMW', 'Cheverolet', 'Dodge', 'Ford', 'Jeep'], | |
| cars: [ | |
| { | |
| 'make': 'BMW', | |
| 'model': 'X5', | |
| 'colors': ['red', 'black', 'white', 'silver'] | |
| }, | |
| { | |
| 'make': 'Cheverolet', |
| syntax on | |
| set t_Co=256 |
| bold=$(tput bold) | |
| reset=$(tput sgr0) | |
| export PS1="\u@\h 📂 \[$bold\]\W\[$reset\] " | |
| export CLICOLOR=1 | |
| export LSCOLORS=exGxcxdxbxegedabagacad |
| {% for block in entry.modulesMatrix %} | |
| {% switch block.type %} | |
| {% case "hero" %} | |
| <div class="section first-section {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% set bgImage = block.heroBackgroundImage.first() %}{% if bgImage %}background-image: url({{ siteUrl }}{{ bgImage.url() }}); background-size: cover;{% endif%}{% if block.backgroundColor.contains('Alt Background Color') %} {{ block.altBackgroundColor }}{% endif%}"> | |
| {% if block.heroOverlay | length %} | |
| <div class="hero-overlay" style="background-color: {{ block.heroOverlayColor }};"></div> | |
| {% endif %} | |
| <div class="flex"> |
| .table-wrap { | |
| width: 100%; | |
| overflow-x: scroll; | |
| margin-bottom: 50px; | |
| } | |
| table { | |
| min-width: 600px; | |
| border-spacing: 0; | |
| border-collapse: collapse; | |
| } |
OO Sass Grid ('-' * 12)
A Pen by Jason Weaver on CodePen.
| # Replace any brackets with real values | |
| # Try to ssh in to DREAMHOST (ensure it no longer asks for a PW); you may want to restart Terminal | |
| ssh [user]@[host] | |
| cd ~ | |
| mkdir [mydomain_com].git | |
| cd [mydomain_com].git | |
| git init --bare | |
| vi hooks/post-receive | |
| # Enter the code from the "post-receive" file (in this gist); save + quit |
| // --- Variables | |
| // --------------------------------------------------- | |
| // grid | |
| $gutter: 10; | |
| $max-width: 1100; // Max grid wrap width | |
| $sm-column-count: 4; | |
| $med-column-count: 6; | |
| $lg-column-count: 12; | |
| $mqs: 380; // small breakpoint |
| Site = {}; | |
| // show/hide pattern | |
| Site.showHide = function(element, container) { | |
| $(element).toggleClass("active"); | |
| $(container).toggleClass("show"); | |
| }; | |
| $(document).ready(function() { | |
| Site.showHide('#button', '#container'); |
Really liked this switch on Dribbble. Wanted to see if I could make an all css version.
A Pen by Jason Weaver on CodePen.