beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Grid system columns for extra small screens

Browse source
This commit is contained in:
Angelos Chalaris 2016-10-21 14:12:20 +03:00
parent 691a568996
commit 67a6e6c7ec
7 changed files with 239 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View file

@ -148,3 +148,5 @@
- Read a lot of the spec, decided on browser support, coded the `row` basis for the grid system.
- Updated breaking changes issue with more information.
- Added some comments and moved the notes in the flavor file.
- Added set of variables for class names, prefixes, columns, breakpoints etc for grid system.
- Added definitions for extra small screen sizes, using loops etc. Optimized accordingly, tested on local demo.

25
docs/v2/index.html
View file

@ -53,5 +53,30 @@
<progress class="tertiary" value="60" max="100"></progress>
<br>
<progress class="nano" value="35" max="100" style="position: fixed; top:0; left:0;"></progress>
<style>.box-row { border: 1px solid black; border-radius: 2px; }</style>
<div class="container">
<div class="row">
<div class="col-xs">
<div class="box-row">col-xs</div>
</div>
<div class="col-xs-2">
<div class="box-row">col-xs-2</div>
</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="box-row">col-xs-3 col-xs-offset-1</div>
</div>
<div class="col-xs">
<div class="box-row">col-xs</div>
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="box-row">col-xs: The first JavaScript engine. Coffeescript is a JavaScript program could then interrogate and manipulate to dynamically generate Web pages. The name is by far the most common host environment. JavaScript programmers. Facebook for building user interfaces. </div>
</div>
<div class="col-xs">
<div class="box-row">col-xs: I/O, such as Self and Scheme. Javascript NoSQL database. AngularJS, and Node. ECMAScript 3 compliant. Coffeescript is a package manager for front-end dependencies. JSX is an assertion library used with a JavaScript checker and optimizer. PhantomJS is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words. ECMAScript ES is the standardized specification of the desired DOM is a software design pattern used to speed up the setup and installation process of a function that gets called immediately after declaration Jasmine is a JavaScript web framework that allows rapid prototypic web development. LocalForage is a structural framework for dynamic web apps. ECMAScript language specification. JavaScript ecosystem in a user's browser rather than on a Web form to make it happen. The name is by analogy to an architectural facade. ES is the only language that the *revealing module pattern* was engineered as a way to ensure that all methods and variables are kept private until they are explicitly exposed. SJSJ is a generator builder to speed up consecutive function calls by caching the result of calls with identical input.</div>
</div>
</div>
</div>
</body>
</html>

130
flavors/v2/mini-default.css
View file

@ -152,6 +152,136 @@ progress {
progress[value="100"]::-moz-progress-bar {
border-radius: 1px; }
.container {
margin: 0 auto;
padding: 0 10px; }
.row {
box-sizing: border-box;
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap; }
.col-xs,
[class^='col-xs-'],
[class^='col-xs-offset-'] {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px; }
.col-xs {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0; }
.col-xs-1 {
max-width: 8.33333%;
-webkit-flex-basis: 8.33333%;
flex-basis: 8.33333%; }
.col-xs-2 {
max-width: 16.66667%;
-webkit-flex-basis: 16.66667%;
flex-basis: 16.66667%; }
.col-xs-3 {
max-width: 25%;
-webkit-flex-basis: 25%;
flex-basis: 25%; }
.col-xs-4 {
max-width: 33.33333%;
-webkit-flex-basis: 33.33333%;
flex-basis: 33.33333%; }
.col-xs-5 {
max-width: 41.66667%;
-webkit-flex-basis: 41.66667%;
flex-basis: 41.66667%; }
.col-xs-6 {
max-width: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%; }
.col-xs-7 {
max-width: 58.33333%;
-webkit-flex-basis: 58.33333%;
flex-basis: 58.33333%; }
.col-xs-8 {
max-width: 66.66667%;
-webkit-flex-basis: 66.66667%;
flex-basis: 66.66667%; }
.col-xs-9 {
max-width: 75%;
-webkit-flex-basis: 75%;
flex-basis: 75%; }
.col-xs-10 {
max-width: 83.33333%;
-webkit-flex-basis: 83.33333%;
flex-basis: 83.33333%; }
.col-xs-11 {
max-width: 91.66667%;
-webkit-flex-basis: 91.66667%;
flex-basis: 91.66667%; }
.col-xs-12 {
max-width: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%; }
.col-xs-offset-0 {
margin-left: 0; }
.col-xs-offset-1 {
margin-left: 8.33333%; }
.col-xs-offset-2 {
margin-left: 16.66667%; }
.col-xs-offset-3 {
margin-left: 25%; }
.col-xs-offset-4 {
margin-left: 33.33333%; }
.col-xs-offset-5 {
margin-left: 41.66667%; }
.col-xs-offset-6 {
margin-left: 50%; }
.col-xs-offset-7 {
margin-left: 58.33333%; }
.col-xs-offset-8 {
margin-left: 66.66667%; }
.col-xs-offset-9 {
margin-left: 75%; }
.col-xs-offset-10 {
margin-left: 83.33333%; }
.col-xs-offset-11 {
margin-left: 91.66667%; }
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.

2
flavors/v2/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

12
flavors/v2/mini-default.scss
View file

@ -141,8 +141,18 @@ $progress-style1-border-style: 0; // Border style for <progress> styl
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
// Variables for grid elements
$grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 20px; // Padding for the grid container (left and right only)
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
$grid-column-count: 12; // Number of columns in the grid (integer value only)
$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
$grid-small-breakpoint: 768px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 1024px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1200px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
// Enable base
@import '../../scss/v2/core';
// Use mixins for contextual background elements

1
scss/v2/_core.scss
View file

@ -341,6 +341,7 @@ a{
// You can comment out modules you do not want to use.
@import 'mini-core/contextual';
@import 'mini-core/progress';
@import 'mini-core/grid';
// TODO: Move to forms and buttons respectively

83
scss/v2/mini-core/_grid.scss
View file

@ -1,25 +1,80 @@
// Definitions for the grid system.
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
$grid-container-name: 'container' !default; // Class name for the grid system container
$grid-side-padding:
$grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only)
// Fluid grid system container definition.
.#{$grid-container-name} {
margin: 0 auto;
padding: 0 $grid-side-padding;
padding: 0 $grid-container-side-padding;
}
// Grid row definition.
$grid-row-name: 'row' !default; // Class name for the grid system rows
.#{$grid-row-name} {
box-sizing: border-box;
box-sizing: border-box;
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only)
$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid
$grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid
$grid-large-breakpoint: 1200px !default; // Large screen breakpoint for grid
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// Grid column generic definitions for extra small screens.
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-'] {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-extra-small-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
// Grid column specific definitions for offset columns.
@for $i from 0 through ($grid-column-count - 1) {
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-#{$i} {
@if $i == 0 {
margin-left: 0;
}
@else {
margin-left: #{($i * 100% / $grid-column-count)};
}
}
}