mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 16:33:58 +02:00
Code Issues Releases Wiki Activity

Grid demo page update (showcase for the screen-specific layouts, no explanation)

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-19 14:37:05 +02:00
parent 4355a66a00
commit 1c7b7a081f
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View File

@@ -483,3 +483,4 @@
- Started writing `grid.html` page. - Started writing `grid.html` page.
- Added basic info for grid, set layout for the page, checked styles - they're all good for grid. - Added basic info for grid, set layout for the page, checked styles - they're all good for grid.
- Added layout demo showcase for the screen specific layouts.

14
docs/v2/grid.html
View File

@@ -54,6 +54,7 @@
border-top: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd;
} }
} }
.box-colored.green { background: #1b5e20; }
</style> </style>
</head> </head>
<body> <body>
@@ -215,7 +216,16 @@
</div> </div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample --> <div class="container">
<div class="row"><div class="col-sm"><h4>Small screen layout</h4><hr></div></div>
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
<div class="row"><div class="col-sm-12"><div class="box-colored red" style="height: 40px;"></div></div><div class="col-sm-12"><div class="box-colored green" style="height: 60px;"></div></div><div class="col-sm-12"><div class="box-colored red" style="height: 40px;"></div></div></div>
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
<div class="row"><div class="col-sm"><h4>Medium/Large screen layout</h4><hr></div></div>
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
<div class="row"><div class="col-sm-3"><div class="box-colored red" style="height: 100px;"></div></div><div class="col-sm-5"><div class="box-colored green" style="height: 100px;"></div></div><div class="col-sm-4"><div class="box-colored red" style="height: 100px;"></div></div></div>
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
</div>
</div> </div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal"> <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p> <p></p>
@@ -275,7 +285,7 @@
<!-- sample --> <!-- sample -->
</div> </div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal"> <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p> <p>DO: Col-sm row example, DONT: Col in col, WHATEVER: col-sm > container > row, DO: Col-sm-12 col-md, col-sm-12 col-md, DONT: row > col-sm-12 col-md / row > col-sm-12 col-md, DONT: Spec col-md but no col-sm!!, DONT: MIX free elements that are not flexible with grid columns in the same thing or ignore flex rows etc. - MAYBE PUT DOS AND DONTS BELOW THEIR RESPECTIVE SECTIONS</p>
<h3>Sample code</h3> <h3>Sample code</h3>
<pre</pre><br> <pre</pre><br>
</div> </div>