mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 12:00:36 +02:00
Code Issues Releases Wiki Activity
Page: Grid
Pages
Base Buttons Carousel Collapse Documentation Extra utilities and experimental classes Flavors Forms Grid Home Labels and Badges Modals Navigation Navigation: Dropdown Progress Bars Spinners Tables Tabs Utilities and helper classes
Clone
2
Grid
Angelos Chalaris edited this page 2016-08-23 11:25:13 +03:00
Table of Contents

The grid system is built similarly to the one used by frameworks such as Bootstrap or Pure.CSS and allows users to build sectioned websites to their liking. The implementation is mobile-first, prioritizing smaller screen styles over larger screen styles.

The grid system can be customized to the user's needs using the provided mixin in the _grid.scss partial file.

Definition

make-grid(
    $container-name, 
    $container-padding, 
    $row-name, 
    $col-name,
    $col-number, 
    $col-padding, 
    $xs-prefix, 
    $sm-prefix, 
    $md-prefix, 
    $lg-prefix, 
    $hide-suffix,
    $sm-breakpoint, 
    $md-breakpoint, 
    $lg-breakpoint)

Parameters

  • $container-name : The class name of the container for the grid.
  • $container-padding : The left and right padding of the container. [1]
  • $row-name : The class name of the grid's rows.
  • $col-name : The class name of the grid's columns.
  • $col-number : The amount of columns in the grid.
  • $xs-prefix : Class prefix for extra small screens.
  • $sm-prefix : Class prefix for small screens.
  • $md-prefix : Class prefix for medium screens.
  • $lg-prefix : Class prefix for large screens.
  • $hide-suffix : Class suffix for hidden columns. [2]
  • $sm-breakpoint : Breakpoint for small screens.
  • $md-breakpoint : Breakpoint for medium screens.
  • $lg-breakpoint : Breakpoint for large screens.

Notes:

  • [1] : The padding of the container might cause the page to grow by $container-padding to the right. This can be fixed either via @media queries or setting the padding to 0.
  • [2] : Columns with the $hide-suffix will be only hidden in the screen size specified.

Remarks

  • Using the above mixin, the default 12-column grid style is built using the following SCSS directive:

    @include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);

  • The code will generate a grid system based on the specified parameters, prioritizing smaller displays over larger. This is in line with the framework's mobile-first tagline.

  • Multiple grids can be created using the mixin provided. In this case, make sure to specify different names for each grid's parts.

  • Parts of the grid system can be stripped manually, like the hidden column classes. Make sure to define a different mixin based on the code provided. Alternatively, you can remove the specific pieces of code you want from your final compiled CSS file. Note that some preprocessors might overwrite these manual changes.

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.