mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-10 06:07:56 -05:00
Finish grids documentation, fix a few issues with examples
This commit is contained in:
Mark Perkins
221
README.md
221
README.md
@@ -1,7 +1,7 @@
|
||||
ClearLess
|
||||
=========
|
||||
|
||||
A reuseable collection of carefully-considered [Less](http://lesscss.org/) mixins.
|
||||
A reuseable collection of carefully-considered [Less](http://lesscss.org/) mixins, or *YALML* (Yet Another Less Mixin Library).
|
||||
|
||||
The core tenets of this mixin library are to *avoid output bloat wherever possible* (via duplicated properties etc) and to *provide flexibile, configurable solutions* to the problems that are addressed by the library (i.e. by using Modernizr classes, browser hacks or not, etc). The aim is to give the author the benefits of reusable shortcuts without obliterating personal style and generating bloated stylesheets.
|
||||
|
||||
@@ -547,11 +547,10 @@ p {
|
||||
Generates a font-size property with the pixel value converted to **rems** and provides a pixel based fallback for browsers that do not support rem units.
|
||||
|
||||
```css
|
||||
.font-size-rems( <@px-size> [, <@context-px-size>] );
|
||||
.font-size-rems( <@px-size> );
|
||||
```
|
||||
|
||||
* `@px-size`: Font size (in pixels) to convert to rems.
|
||||
* `@context-px-size`: *(Optional)* The font size (in pixels) of the current context. Defaults to the value of `@base-font-size` if not specified.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
@@ -1183,6 +1182,31 @@ Gutters are applied using the margin-right property. The columns that represent
|
||||
|
||||
Groups of columns need to be wrapped in a parent element with the appropriate `.column-wrapper()` or `.inline-column-wrapper()` mixin applied to them.
|
||||
|
||||
### SETTING: @total-columns
|
||||
|
||||
```css
|
||||
@total-columns: 12;
|
||||
```
|
||||
|
||||
The total number of columns for the top-level grid.
|
||||
|
||||
### SETTING: @column-width
|
||||
|
||||
```css
|
||||
@column-width: 60px;
|
||||
```
|
||||
|
||||
The width of a column, in pixels. It should be noted that the pixel value is never actually used itself - instead it will be converted to a percentage value. If you have flat visuals you can take this value straight from your visual, whatever width they are fixed at.
|
||||
|
||||
### SETTING: @gutter-width
|
||||
|
||||
```css
|
||||
@gutter-width: 20px;
|
||||
```
|
||||
|
||||
The width of a gutter, in pixels. It should be noted that the pixel value is never actually used itself - instead it will be converted to a percentage value. If you have flat visuals you can take this value straight from your visual, whatever width they are fixed at.
|
||||
|
||||
|
||||
### .column-wrapper()
|
||||
|
||||
Applied to the parent element of the grid columns for **floated grids**. This (by design) *does not* apply any float clearing to the columns - you will likely want to use the `.clearfix()` mixin (or `overflow:hidden;` or whatever you're perferred float clearing methid is!) to account for this.
|
||||
@@ -1198,11 +1222,7 @@ Applied to the parent element of the grid columns for **floated grids**. This (b
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
letter-spacing: -0.31em;
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
.ie7 .example {
|
||||
letter-spacing: normal;
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1221,13 +1241,17 @@ Applied to the parent element of the grid columns for **inline-block grids**.
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
width: 100%;
|
||||
letter-spacing: -0.31em;
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
.ie7 .example {
|
||||
letter-spacing: normal;
|
||||
}
|
||||
```
|
||||
|
||||
### .column()
|
||||
|
||||
When supplied with no arguments, this mixin just sets up the necessary shared styles to make an element into a **floated** column. The `.span()` mixin should then be used to apply widths and margins accordingly.
|
||||
When supplied with no arguments, this mixin just sets up the necessary shared styles to make an element into a **floated** column. The `.span()` mixin should then be used to apply the correct width accordingly.
|
||||
|
||||
When supplied with a column count, this mixin effectively combines both of the above steps into one - simpler but may not result in the most optimised CSS, depending on the situation.
|
||||
|
||||
@@ -1240,7 +1264,7 @@ When supplied with a column count, this mixin effectively combines both of the a
|
||||
```
|
||||
|
||||
* `@span`: Number of grid columns to span.
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here. Defaults to the value of `@total-columns`
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
|
||||
* `@end-column`: (Optional) Set to `true` if this column is the last one in a row.
|
||||
|
||||
```css
|
||||
@@ -1292,7 +1316,7 @@ When supplied with a column count, this mixin effectively combines both of the a
|
||||
```
|
||||
|
||||
* `@span`: Number of grid columns to span.
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here. Defaults to the value of `@total-columns`
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
|
||||
* `@end-column`: (Optional) Set to `true` if this column is the last one in a row.
|
||||
|
||||
```css
|
||||
@@ -1350,6 +1374,179 @@ When supplied with a column count, this mixin effectively combines both of the a
|
||||
}
|
||||
```
|
||||
|
||||
### .end-column()
|
||||
|
||||
Should be applied to the last column in a row for **floated columns**. Typically this will equate to the `:last-child` column, but when dropping columns for RWD this is not always the case.
|
||||
|
||||
```css
|
||||
.end-column();
|
||||
```
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.end-column();
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
|
||||
### .inline-end-column()
|
||||
|
||||
Should be applied to the last column in a row for **inline-block columns**. Typically this will equate to the `:last-child` column, but when dropping columns for RWD this is not always the case.
|
||||
|
||||
```css
|
||||
.inline-end-column();
|
||||
```
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.inline-end-column();
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
margin-right: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### .span()
|
||||
|
||||
A [partial mixin](#optimising-output-using-partial-mixins) for generating the width (and sometimes margin-right) property for columns (both floated and inline-block).
|
||||
|
||||
```css
|
||||
.span( <@span>[, <@parent-grid-units>] );
|
||||
```
|
||||
|
||||
* `@span`: Number of grid columns to span.
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.span(2);
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
width: 11.11111111111111%;
|
||||
}
|
||||
```
|
||||
|
||||
### .pre-pad()
|
||||
|
||||
Adds the specified number of columns' worth of padding to the the left of the element.
|
||||
|
||||
```css
|
||||
.pre-pad( <@span>[, <@parent-grid-units>] );
|
||||
```
|
||||
|
||||
* `@span`: Number of grid columns' worth of `padding-left` to add.
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.pre-pad(2);
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
padding-left: 12.698412698412698%;
|
||||
}
|
||||
```
|
||||
|
||||
### .post-pad()
|
||||
|
||||
Adds the specified number of columns' worth of padding to the the right of the element.
|
||||
|
||||
```css
|
||||
.post-pad( <@span>[, <@parent-grid-units>] );
|
||||
```
|
||||
|
||||
* `@span`: Number of grid columns' worth of `padding-right` to add.
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.post-pad(2);
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
padding-right: 12.698412698412698%;
|
||||
}
|
||||
```
|
||||
|
||||
### .pre-push()
|
||||
|
||||
Adds the specified number of columns' worth of margin to the the left of the element.
|
||||
|
||||
```css
|
||||
.pre-push( <@span>[, <@parent-grid-units>] );
|
||||
```
|
||||
|
||||
* `@span`: Number of grid columns' worth of `margin-left` to add.
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.pre-push(2);
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
margin-left: 12.698412698412698%;
|
||||
}
|
||||
```
|
||||
|
||||
### .post-push()
|
||||
|
||||
Adds the specified number of columns' worth of margin to the the right of the element.
|
||||
|
||||
```css
|
||||
.post-push( <@span>[, <@parent-grid-units>] );
|
||||
```
|
||||
|
||||
* `@span`: Number of grid columns' worth of `margin-right` to add.
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.post-push(2);
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
margin-right: 14.285714285714285%;
|
||||
}
|
||||
```
|
||||
|
||||
### .post-push-end()
|
||||
|
||||
Should be used instead of the `.post-push()` mixin above when applied to the last column in a row.
|
||||
|
||||
```css
|
||||
.post-push-end( <@span>[, <@parent-grid-units>] );
|
||||
```
|
||||
|
||||
* `@span`: Number of grid columns' worth of `margin-right` to add.
|
||||
* `@parent-grid-units`: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.example {
|
||||
.post-push-end(2);
|
||||
}
|
||||
/* Example output: */
|
||||
.example {
|
||||
margin-right: 12.698412698412698%;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Some notes on usage and best practices
|
||||
--------------------------------------
|
||||
|
||||
@@ -231,31 +231,26 @@ table {
|
||||
}
|
||||
/* ---- setup ---- */
|
||||
.test {
|
||||
letter-spacing: -0.31em;
|
||||
word-spacing: -0.43em;
|
||||
margin-left: 12.698412698412698%;
|
||||
}
|
||||
.ie7 .test {
|
||||
letter-spacing: normal;
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
body {
|
||||
padding: 20px;
|
||||
background: #DDD;
|
||||
font-size: 10px;
|
||||
font-family: sans-serif;
|
||||
min-width: 320px;
|
||||
}
|
||||
p,
|
||||
li {
|
||||
font-size: 10px;
|
||||
font-size: 1rem;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
h1 {
|
||||
font-size: 15px;
|
||||
font-size: 1.5rem;
|
||||
font-size: 2.4em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-size: 1.2rem;
|
||||
font-size: 2em;
|
||||
}
|
||||
.receptacle {
|
||||
max-width: 1200px;
|
||||
@@ -310,6 +305,12 @@ h2 {
|
||||
float: left;
|
||||
margin-right: 1.5873015873015872%;
|
||||
}
|
||||
.floated .section-1 .quaternary,
|
||||
.floated .section-2 .secondary,
|
||||
.floated .section-3 .quaternary {
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
/* Grids using inline-block */
|
||||
.inline .section {
|
||||
letter-spacing: -0.31em;
|
||||
@@ -329,21 +330,20 @@ h2 {
|
||||
display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
.inline .section-1 .quaternary,
|
||||
.inline .section-2 .secondary,
|
||||
.inline .section-3 .quaternary {
|
||||
margin-right: 0;
|
||||
}
|
||||
/* shared grid sizes */
|
||||
.section-1 .segment {
|
||||
width: 23.809523809523807%;
|
||||
}
|
||||
.section-1 .quaternary {
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
.section-2 .primary {
|
||||
width: 61.904761904761905%;
|
||||
}
|
||||
.section-2 .secondary {
|
||||
width: 36.507936507936506%;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
.section-3 .primary {
|
||||
width: 17.46031746031746%;
|
||||
@@ -356,8 +356,6 @@ h2 {
|
||||
}
|
||||
.section-3 .quaternary {
|
||||
width: 17.46031746031746%;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
.section-4 .primary {
|
||||
width: 11.11111111111111%;
|
||||
@@ -383,23 +381,36 @@ h2 {
|
||||
}
|
||||
.section-parent > .secondary {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
.section-nested .segment {
|
||||
width: 22.58064516129032%;
|
||||
margin-right: 3.225806451612903%;
|
||||
background: #999;
|
||||
}
|
||||
.floated .section-parent > .secondary,
|
||||
.floated .section-parent .quaternary {
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
.inline .section-parent > .secondary,
|
||||
.inline .section-parent .quaternary {
|
||||
margin-right: 0;
|
||||
}
|
||||
/* Sprites & Icons */
|
||||
.clearleft-branding {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
border: 0;
|
||||
font: 0/0 a;
|
||||
text-shadow: none;
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: url('../img/sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px -200px;
|
||||
width: 232px;
|
||||
height: 84px;
|
||||
}
|
||||
.more {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@@ -418,9 +429,9 @@ h2 {
|
||||
right: 0;
|
||||
}
|
||||
.icon-nav a {
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 38px;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 5.8 KiB |
@@ -7,8 +7,8 @@
|
||||
@using-ieclasses: true;
|
||||
|
||||
@total-columns: 16;
|
||||
@column-width: 60;
|
||||
@gutter-width: 20;
|
||||
@column-width: 60px;
|
||||
@gutter-width: 20px;
|
||||
|
||||
@base-font-size: 10;
|
||||
|
||||
@@ -23,27 +23,30 @@
|
||||
/* ---- setup ---- */
|
||||
|
||||
.test {
|
||||
.inline-column-wrapper();
|
||||
.pre-push(2);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: ~"@{base-font-size}px";
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 20px;
|
||||
background: #DDD;
|
||||
font-size: ~"@{base-font-size}px";
|
||||
font-family: sans-serif;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
p, li {
|
||||
.font-size-rems(1);
|
||||
.font-size-ems(16);
|
||||
}
|
||||
|
||||
h1 {
|
||||
.font-size-rems(1.5);
|
||||
.font-size-ems(24);
|
||||
}
|
||||
|
||||
h2 {
|
||||
.font-size-rems(1.2);
|
||||
.font-size-ems(20);
|
||||
}
|
||||
|
||||
.receptacle {
|
||||
@@ -93,6 +96,11 @@ h2 {
|
||||
.segment {
|
||||
.column();
|
||||
}
|
||||
.section-1 .quaternary,
|
||||
.section-2 .secondary,
|
||||
.section-3 .quaternary {
|
||||
.end-column();
|
||||
}
|
||||
}
|
||||
|
||||
/* Grids using inline-block */
|
||||
@@ -104,6 +112,11 @@ h2 {
|
||||
.segment {
|
||||
.inline-column();
|
||||
}
|
||||
.section-1 .quaternary,
|
||||
.section-2 .secondary,
|
||||
.section-3 .quaternary {
|
||||
.inline-end-column();
|
||||
}
|
||||
}
|
||||
|
||||
/* shared grid sizes */
|
||||
@@ -112,9 +125,6 @@ h2 {
|
||||
.segment {
|
||||
.span(4);
|
||||
}
|
||||
.quaternary {
|
||||
.end-column();
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
@@ -123,7 +133,6 @@ h2 {
|
||||
}
|
||||
.secondary {
|
||||
.span(6);
|
||||
.end-column();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,7 +148,6 @@ h2 {
|
||||
}
|
||||
.quaternary {
|
||||
.span(3);
|
||||
.end-column();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,8 +181,6 @@ h2 {
|
||||
}
|
||||
> .secondary {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
.end-column();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,16 +189,28 @@ h2 {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
.floated .section-parent .quaternary {
|
||||
.end-column();
|
||||
.floated .section-parent {
|
||||
> .secondary,
|
||||
.quaternary {
|
||||
.end-column();
|
||||
}
|
||||
}
|
||||
|
||||
.inline .section-parent .quaternary {
|
||||
.inline-end-column();
|
||||
.inline .section-parent {
|
||||
> .secondary,
|
||||
.quaternary {
|
||||
.inline-end-column();
|
||||
}
|
||||
}
|
||||
|
||||
/* Sprites & Icons */
|
||||
|
||||
.clearleft-branding {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
.sprite-ir(0, 4, 232px, 84px);
|
||||
}
|
||||
|
||||
.more {
|
||||
display: inline-block;
|
||||
.append-sprite-icon(2, 1, 6px, 11px, 0, 4px);
|
||||
@@ -200,9 +218,9 @@ h2 {
|
||||
|
||||
.icon-nav {
|
||||
a {
|
||||
.inline-block();
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
.inline-block();
|
||||
.prepend-sprite-icon(0, 0, 28px, 28px, 0, 2px);
|
||||
}
|
||||
.robots a {
|
||||
@@ -231,7 +249,6 @@ h2 {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.social {
|
||||
.inline-block();
|
||||
.prepend-icon-setup(32px, 32px, 10px);
|
||||
|
||||
@@ -19,12 +19,17 @@
|
||||
|
||||
<div class="receptacle">
|
||||
|
||||
<p><a href="#" class="more">Read more</a></p>
|
||||
<h2>Sprited image replacement</h2>
|
||||
|
||||
<a href="#" class="clearleft-branding">Clearleft</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="receptacle">
|
||||
|
||||
<h2>Sprited Icons</h2>
|
||||
|
||||
<ul class="icon-nav">
|
||||
<li class="robots"><a href="#">Robots</a></li>
|
||||
<li class="rockets"><a href="#">Rockets</a></li>
|
||||
@@ -36,6 +41,8 @@
|
||||
|
||||
<div class="receptacle">
|
||||
|
||||
<h2>Non-sprited icons</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="#" class="social social--twitter">Twitter</a></li>
|
||||
<li><a href="#" class="social social--feed">RSS</a></li>
|
||||
@@ -44,6 +51,15 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="receptacle">
|
||||
|
||||
<h2>Prepended sprited icon</h2>
|
||||
|
||||
<p><a href="#" class="more">Read more</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -88,43 +88,38 @@
|
||||
.column-width(@span, @total-columns);
|
||||
}
|
||||
|
||||
.span( @span, @total-columns, @end-column:false ) when (isnumber(@total-columns)) {
|
||||
.column-width(@span, @total-columns);
|
||||
.column-gutter(@total-columns, @end-column);
|
||||
}
|
||||
|
||||
.span( @span, @end-column ) when not (isnumber(@end-column)) {
|
||||
.span( @span, @total-columns ) when (isnumber(@total-columns)) {
|
||||
.column-width(@span, @total-columns);
|
||||
.column-gutter(@total-columns);
|
||||
}
|
||||
|
||||
|
||||
.pre-pad( @span ) {
|
||||
.pre-pad( @span, @total-columns:@total-columns ) {
|
||||
@calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);
|
||||
padding-left: @calc-column-width;
|
||||
}
|
||||
|
||||
.post-pad( @span ) {
|
||||
.post-pad( @span, @total-columns:@total-columns ) {
|
||||
@calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);
|
||||
padding-right: @calc-column-width;
|
||||
}
|
||||
|
||||
.pre-push( @span ) {
|
||||
.pre-push( @span, @total-columns:@total-columns ) {
|
||||
@calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);
|
||||
margin-left: @calc-column-width;
|
||||
}
|
||||
|
||||
.post-push( @span ) {
|
||||
.post-push( @span, @total-columns:@total-columns ) {
|
||||
@calc-column-width: 100%*((((@gutter-width+@column-width)*@span)+@gutter-width) / @grid-width);
|
||||
margin-right: @calc-column-width;
|
||||
}
|
||||
|
||||
.post-push-end( @span ) {
|
||||
.post-push-end( @span, @total-columns:@total-columns ) {
|
||||
@calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);
|
||||
margin-right: @calc-column-width;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.column-width(@span, @total-columns:@total-columns) {
|
||||
@calc-column-width: 100%*((((@gutter-width+@column-width)*@span)-@gutter-width) / @grid-width);
|
||||
width: @calc-column-width;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// ==============================================
|
||||
// Clearless default settings
|
||||
// ClearLess default settings
|
||||
// ----------------------------------------------
|
||||
// Override on a per-project basis as required.
|
||||
// ==============================================
|
||||
@@ -21,6 +21,6 @@
|
||||
|
||||
// Grid --------------------------------
|
||||
|
||||
@total-columns: 16;
|
||||
@total-columns: 12;
|
||||
@column-width: 60px;
|
||||
@gutter-width: 20px;
|
||||
|
||||
@@ -2,11 +2,10 @@
|
||||
// Typography related mixins
|
||||
// ==============================================
|
||||
|
||||
.font-size-rems(@px-size, @context-px-size:@base-font-size){
|
||||
@rem-value: @px-size;
|
||||
@px-value: (@px-size * @context-px-size);
|
||||
font-size: ~"@{px-value}px";
|
||||
font-size: ~"@{rem-value}rem";
|
||||
.font-size-rems(@px-size){
|
||||
@rem-size: @px-size / @base-font-size;
|
||||
font-size: ~"@{px-size}px";
|
||||
font-size: ~"@{rem-size}rem";
|
||||
}
|
||||
|
||||
.font-size-ems(@target-px-size, @context-px-size:@base-font-size) {
|
||||
|
||||
Reference in New Issue
Block a user