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

refonte du module flexbox

Browse source 
ajouté dans layout.css et remis à jour
This commit is contained in:
raphaelgoettter 2015-03-05 09:44:20 +01:00
parent 5e6bacda74
commit ed601d0f18
4 changed files with 230 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
less/_01-base.less
View file

@ -283,103 +283,3 @@ table {
margin-bottom: @medium-value; margin-bottom: @medium-value;
} }
/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */
/* simple blocks alignment */
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
.center {
margin-left: auto;
margin-right: auto;
}
/* text and contents alignment */
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
/* floating elements */
.fl {
float: left;
}
img.fl {
margin-right: @small-value;
}
.fr {
float: right;
}
img.fr {
margin-left: @small-value;
}
img.fl,
img.fr {
margin-bottom: @tiny-value;
}
/* module, gains superpower "BFC" Block Formating Context */
.mod {
overflow: hidden;
}
/* blocks that needs to be placed under floats */
.clear,
.line,
.row {
clear: both;
}
/* blocks that must contain floats */
.clearfix,
.line {
&:after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}
/* table layout */
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.row > *,
.col {
display: table-cell;
vertical-align: top;
}
/* no table-cell for script tag when body is a .row */
body > script {
display: none !important;
}
/* inline-block */
.inbl {
display: inline-block;
vertical-align: top;
}

127
less/_02-layout.less
View file

@ -1,31 +1,130 @@
/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */
/* module, gains superpower "BFC" Block Formating Context */
.mod {
overflow: hidden;
}
/* blocks that needs to be placed under floats */
.clear,
.line,
.row {
clear: both;
}
/* blocks that must contain floats */
.clearfix,
.line {
&:after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}
/* simple blocks alignment */
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
.center {
margin-left: auto;
margin-right: auto;
}
/* text and contents alignment */
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
/* floating elements */
.fl {
float: left;
}
img.fl {
margin-right: @small-value;
}
.fr {
float: right;
}
img.fr {
margin-left: @small-value;
}
img.fl,
img.fr {
margin-bottom: @tiny-value;
}
/* table layout */
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.row > *,
.col {
display: table-cell;
vertical-align: top;
}
/* no table-cell for script tag when body is a .row */
body > script {
display: none !important;
}
/* inline-block */
.inbl {
display: inline-block;
vertical-align: top;
}
/* flexbox layout /* flexbox layout
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/ */
.flex { .flexbox,
.flexbox-v {
display : flex; display : flex;
} flex-wrap: wrap;
.flex-h {
flex-direction: row;
}
.flex-v {
flex-direction: column; flex-direction: column;
} }
.flex-fluid { .flexbox-h {
flex-direction: row;
}
.flexitem-fluid {
flex: 1; flex: 1;
} }
.flex-start { .flexitem-first {
order : -1; order : -1;
} }
.flex-mid { .flexitem-medium {
order : 1; order : 0;
} }
.flex-end { .flexitem-last {
order : 42; order : 1;
} }

101
sass/_01-base.scss
View file

@ -275,104 +275,3 @@ video {
table { table {
margin-bottom: $medium-value; margin-bottom: $medium-value;
} }
/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */
/* simple blocks alignment */
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
.center {
margin-left: auto;
margin-right: auto;
}
/* text and contents alignment */
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
/* floating elements */
.fl {
float: left;
}
img.fl {
margin-right: $small-value;
}
.fr {
float: right;
}
img.fr {
margin-left: $small-value;
}
img.fl,
img.fr {
margin-bottom: $tiny-value;
}
/* module, gains superpower "BFC" Block Formating Context */
.mod {
overflow: hidden;
}
/* blocks that needs to be placed under floats */
.clear,
.line,
.row {
clear: both;
}
/* blocks that must contain floats */
.clearfix,
.line {
&:after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}
/* table layout */
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.row > *,
.col {
display: table-cell;
vertical-align: top;
}
/* no table-cell for script tag when body is a .row */
body > script {
display: none !important;
}
/* inline-block */
.inbl {
display: inline-block;
vertical-align: top;
}

131
sass/_02-layout.scss
View file

@ -1,29 +1,130 @@
/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */
/* module, gains superpower "BFC" Block Formating Context */
.mod {
overflow: hidden;
}
/* blocks that needs to be placed under floats */
.clear,
.line,
.row {
clear: both;
}
/* blocks that must contain floats */
.clearfix,
.line {
&:after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}
/* simple blocks alignment */
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
.center {
margin-left: auto;
margin-right: auto;
}
/* text and contents alignment */
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
/* floating elements */
.fl {
float: left;
}
img.fl {
margin-right: $small-value;
}
.fr {
float: right;
}
img.fr {
margin-left: $small-value;
}
img.fl,
img.fr {
margin-bottom: $tiny-value;
}
/* table layout */
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.row > *,
.col {
display: table-cell;
vertical-align: top;
}
/* no table-cell for script tag when body is a .row */
body > script {
display: none !important;
}
/* inline-block */
.inbl {
display: inline-block;
vertical-align: top;
}
/* flexbox layout /* flexbox layout
Tutorial: http://knacss.com/demos/tutoriel.html#flex */ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.flex { */
.flexbox,
.flexbox-v {
display : flex; display : flex;
} flex-wrap: wrap;
.flex-h {
flex-direction: row;
}
.flex-v {
flex-direction: column; flex-direction: column;
} }
.flex-fluid { .flexbox-h {
flex-direction: row;
}
.flexitem-fluid {
flex: 1; flex: 1;
} }
.flex-start { .flexitem-first {
order : -1; order : -1;
} }
.flex-mid { .flexitem-medium {
order : 1; order : 0;
} }
.flex-end { .flexitem-last {
order : 42; order : 1;
} }