mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 21:37:23 +02:00
Code Issues Releases Wiki Activity

Bootstrap flavor - grid

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-08 12:10:45 +03:00
parent 3dbdc27c55
commit 9594c9b25e
3 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
flavors/mini-bootstrap.css
View File

@@ -562,13 +562,13 @@ textarea {
- [2] : Columns with the $hide-suffix will be only hidden in the screen size specified. - [2] : Columns with the $hide-suffix will be only hidden in the screen size specified.
- [3] : Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information. - [3] : Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information.
*/ */
.grid-container { .container-fluid {
padding-right: 0; padding-right: 15px;
padding-left: 0; padding-left: 15px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
width: 100%; } width: 100%; }
.grid-container * { .container-fluid * {
box-sizing: border-box; } box-sizing: border-box; }
.row:before, .row:after { .row:before, .row:after {
@@ -578,7 +578,7 @@ textarea {
.col { .col {
float: left; float: left;
padding: 12px; } padding: 15px; }
.xs-1 { .xs-1 {
width: 8.33333%; } width: 8.33333%; }
@@ -616,12 +616,12 @@ textarea {
.xs-12 { .xs-12 {
width: 100%; } width: 100%; }
.sm-no, .sm-hidden,
.md-no, .md-hidden,
.lg-no { .lg-hidden {
display: block; } display: block; }
.xs-no { .xs-hidden {
display: none; } display: none; }
@media (min-width: 768px) { @media (min-width: 768px) {
@@ -661,14 +661,14 @@ textarea {
.sm-12 { .sm-12 {
width: 100%; } width: 100%; }
.xs-no, .xs-hidden,
.md-no, .md-hidden,
.lg-no { .lg-hidden {
display: block; } display: block; }
.sm-no { .sm-hidden {
display: none; } } display: none; } }
@media (min-width: 1024px) { @media (min-width: 992px) {
.md-1 { .md-1 {
width: 8.33333%; } width: 8.33333%; }
@@ -705,14 +705,14 @@ textarea {
.md-12 { .md-12 {
width: 100%; } width: 100%; }
.xs-no, .xs-hidden,
.sm-no, .sm-hidden,
.lg-no { .lg-hidden {
display: block; } display: block; }
.md-no { .md-hidden {
display: none; } } display: none; } }
@media (min-width: 1280px) { @media (min-width: 1200px) {
.lg-1 { .lg-1 {
width: 8.33333%; } width: 8.33333%; }
@@ -749,12 +749,12 @@ textarea {
.lg-12 { .lg-12 {
width: 100%; } width: 100%; }
.xs-no, .xs-hidden,
.sm-no, .sm-hidden,
.md-no { .md-hidden {
display: block; } display: block; }
.lg-no { .lg-hidden {
display: none; } } display: none; } }
/* /*
Mixin for the forms. Mixin for the forms.

2
flavors/mini-bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

18
flavors/mini-bootstrap.scss
View File

@@ -155,23 +155,31 @@ $btn-size3-name: btn-xs; // Name for the button size 3 class
// Variable definitions for the Grid module (_grid.scss) // Variable definitions for the Grid module (_grid.scss)
//==================================================================== //====================================================================
// Class names for the grid system // Class names for the grid system
$grid-container-name: grid-container; // Name for the grid container class // --- NOTES: ---
// Only .container-fluid is supported currently.
// Column naming follows standard mini.css naming conventions
// instead of Bootstrap conventions.
// (example: `col md-1` instead of `col-md-1`)
// Offsets are still built using the hidden column class, which is
// suffixed with `-hidden` for convenience's sake.
// -------------------
$grid-container-name: container-fluid; // Name for the grid container class
$grid-row-name: row; // Name for the grid's row class $grid-row-name: row; // Name for the grid's row class
$grid-column-name: col; // Name for the grid's column class $grid-column-name: col; // Name for the grid's column class
$grid-extra-small-device-name: xs; // Name for extra small devices $grid-extra-small-device-name: xs; // Name for extra small devices
$grid-small-device-name: sm; // Name for small devices $grid-small-device-name: sm; // Name for small devices
$grid-medium-device-name: md; // Name for medium devices $grid-medium-device-name: md; // Name for medium devices
$grid-large-device-name: lg; // Name for large devices $grid-large-device-name: lg; // Name for large devices
$grid-no-show-name: no; // Name for hidden grid elements class $grid-no-show-name: hidden; // Name for hidden grid elements class
// Grid breakpoints for different screens // Grid breakpoints for different screens
$grid-small-breakpoint: 768px; // Breakpoint for extra small to small devices $grid-small-breakpoint: 768px; // Breakpoint for extra small to small devices
$grid-medium-breakpoint: 1024px; // Breakpoint for small to medium devices $grid-medium-breakpoint: 992px; // Breakpoint for small to medium devices
$grid-large-breakpoint: 1280px; // Breakpoint for medium to large devices $grid-large-breakpoint: 1200px; // Breakpoint for medium to large devices
// Enable grid(s) (_grid.scss). (Use individual mixins below to use.) // Enable grid(s) (_grid.scss). (Use individual mixins below to use.)
@import '../scss/mini/grid'; @import '../scss/mini/grid';
// Use grid mixin to create grid with given specs. For more information // Use grid mixin to create grid with given specs. For more information
// refer to the grid.scss file to check the definitions. // refer to the grid.scss file to check the definitions.
@include make-grid($grid-container-name, 0, $grid-row-name, $grid-column-name, 12, 12px, $grid-extra-small-device-name, $grid-small-device-name, $grid-medium-device-name, $grid-large-device-name, $grid-no-show-name, $grid-small-breakpoint, $grid-medium-breakpoint, $grid-large-breakpoint); @include make-grid($grid-container-name, 15px, $grid-row-name, $grid-column-name, 12, 15px, $grid-extra-small-device-name, $grid-small-device-name, $grid-medium-device-name, $grid-large-device-name, $grid-no-show-name, $grid-small-breakpoint, $grid-medium-breakpoint, $grid-large-breakpoint);
//==================================================================== //====================================================================
// Variable definitions for the Form module (_form.scss) // Variable definitions for the Form module (_form.scss)
//==================================================================== //====================================================================