Grid testing with 3/4 grid, should change to 12 grid
This commit is contained in:
Angelos Chalaris
parent
02df898014
commit
175dd88213
5 changed files with 265 additions and 2 deletions
|
|
@ -266,3 +266,124 @@ textarea {
|
|||
.btn.btn-sm {
|
||||
padding: 4px 8px;
|
||||
font-size: 80%; }
|
||||
|
||||
.grid-container * {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.row:before, .row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
padding: 12px; }
|
||||
|
||||
.xs-3-1 {
|
||||
width: 33.33333%; }
|
||||
|
||||
.xs-3-2 {
|
||||
width: 66.66667%; }
|
||||
|
||||
.xs-3-3 {
|
||||
width: 100%; }
|
||||
|
||||
.xs-4-1 {
|
||||
width: 25%; }
|
||||
|
||||
.xs-4-2 {
|
||||
width: 50%; }
|
||||
|
||||
.xs-4-3 {
|
||||
width: 75%; }
|
||||
|
||||
.xs-4-4 {
|
||||
width: 100%; }
|
||||
|
||||
.xs-no {
|
||||
display: none; }
|
||||
|
||||
.sm-no, .md-no, .lg-no {
|
||||
display: block; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sm-3-1 {
|
||||
width: 33.33333%; }
|
||||
|
||||
.sm-3-2 {
|
||||
width: 66.66667%; }
|
||||
|
||||
.sm-3-3 {
|
||||
width: 100%; }
|
||||
|
||||
.sm-4-1 {
|
||||
width: 25%; }
|
||||
|
||||
.sm-4-2 {
|
||||
width: 50%; }
|
||||
|
||||
.sm-4-3 {
|
||||
width: 75%; }
|
||||
|
||||
.sm-4-4 {
|
||||
width: 100%; }
|
||||
|
||||
.sm-no {
|
||||
display: none; }
|
||||
|
||||
.xs-no, .md-no, .lg-no {
|
||||
display: block; } }
|
||||
@media (min-width: 1024px) {
|
||||
.md-3-1 {
|
||||
width: 33.33333%; }
|
||||
|
||||
.md-3-2 {
|
||||
width: 66.66667%; }
|
||||
|
||||
.md-3-3 {
|
||||
width: 100%; }
|
||||
|
||||
.md-4-1 {
|
||||
width: 25%; }
|
||||
|
||||
.md-4-2 {
|
||||
width: 50%; }
|
||||
|
||||
.md-4-3 {
|
||||
width: 75%; }
|
||||
|
||||
.md-4-4 {
|
||||
width: 100%; }
|
||||
|
||||
.md-no {
|
||||
display: none; }
|
||||
|
||||
.xs-no, .sm-no, .lg-no {
|
||||
display: block; } }
|
||||
@media (min-width: 1280px) {
|
||||
.lg-3-1 {
|
||||
width: 33.33333%; }
|
||||
|
||||
.lg-3-2 {
|
||||
width: 66.66667%; }
|
||||
|
||||
.lg-3-3 {
|
||||
width: 100%; }
|
||||
|
||||
.lg-4-1 {
|
||||
width: 25%; }
|
||||
|
||||
.lg-4-2 {
|
||||
width: 50%; }
|
||||
|
||||
.lg-4-3 {
|
||||
width: 75%; }
|
||||
|
||||
.lg-4-4 {
|
||||
width: 100%; }
|
||||
|
||||
.lg-no {
|
||||
display: none; }
|
||||
|
||||
.xs-no, .sm-no, .md-no {
|
||||
display: block; } }
|
||||
|
|
|
|||
2
css/mini-full.min.css
vendored
2
css/mini-full.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,4 @@
|
|||
@import 'mini/variables';
|
||||
@import 'mini/base';
|
||||
@import 'mini/button';
|
||||
@import 'mini/button';
|
||||
@import 'mini/grid';
|
||||
140
scss/mini/_grid.scss
Normal file
140
scss/mini/_grid.scss
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
.grid-container *{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row:before, .row:after {
|
||||
content:"";
|
||||
display: table ;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.col{
|
||||
float: left;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.xs-3-1{
|
||||
width: (100% / 3);
|
||||
}
|
||||
.xs-3-2{
|
||||
width: 2 * (100% / 3);
|
||||
}
|
||||
.xs-3-3{
|
||||
width: 3 * (100% / 3);
|
||||
}
|
||||
|
||||
.xs-4-1{
|
||||
width: (100% / 4);
|
||||
}
|
||||
.xs-4-2{
|
||||
width: 2 * (100% / 4);
|
||||
}
|
||||
.xs-4-3{
|
||||
width: 3 * (100% / 4);
|
||||
}
|
||||
.xs-4-4{
|
||||
width: 4 * (100% / 4);
|
||||
}
|
||||
|
||||
.xs-no{
|
||||
display: none;
|
||||
}
|
||||
.sm-no, .md-no, .lg-no{
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.sm-3-1{
|
||||
width: (100% / 3);
|
||||
}
|
||||
.sm-3-2{
|
||||
width: 2 * (100% / 3);
|
||||
}
|
||||
.sm-3-3{
|
||||
width: 3 * (100% / 3);
|
||||
}
|
||||
|
||||
.sm-4-1{
|
||||
width: (100% / 4);
|
||||
}
|
||||
.sm-4-2{
|
||||
width: 2 * (100% / 4);
|
||||
}
|
||||
.sm-4-3{
|
||||
width: 3 * (100% / 4);
|
||||
}
|
||||
.sm-4-4{
|
||||
width: 4 * (100% / 4);
|
||||
}
|
||||
|
||||
.sm-no{
|
||||
display: none;
|
||||
}
|
||||
.xs-no, .md-no, .lg-no{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px){
|
||||
.md-3-1{
|
||||
width: (100% / 3);
|
||||
}
|
||||
.md-3-2{
|
||||
width: 2 * (100% / 3);
|
||||
}
|
||||
.md-3-3{
|
||||
width: 3 * (100% / 3);
|
||||
}
|
||||
|
||||
.md-4-1{
|
||||
width: (100% / 4);
|
||||
}
|
||||
.md-4-2{
|
||||
width: 2 * (100% / 4);
|
||||
}
|
||||
.md-4-3{
|
||||
width: 3 * (100% / 4);
|
||||
}
|
||||
.md-4-4{
|
||||
width: 4 * (100% / 4);
|
||||
}
|
||||
|
||||
.md-no{
|
||||
display: none;
|
||||
}
|
||||
.xs-no, .sm-no, .lg-no{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px){
|
||||
.lg-3-1{
|
||||
width: (100% / 3);
|
||||
}
|
||||
.lg-3-2{
|
||||
width: 2 * (100% / 3);
|
||||
}
|
||||
.lg-3-3{
|
||||
width: 3 * (100% / 3);
|
||||
}
|
||||
|
||||
.lg-4-1{
|
||||
width: (100% / 4);
|
||||
}
|
||||
.lg-4-2{
|
||||
width: 2 * (100% / 4);
|
||||
}
|
||||
.lg-4-3{
|
||||
width: 3 * (100% / 4);
|
||||
}
|
||||
.lg-4-4{
|
||||
width: 4 * (100% / 4);
|
||||
}
|
||||
|
||||
.lg-no{
|
||||
display: none;
|
||||
}
|
||||
.xs-no, .sm-no, .md-no{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -61,5 +61,6 @@ Suspendisse varius turpis et dui viverra semper.</pre>
|
|||
<br>
|
||||
<button type="button" class="btn-r btn-sm btn" disabled>Sample button</button>
|
||||
<blockquote cite="https://www.google.com">Nam non diam ante. Curabitur non enim vitae eros luctus porta.</blockquote>
|
||||
<div class="grid-container"><div class="row"><div class="col xs-4-3 sm-3-1" style="background: red;">1c</div><div class="col xs-4-1 sm-3-2" style="background: blue;">2c</div></div><div class="row"><div class="col xs-4-4 sm-3-3" style="background: yellow;">3c</div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue