Jump to content

Grid Calculator in Sass

Recommended Posts

Probabil aveti nevoie uneori s? dezvolta?i pe diferite m?rimi când face?i un layout ?i s? calcula?i întotdeauna ?inta ?i contextul pentru fiecare coloan? în parte, de la 1, la cât ave?i nevoie, 12, 24 etc. Cu pu?inele mele cuno?tin?e în Sass am creat ceva destul de folositor pentru a nu mai face manual calculul, a?a c? am creat un mini-calculator pentru coloane.

Orice sugestie în plus e binevenit? atât timp cât se leag? de Sass ?i de micul calculator :))

// If it is set to true, the function will display values in percentages
$grid-width-in-percentage: true;

// If it is set to true, the function will display values in pixels.
$grid-width-in-pixels: true;

// Columns or context. The currently value result in 960 (in pixels) and 100% in percentages.
$columns: 12;

// The width of the grid for each columns. Ex: the first columns will have 60px and so on ...
$column-width: 60;

// The width of the gap between each columns. Note! One columns don't have gap.
$gutter-width: 20;

// This is the number from where grid begin to count in loop.
$number-offset: 1;

// The margin before the first grid and after the last grid.
$margin: 20;

// Pixel to precentage formula: target (width (= columns) + margin + gutter width) / context (total width (= context is columns)) = result

@InClude grid;

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...