WOLA: Advocacy for Human Rights in the Americas

Getting Started

This is a basic HTML template to help you get started with Base. Apart from the grid system, Base includes a sensible reset to start styling your site on.


Quick Reference

These quick guides will help you get started. For more detailed instructions check out the documentation.

Grid (_layout.scss)

Mixin Usage
@include container() Apply to an element wrapping the column structure
@include columns($columns, $offset, $gutter) @include columns(8, 0, 0)
@include responsive-columns($breakpoint, $columns, $offset, $gutter); Apply to overwrite default breakpoint columns

Grid Settings(_variables.scss)

Grid breakpoints and settings are set in _variables.scss

Grid Examples(_layout.scss)

@include container()
@include columns(3);
@include columns(4);
@include columns(5);
@include columns(5, 2);
@include columns(5);
@include columns(9);
@include columns(6);
@include columns(6);
@include columns(3);
@include columns(9, 0, 10%);
@include columns(3);
@include columns(6); @include responsive-columns('mobile', 0.5);
@include columns(6); @include responsive-columns('mobile', 0.5);
@include columns(5, 0, 0); @include responsive-columns('mobile', 0.4, 0, 0);
@include columns(7, 0, 0); @include responsive-columns('mobile', 0.6, 0, 0);