Grid system medium and large screens
This commit is contained in:
Angelos Chalaris
parent
7b684ebe9d
commit
85abbcb382
|
|
@ -151,3 +151,4 @@
|
|||
- 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.
|
||||
- Added definitions for small screen sizes, optimized, test on local demo.
|
||||
- Added definitions for medium and large screen sizes, optimized and tested locally.
|
||||
|
|
|
|||
|
|
@ -56,24 +56,24 @@
|
|||
<style>.box-row { border: 1px solid black; border-radius: 2px; }</style>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs col-sm-2 col-sm-offset-1">
|
||||
<div class="col-xs col-sm-2 col-sm-offset-1 col-md-6 col-md-offset-0 col-lg">
|
||||
<div class="box-row">col-xs</div>
|
||||
</div>
|
||||
<div class="col-xs-2 col-sm">
|
||||
<div class="col-xs-2 col-sm col-md col-lg">
|
||||
<div class="box-row">col-xs-2</div>
|
||||
</div>
|
||||
<div class="col-xs-3 col-xs-offset-1 col-sm col-sm-offset-0">
|
||||
<div class="col-xs-3 col-xs-offset-1 col-sm col-sm-offset-0 col-md col-lg-7">
|
||||
<div class="box-row">col-xs-3 col-xs-offset-1</div>
|
||||
</div>
|
||||
<div class="col-xs col-sm-6">
|
||||
<div class="col-xs col-sm-6 col-md col-lg">
|
||||
<div class="box-row">col-xs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs col-sm-5">
|
||||
<div class="col-xs col-sm-5 col-md col-md-offset-1 col-lg col-lg-offset-2">
|
||||
<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 col-sm-5 col-sm-offset-2">
|
||||
<div class="col-xs col-sm-5 col-sm-offset-2 col-md col-md-offset-1 col-lg col-lg-offset-2">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -395,6 +395,232 @@ progress {
|
|||
|
||||
.col-sm-offset-11 {
|
||||
margin-left: 91.66667%; } }
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.col-md,
|
||||
[class^='col-md-'],
|
||||
[class^='col-md-offset-'] {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 4px; }
|
||||
|
||||
.col-md {
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0; }
|
||||
|
||||
.col-md-1 {
|
||||
max-width: 8.33333%;
|
||||
-webkit-flex-basis: 8.33333%;
|
||||
flex-basis: 8.33333%; }
|
||||
|
||||
.col-md-2 {
|
||||
max-width: 16.66667%;
|
||||
-webkit-flex-basis: 16.66667%;
|
||||
flex-basis: 16.66667%; }
|
||||
|
||||
.col-md-3 {
|
||||
max-width: 25%;
|
||||
-webkit-flex-basis: 25%;
|
||||
flex-basis: 25%; }
|
||||
|
||||
.col-md-4 {
|
||||
max-width: 33.33333%;
|
||||
-webkit-flex-basis: 33.33333%;
|
||||
flex-basis: 33.33333%; }
|
||||
|
||||
.col-md-5 {
|
||||
max-width: 41.66667%;
|
||||
-webkit-flex-basis: 41.66667%;
|
||||
flex-basis: 41.66667%; }
|
||||
|
||||
.col-md-6 {
|
||||
max-width: 50%;
|
||||
-webkit-flex-basis: 50%;
|
||||
flex-basis: 50%; }
|
||||
|
||||
.col-md-7 {
|
||||
max-width: 58.33333%;
|
||||
-webkit-flex-basis: 58.33333%;
|
||||
flex-basis: 58.33333%; }
|
||||
|
||||
.col-md-8 {
|
||||
max-width: 66.66667%;
|
||||
-webkit-flex-basis: 66.66667%;
|
||||
flex-basis: 66.66667%; }
|
||||
|
||||
.col-md-9 {
|
||||
max-width: 75%;
|
||||
-webkit-flex-basis: 75%;
|
||||
flex-basis: 75%; }
|
||||
|
||||
.col-md-10 {
|
||||
max-width: 83.33333%;
|
||||
-webkit-flex-basis: 83.33333%;
|
||||
flex-basis: 83.33333%; }
|
||||
|
||||
.col-md-11 {
|
||||
max-width: 91.66667%;
|
||||
-webkit-flex-basis: 91.66667%;
|
||||
flex-basis: 91.66667%; }
|
||||
|
||||
.col-md-12 {
|
||||
max-width: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
flex-basis: 100%; }
|
||||
|
||||
.col-md-offset-0 {
|
||||
margin-left: 0; }
|
||||
|
||||
.col-md-offset-1 {
|
||||
margin-left: 8.33333%; }
|
||||
|
||||
.col-md-offset-2 {
|
||||
margin-left: 16.66667%; }
|
||||
|
||||
.col-md-offset-3 {
|
||||
margin-left: 25%; }
|
||||
|
||||
.col-md-offset-4 {
|
||||
margin-left: 33.33333%; }
|
||||
|
||||
.col-md-offset-5 {
|
||||
margin-left: 41.66667%; }
|
||||
|
||||
.col-md-offset-6 {
|
||||
margin-left: 50%; }
|
||||
|
||||
.col-md-offset-7 {
|
||||
margin-left: 58.33333%; }
|
||||
|
||||
.col-md-offset-8 {
|
||||
margin-left: 66.66667%; }
|
||||
|
||||
.col-md-offset-9 {
|
||||
margin-left: 75%; }
|
||||
|
||||
.col-md-offset-10 {
|
||||
margin-left: 83.33333%; }
|
||||
|
||||
.col-md-offset-11 {
|
||||
margin-left: 91.66667%; } }
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.col-lg,
|
||||
[class^='col-lg-'],
|
||||
[class^='col-lg-offset-'] {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 4px; }
|
||||
|
||||
.col-lg {
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0; }
|
||||
|
||||
.col-lg-1 {
|
||||
max-width: 8.33333%;
|
||||
-webkit-flex-basis: 8.33333%;
|
||||
flex-basis: 8.33333%; }
|
||||
|
||||
.col-lg-2 {
|
||||
max-width: 16.66667%;
|
||||
-webkit-flex-basis: 16.66667%;
|
||||
flex-basis: 16.66667%; }
|
||||
|
||||
.col-lg-3 {
|
||||
max-width: 25%;
|
||||
-webkit-flex-basis: 25%;
|
||||
flex-basis: 25%; }
|
||||
|
||||
.col-lg-4 {
|
||||
max-width: 33.33333%;
|
||||
-webkit-flex-basis: 33.33333%;
|
||||
flex-basis: 33.33333%; }
|
||||
|
||||
.col-lg-5 {
|
||||
max-width: 41.66667%;
|
||||
-webkit-flex-basis: 41.66667%;
|
||||
flex-basis: 41.66667%; }
|
||||
|
||||
.col-lg-6 {
|
||||
max-width: 50%;
|
||||
-webkit-flex-basis: 50%;
|
||||
flex-basis: 50%; }
|
||||
|
||||
.col-lg-7 {
|
||||
max-width: 58.33333%;
|
||||
-webkit-flex-basis: 58.33333%;
|
||||
flex-basis: 58.33333%; }
|
||||
|
||||
.col-lg-8 {
|
||||
max-width: 66.66667%;
|
||||
-webkit-flex-basis: 66.66667%;
|
||||
flex-basis: 66.66667%; }
|
||||
|
||||
.col-lg-9 {
|
||||
max-width: 75%;
|
||||
-webkit-flex-basis: 75%;
|
||||
flex-basis: 75%; }
|
||||
|
||||
.col-lg-10 {
|
||||
max-width: 83.33333%;
|
||||
-webkit-flex-basis: 83.33333%;
|
||||
flex-basis: 83.33333%; }
|
||||
|
||||
.col-lg-11 {
|
||||
max-width: 91.66667%;
|
||||
-webkit-flex-basis: 91.66667%;
|
||||
flex-basis: 91.66667%; }
|
||||
|
||||
.col-lg-12 {
|
||||
max-width: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
flex-basis: 100%; }
|
||||
|
||||
.col-lg-offset-0 {
|
||||
margin-left: 0; }
|
||||
|
||||
.col-lg-offset-1 {
|
||||
margin-left: 8.33333%; }
|
||||
|
||||
.col-lg-offset-2 {
|
||||
margin-left: 16.66667%; }
|
||||
|
||||
.col-lg-offset-3 {
|
||||
margin-left: 25%; }
|
||||
|
||||
.col-lg-offset-4 {
|
||||
margin-left: 33.33333%; }
|
||||
|
||||
.col-lg-offset-5 {
|
||||
margin-left: 41.66667%; }
|
||||
|
||||
.col-lg-offset-6 {
|
||||
margin-left: 50%; }
|
||||
|
||||
.col-lg-offset-7 {
|
||||
margin-left: 58.33333%; }
|
||||
|
||||
.col-lg-offset-8 {
|
||||
margin-left: 66.66667%; }
|
||||
|
||||
.col-lg-offset-9 {
|
||||
margin-left: 75%; }
|
||||
|
||||
.col-lg-offset-10 {
|
||||
margin-left: 83.33333%; }
|
||||
|
||||
.col-lg-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
2
flavors/v2/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -78,7 +78,8 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
|
|||
}
|
||||
}
|
||||
}
|
||||
// Small screens breakpoint.
|
||||
|
||||
// Small screen breakpoint.
|
||||
@media only screen and (min-width: #{$grid-small-breakpoint}){
|
||||
// Grid column generic definitions for small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||
|
|
@ -124,5 +125,100 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
|
|||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
}
|
||||
|
||||
// Medium screen breakpoint.
|
||||
@media only screen and (min-width: #{$grid-medium-breakpoint}){
|
||||
// Grid column generic definitions for medium screens.
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-medium-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-medium-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-medium-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-medium-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large screen breakpoint.
|
||||
@media only screen and (min-width: #{$grid-large-breakpoint}){
|
||||
// Grid column generic definitions for large screens.
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-large-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-large-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-large-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-large-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue