diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2014-01-27 18:15:12 +0100 |
---|---|---|
committer | Simo Sorce <simo@redhat.com> | 2014-02-17 09:45:15 -0500 |
commit | fa5bb8dca04e2876d9def529a77b5273b5243169 (patch) | |
tree | 398cd64ee3d78fcbd9876ca73b3443be9726ccce /less/bootstrap/grid.less | |
parent | 630b85e06018fb3d9f8c34685a406b3770d58b54 (diff) | |
download | ipsilon-fa5bb8dca04e2876d9def529a77b5273b5243169.tar.gz ipsilon-fa5bb8dca04e2876d9def529a77b5273b5243169.tar.xz ipsilon-fa5bb8dca04e2876d9def529a77b5273b5243169.zip |
Add Boostrap files
Signed-off-by: Petr Vobornik <pvoborni@redhat.com>
Reviewed-by: Simo Sorce <simo@redhat.com>
Diffstat (limited to 'less/bootstrap/grid.less')
-rw-r--r-- | less/bootstrap/grid.less | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/less/bootstrap/grid.less b/less/bootstrap/grid.less new file mode 100644 index 0000000..88957f4 --- /dev/null +++ b/less/bootstrap/grid.less @@ -0,0 +1,100 @@ +// +// Grid system +// -------------------------------------------------- + + +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +.container { + .container-fixed(); + + @media (min-width: @screen-sm-min) { + width: @container-sm; + } + @media (min-width: @screen-md-min) { + width: @container-md; + } + @media (min-width: @screen-lg-min) { + width: @container-lg; + } +} + + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + .container-fixed(); +} + + +// Row +// +// Rows contain and clear the floats of your columns. + +.row { + .make-row(); +} + + +// Columns +// +// Common styles for small and large grid columns + +.make-grid-columns(); + + +// Extra small grid +// +// Columns, offsets, pushes, and pulls for extra small devices like +// smartphones. + +.make-grid-columns-float(xs); +.make-grid(@grid-columns, xs, width); +.make-grid(@grid-columns, xs, pull); +.make-grid(@grid-columns, xs, push); +.make-grid(@grid-columns, xs, offset); + + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. + +@media (min-width: @screen-sm-min) { + .make-grid-columns-float(sm); + .make-grid(@grid-columns, sm, width); + .make-grid(@grid-columns, sm, pull); + .make-grid(@grid-columns, sm, push); + .make-grid(@grid-columns, sm, offset); +} + + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + +@media (min-width: @screen-md-min) { + .make-grid-columns-float(md); + .make-grid(@grid-columns, md, width); + .make-grid(@grid-columns, md, pull); + .make-grid(@grid-columns, md, push); + .make-grid(@grid-columns, md, offset); +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: @screen-lg-min) { + .make-grid-columns-float(lg); + .make-grid(@grid-columns, lg, width); + .make-grid(@grid-columns, lg, pull); + .make-grid(@grid-columns, lg, push); + .make-grid(@grid-columns, lg, offset); +} |