From 4355a66a003bbf0b327f57f19152fe8d00fa4226 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 19 Nov 2016 13:49:15 +0200 Subject: [PATCH] Grid module showcase initial commit --- docs/v2/DEVLOG.md | 6 + docs/v2/grid.html | 295 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 301 insertions(+) create mode 100644 docs/v2/grid.html diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 86b57c1..2e162b5 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -477,3 +477,9 @@ - Minor changes in `core` module formatting. - Added `core` documentation for common textual elements. - Updated stylesheet reference to the latest changes for live pages. + + +## 20161119 + +- Started writing `grid.html` page. +- Added basic info for grid, set layout for the page, checked styles - they're all good for grid. diff --git a/docs/v2/grid.html b/docs/v2/grid.html new file mode 100644 index 0000000..203ed65 --- /dev/null +++ b/docs/v2/grid.html @@ -0,0 +1,295 @@ + + + + + + + + + mini.css - Grid + + + + + + + + + +
+
+ Introduction + Modules + Flavors + Customization + Github +
+
+
+
+
+
+ +

mini.css

+ v2.0 +
+
+
+
+ +
+
+
+

Grid

+

The grid module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as flexbox). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.

+

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

+ +
+
+
+
+
+
+

Quick overview

+

Easy page layout is one of the main advantages of using a CSS toolkit over writing your own styles. The grid module utilizes the Flexbox Layout to provide you with a modern and responsive layout grid system for all your needs. Rules in the grid module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.


+
+
+

Quick start

+

To use the grid module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


+ 
<meta name="viewport" content="width=device-width, initial-scale=1">

+
+
+
+
+
+
+
+
+

Basic layout

+
+
+
+

+
1
11
+
2
10
+
3
9
+
4
8
+
5
7
+
6
6
+
12
+
fluid
fluid
+
+
+
+

The grid system's basic layout is composed of three components, presented below in the order they should be added to the DOM tree:

+
    +
  1. The grid's .container is the outermost shell for your grid. It is a fluid container that serves wrap the flexible grid system inside it.
    2. +
  2. Inside the container, .rows are added to specify each row of the grid layout. Rows serve to provide you with a simple basis for your layout's columns.
    3. +
  3. Finally, inside the rows, .col- elements are added for the columns. The columns are a little bit more complex than the container and rows, as they are what makes the layout respond to changes. There are two basic ways to define a column for your layout: +
      +
    • using .col-SCR_SZ to specify fluid columns, replacing SCR_SZ with one of the available screen size names (sm for smaller screens, md for medium-sized screens or lg for larger screens).
      • +
    • using .col-SCR_SZ-COL_WD to specify columns with fixed width, replacing SCR_SZ with one of the available screen size names and COL_WD with a number from 1 to 12 specifying the width of the column (1 meaning 1/12 of the width of the row and 12 meaning 100% of the width of the row).
      • +
    +
    4. +
+

Sample code

+

The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on Show sample code below to see the code sample for this example. Also, the example presented showcases the grid system's syntax for smaller screens, but you can do the same thing for any screen size.


+
+ + +
+ 
<div class="container">
+  <div class="row">
+    <div class="col-sm-1">
+    </div>
+    <div class="col-sm-11">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-2">
+    </div>
+    <div class="col-sm-10">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-3">
+    </div>
+    <div class="col-sm-9">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-4">
+    </div>
+    <div class="col-sm-8">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-5">
+    </div>
+    <div class="col-sm-7">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-6">
+    </div>
+    <div class="col-sm-6">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12"> 
+    </div>
+  <div class="row">
+    <div class="col-sm">
+    </div>
+    <div class="col-sm">
+    </div>
+  </div>
+</div>
+
+

+
+
+
+

Notes

+
    +
  • mini.css uses a mobile-first approach to the grid system. This means that specifying a layout for smaller device sizes will apply the same layout on medium and large screens, so you do not have to rewrite the same layout for all three screen sizes. However, if you want to change the layout on different screen sizes, check the section below.
    • +
  • The grid module is compatible with modern browsers, but does not display properly on older browsers.
    • +
  • The specific breakpoints for small, medium and large screen sizes are as follows: +
      +
    • small: 800px wide or less
      • +
    • medium: more than 800px wide but less than 1080px wide
      • +
    • large: 1080px wide or more
      • +
    +
    • +
+
+
+
+
+
+
+
+
+

Screen-specific layouts

+
+
+
+ +
+
+

+

Sample code

+
+
+
+
+
+
+
+
+
+
+

Column offsets

+
+
+
+ +
+
+

+

Sample code

+
+
+
+
+
+
+
+
+
+
+

Column ordering

+
+
+
+ +
+
+

+

Sample code

+
+
+
+
+
+
+
+
+
+
+

Dos and Don'ts

+
+
+
+ +
+
+

+

Sample code

+
+
+
+
+
+
+
+
+

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

+
+
+
+ + + + \ No newline at end of file