grid snippets

Show and Hide (toggle) the Blueprint Grid with a JavaScript

Tagged blueprint, css, blueprintcss, toggle, grid, javascript  Languages javascript

This snippet--which could be improved on--allows you to easily display and hide the BlueprintCSS grid.

Put the following code inside the <head> element:

<style title="grid" type="text/css">
        .container { }
</style>
<script type="text/javascript">
    function toggleGrid() {
        if (!document.styleSheets) return;
    
        var cssTitle     = "grid"
        var selectorName = ".container";
        var cssText      = "background: url('images/grid.png');";
        var css = new Array();
    
        // Find the stylesheet
        for(i = 0; i < document.styleSheets.length; i++)
        {
            var styleSheet = document.styleSheets[i];
            
            if(styleSheet.title == cssTitle) {
                if (document.styleSheets[i].cssRules)
                    css = document.styleSheets[i].cssRules;
                else if (document.styleSheets[i].rules)
                    css = document.styleSheets[i].rules;
                else return;
                
                break;
            }
        }

        // Find the selector
        for (i = 0; i < css.length; i++) {
        
            if ((css[i].selectorText.toLowerCase() == selectorName)) {
                if(css[i].style.cssText == "") {
                    css[i].style.cssText = cssText;
                }
                else {
                    css[i].style.cssText = "";
                }
            }
        }
    }
</script>

Change selectorName or cssText, if needed. Next add the following link, for example, to the footer:

<a href="javascript:toggleGrid();" id="toggle-grid">Show grid</a>

Now when you click the link, the grid will be displayed. Click again to hide it.

Note that this is a simple example of how to change a CSS style sheet dynamically with JavaScript. You can use it to change any selector at runtime.

Creating A Responsive Mobile-First Template with Susy

Tagged css, sass, susy, responsive, mobile, grid  Languages css

Susy version 1:

// http://susy.oddbird.net/tutorial/
@import "susy/sass/_susy"
@include border-box-sizing

$show-grid-backgrounds: true

// Mobile-first grid
$total-cols             : 4 
$col-width              : 4em
$gutter-width           : 1em
$side-gutter-width      : $gutter-width
$container-style        : static

// Tablet grid
$tablet-cols      : 10
// 768px
$tablet-width     : 48em
$tablet         : $tablet-width $tablet-cols
 
$desktop-cols   : 12
// 960px
$desktop-width  : 60em
$desktop        : $desktop-width $desktop-cols

.container
  // Tell susy we have 3 different layouts
  @include container($total-cols, $tablet-cols, $desktop-cols)
  @include susy-grid-background

  // Mobile phones
  #content 
    @include span-columns(4, 4)
  #sidebar 
    @include span-columns(4, 4)

  // Tablets
  @include at-breakpoint($tablet)
    @include container

    #content 
      @include span-columns(7, $tablet-cols)
    #sidebar 
      @include span-columns(3 omega, $tablet-cols)

  // Desktops
  @include at-breakpoint($desktop)
    @include container
    #content 
      @include span-columns(8, $desktop-cols)
    #sidebar 
      @include span-columns(4 omega, $desktop-cols)

Susy version 2????

Consistent Spacing Between Elements in Zurb Foundation

Tagged grid, zurb, foundation, spacing  Languages 

The width of column gutters is defined in _settings.scss :

$column-gutter: rem-calc(30);

Use the $column-gutter variable for calculating spacing between elements, for example:

.header, .carousel {
  margin-bottom: $colum-gutter;
}