diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 595ddd4..ada68b4 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -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. diff --git a/docs/v2/index.html b/docs/v2/index.html index 908c15d..83abd2b 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -53,5 +53,30 @@
+ +
+
+
+
col-xs
+
+
+
col-xs-2
+
+
+
col-xs-3 col-xs-offset-1
+
+
+
col-xs
+
+
+
+
+
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.
+
+
+
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.
+
+
+
\ No newline at end of file diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index 469cd6e..2ece673 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -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. diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index 715db13..f7e80eb 100644 --- a/flavors/v2/mini-default.min.css +++ b/flavors/v2/mini-default.min.css @@ -1 +1 @@ -*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:20em}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0} \ No newline at end of file +*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-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%}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:20em}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0} \ No newline at end of file diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index 073a4fc..021b6ae 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -141,8 +141,18 @@ $progress-style1-border-style: 0; // Border style for styl $progress-style1-border-radius: 0; // Border radius for 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 diff --git a/scss/v2/_core.scss b/scss/v2/_core.scss index e3d013f..fcea65b 100644 --- a/scss/v2/_core.scss +++ b/scss/v2/_core.scss @@ -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 diff --git a/scss/v2/mini-core/_grid.scss b/scss/v2/mini-core/_grid.scss index 20b8b87..31a51b6 100644 --- a/scss/v2/mini-core/_grid.scss +++ b/scss/v2/mini-core/_grid.scss @@ -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; -} \ No newline at end of file + 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)}; +} +} +} \ No newline at end of file