Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
94 stars 17 forks source link

Allow use of percentage selectors #30

Closed wheresrhys closed 9 years ago

wheresrhys commented 10 years ago

If e.g. you are using a 3 column grid but want to divide some areas into 2 using a 50% selector would be desirable

Proposed implementation


$o-grid-percent-selectors: null !default;

@mixin createGrid(
    ...
     $includePercentSelectors: $o-grid-percent-selectors // list of percentage sizes to include also
) {
   // read the list of percentages and print out selectors and calculate values
}

$o-grid-percent-selectors: 50;
createGrid();
//outputs
[data-o-grid-sizing~="50%] {
    width: 50%;
}

createGrid(..., $includePercentSelectors: 27.34256 12 );
//outputs
[data-o-grid-sizing~="27.34256%] {
    width: 27.34256%;
}
[data-o-grid-sizing~="12%] {
    width: 12%;
}

Should probably have another mixin too so that modules/products can add to the list of required percentage selectors

kaelig commented 9 years ago

This could lead to a proliferation of non-standard grid measures that would create a strong dependency on o-grid for product-specific things.