From 1c7b7a081f5f77bfb0e05e5297c89508d33eb8bd Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 19 Nov 2016 14:37:05 +0200 Subject: [PATCH] Grid demo page update (showcase for the screen-specific layouts, no explanation) --- docs/v2/DEVLOG.md | 1 + docs/v2/grid.html | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 2e162b5..96a5ab6 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -483,3 +483,4 @@ - Started writing `grid.html` page. - 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. diff --git a/docs/v2/grid.html b/docs/v2/grid.html index 203ed65..646228d 100644 --- a/docs/v2/grid.html +++ b/docs/v2/grid.html @@ -54,6 +54,7 @@ border-top: 1px solid #bdbdbd; } } + .box-colored.green { background: #1b5e20; } @@ -215,7 +216,16 @@
- +
+

Small screen layout

+
+
+
+

Medium/Large screen layout

+
+
+
+

@@ -275,7 +285,7 @@
-

+

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

Sample code