From ed601d0f183512595c18d7339af26ae6a627c0f6 Mon Sep 17 00:00:00 2001 From: raphaelgoettter Date: Thu, 5 Mar 2015 09:44:20 +0100 Subject: [PATCH] refonte du module flexbox MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ajouté dans layout.css et remis à jour --- less/_01-base.less | 100 -------------------------------- less/_02-layout.less | 127 ++++++++++++++++++++++++++++++++++++----- sass/_01-base.scss | 101 -------------------------------- sass/_02-layout.scss | 133 +++++++++++++++++++++++++++++++++++++------ 4 files changed, 230 insertions(+), 231 deletions(-) diff --git a/less/_01-base.less b/less/_01-base.less index 3194abc..5410fdd 100644 --- a/less/_01-base.less +++ b/less/_01-base.less @@ -283,103 +283,3 @@ table { 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; -} diff --git a/less/_02-layout.less b/less/_02-layout.less index dca68b7..93aa8cb 100644 --- a/less/_02-layout.less +++ b/less/_02-layout.less @@ -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 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html */ -.flex { +.flexbox, +.flexbox-v { display : flex; -} - -.flex-h { - flex-direction: row; -} - -.flex-v { + flex-wrap: wrap; flex-direction: column; } -.flex-fluid { +.flexbox-h { + flex-direction: row; +} + +.flexitem-fluid { flex: 1; } -.flex-start { +.flexitem-first { order : -1; } -.flex-mid { - order : 1; +.flexitem-medium { + order : 0; } -.flex-end { - order : 42; +.flexitem-last { + order : 1; } diff --git a/sass/_01-base.scss b/sass/_01-base.scss index f95d393..2bfd08b 100644 --- a/sass/_01-base.scss +++ b/sass/_01-base.scss @@ -275,104 +275,3 @@ video { table { 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; -} diff --git a/sass/_02-layout.scss b/sass/_02-layout.scss index dead3ad..75f8550 100644 --- a/sass/_02-layout.scss +++ b/sass/_02-layout.scss @@ -1,29 +1,130 @@ -/* flexbox layout -Tutorial: http://knacss.com/demos/tutoriel.html#flex */ -.flex { +/* ----------------------------- */ +/* ==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 +http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html +*/ + +.flexbox, +.flexbox-v { display : flex; -} - -.flex-h { - flex-direction: row; -} - -.flex-v { + flex-wrap: wrap; flex-direction: column; } -.flex-fluid { +.flexbox-h { + flex-direction: row; +} + +.flexitem-fluid { flex: 1; } -.flex-start { +.flexitem-first { order : -1; } -.flex-mid { - order : 1; +.flexitem-medium { + order : 0; } -.flex-end { - order : 42; +.flexitem-last { + order : 1; }