dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ajout des classes pull et push pour grid

Browse source 
Les classes `.left` et `.right` ne sont pas applicables sur la grid.
Ajout de 2 classes pour la grid.
This commit is contained in:
Benjamin Georgeault 2015-08-07 16:42:15 +02:00
parent 17f2a3bcfc
commit 24f35a241a
5 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
css/knacss-unminified.css
View file

@ -920,6 +920,12 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
} }
.pull {
margin-right: auto;
}
.push {
margin-left: auto;
}
/* ----------------------------- */ /* ----------------------------- */
/* ==tables */ /* ==tables */
/* ----------------------------- */ /* ----------------------------- */

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

6
doc/03-grilles.md
View file

@ -84,14 +84,14 @@ Il vous est très facile de "pousser" un élément à droite ou à gauche de sa
Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément : Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément :
- la classe `.right` pour le pousser à droite sur sa ligne (applique un `margin-left: auto`) - la classe `.push` pour le pousser à droite sur sa ligne (applique un `margin-left: auto`)
- la classe `.left` pour le pousser à gauche sur sa ligne (applique un `margin-right: auto`) - la classe `.pull` pour le pousser à gauche sur sa ligne (applique un `margin-right: auto`)
HTML : HTML :
```html ```html
<div class="grid-4"> <div class="grid-4">
<div>un div ou n'importe quoi d'autre</div> <div>un div ou n'importe quoi d'autre</div>
<div class="right">je suis poussé à droite</div> <div class="push">je suis poussé à droite</div>
<div>un 3è div ou n'importe quoi d'autre</div> <div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div> <div>etc.</div>
</div> </div>

8
less/_03-grids.less
View file

@ -170,3 +170,11 @@
.@{kna-namespace}grid-1-4 { .@{kna-namespace}grid-1-4 {
.uneven-grid(1,4); .uneven-grid(1,4);
} }
.@{kna-namespace}pull {
margin-right: auto;
}
.@{kna-namespace}push {
margin-left: auto;
}

9
sass/_03-grids.scss
View file

@ -188,3 +188,12 @@
.#{$kna-namespace}grid-1-4 { .#{$kna-namespace}grid-1-4 {
@include uneven-grid(1,4); @include uneven-grid(1,4);
} }
.#{$kna-namespace}pull {
margin-right: auto;
}
.#{$kna-namespace}push {
margin-left: auto;
}