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

Grid testing with 3/4 grid, should change to 12 grid

Browse Source
This commit is contained in:
Angelos Chalaris
2016-08-22 16:35:19 +03:00
parent 02df898014
commit 175dd88213
5 changed files with 265 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
css/mini-full.css
View File

@@ -266,3 +266,124 @@ textarea {
.btn.btn-sm { .btn.btn-sm {
padding: 4px 8px; padding: 4px 8px;
font-size: 80%; } 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
View File

File diff suppressed because one or more lines are too long

1
scss/mini-full.scss
View File

@@ -1,3 +1,4 @@
@import 'mini/variables'; @import 'mini/variables';
@import 'mini/base'; @import 'mini/base';
@import 'mini/button'; @import 'mini/button';
@import 'mini/grid';

140
scss/mini/_grid.scss Normal file
View 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;
}
}

1
testpage.html
View File

@@ -61,5 +61,6 @@ Suspendisse varius turpis et dui viverra semper.</pre>
<br> <br>
<button type="button" class="btn-r btn-sm btn" disabled>Sample button</button> <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> <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> </body>
</html> </html>