Skip to content

Instantly share code, notes, and snippets.

View babsgosgens's full-sized avatar
🤡
Life’s a parade

Babs Gösgens babsgosgens

🤡
Life’s a parade
  • Rosmalen, Netherlands
View GitHub Profile
@babsgosgens
babsgosgens / function-fraction-to-text
Created August 7, 2013 09:43
Convert a fraction to a word. Use to build style rules based on column widths.
// Expects a fraction
@function fraction-to-text($fraction) {
@if $fraction == 1/1 { @return "full"; }
@if $fraction == 1/2 { @return "half"; }
@if $fraction == 1/3 { @return "third"; }
@if $fraction == 1/4 { @return "fourth"; }
@if $fraction == 1/5 { @return "fifth"; }
@if $fraction == 1/6 { @return "sixth"; }
@if $fraction == 1/7 { @return "seventh"; }
@if $fraction == 1/8 { @return "eighth"; }
@babsgosgens
babsgosgens / setting-root-selector
Created August 10, 2013 08:20
Sets a maximum width on a root container with a selector of your choice. The grid will not stretch beyond this width. The root container can be positioned left or center, for alternate positions you can provide your own behavior.
$root-selector: ".root";
$root-max-width: 1152px;
$root-position: left;
$column-selector: ".column";
$column-spacing: 2*$base-line-height;
$column-spacing-unit: 1px; // Revisit this, looks redundant
$column-widths: 1/2, 1/4, 1/3, 2/3, 3/4; // Omit 1/1, it is rendered by default
$column-width-default: 1/1;
$column-breakpoint: false !default;