mw-grid

Powerfull and lightweight CSS layout framework for creating your layout like 'container/row/column' support block, inline-block and flexbox models.

New in current version 2.7.2

Add demo on gh-pages https://malahov-web.github.io/mw-grid/

Previous features update in 2.7.1

Update Structure elements - add containers responsive by devices (max-width)

Table of Contents

• Example
• Installation
• Demo
• Usage

Example

Your scss:

// Options:
$columns: 12;
$columns_gap: 15; // unitless
$container_width: 1400; // unitless
$breakpoints_between: 'responsive'; // 'responsive' || 'fixed'
$vertical_alignment_responsive: 1;  // 0 || 1 

$display_models: ( 
    block: 1,
    inline-block: 0,
    flex: 1
); 

$devices: ( 
    mv_: (
        breakpoint: 320,
        container_max: 300,
        font_base: 14px,
        ms_coeff: 1.10,
    ),
    mh_: (
        breakpoint: 576,
        container_max: 540,
        font_base: 14px,
        ms_coeff: 1.10,
    ),
    tb_: (
        breakpoint: 768,
        container_max: 750,
        font_base: 15px,
        ms_coeff: 1.17,
    ), 
    ds_: (
        breakpoint: 1024,
        container_max: 960,
        font_base: 16px,
        ms_coeff: 1.17
    ),
    hd_: (
        breakpoint: 1366,
        container_max: 1200,
        font_base: 16px,
        ms_coeff: 1.17
    )   
);

// Import module
@import 'node_modules/mw-grid/src/_mwgrid.scss';

Installation

Clone the repo:

git clone git@github.com:Malahov-web/mw-grid.git

Install with npm:

$ npm install mw-grid --save-dev

Demo

See demo (small descriptions, exapmles and code) https://malahov-web.github.io/mw-grid/

and in this 'demo' directory: node_modules/mw-grid/demo/index.html ​

Usage

HTML code - CSS-classes

Standart structure classes .section, .container, .row, and columns like .mv_ or [class*="ds_"]

Your html:

<section class="section">
    <div class="container">
        <div class="news row">

            <div class="mv_12 tb_6 ds_4 news__item-outer">
                <div class="news__item row-flex middle">
                    <div class="news__item-header mv_12 ds_5">
                        <div class="news__item-year">
                            2020
                        </div>
                        <div class="news__item-title">
                            Getting ready to meet Christmas!
                        </div>
                    </div>
                    <div class="news__item-content mv_12 ds_7">
                        <div class="news__item-text centered tb_lefted">
                            Getting ready to meet Christmas is an EP by Las Vegas rock group , released in December 2020 in the United States.
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

CCS code (SCSS API)

You have an SCSS API that allows you to quickly configure all the grid parameters See Example

SCSS Utilites

You also have some utilites (SCSS functions) to help you work with the settings.

.your-special-block {
    font-size: get_grid_f_b('ds_');

    @media (min-width: get_grid_bp('ds_')+px ) {  

        max-width: 1/2 * get_grid_c_m('hd_')+px;
    }
}  

2.7.2 / 2021-07-09

• Update Demo: Overview - SCSS API - Vars, Objects
• Update Demo: Features - Vertical Alignment
• Fix Demo: Overview - SCSS API - Example ($display_models correct name)

2.7.1 / 2021-06-14

• Add gh-pages Docs
• Update Demo: Structure elements - add containers responsive by devices (max-width)

2.7.0 / 2021-02-12

• Update Structure elements - add containers responsive by devices (max-width)

2.6.0 / 2020-12-26

• Update Features - make vertical alignment in rows responsive by devices
• Settings - add vertical alignment responsive
• Fix Demo: Overview - SCSS API - type (int corrected to number)

2.5.0 / 2020-10-30

• Update Features - self centered
• Update Demo: Features - Horizontal alignement, self centered

2.4.2 / 2020-09-26

• Clean dev 'app/' dir
• Update Readme.md: add Demo screenshot and Table of contents

2.4.1 / 2020-08-15

• Update devices: add columns gap support

2.3.3 / 2020-07-29

• Update Demo: fix texts Overview, Display Models

2.3.2 / 2020-06-27

• Update Demo: Structure elements
• Update Demo - update page: footer

2.3.1 / 2020-06-20

• Update Demo: Overview - add SCSS API

2.3.0 / 2020-06-13

• Added CSS Utulites: mixins - media-up(), media-down(), ()media-only()

2.2.2 / 2020-06-06

• Update Demo - update page: menu-top, sidebar

2.2.1 / 2020-05-29

• Added Demo: Features - specific order

2.2.0 / 2020-05-27

• Added Specific order

2.1.0 / 2020-05-22

• Added SCSS Utulites: get_grid_property()

2.0.8 / 2020-05-20

• Update: Reverse - add ".reverse" - alias for ".row-reverse"

2.0.7 / 2020-05-15

• Added Demo: scss-utilites

2.0.6 / 2020-05-13

• Added Demo: Features - columns-same-height

2.0.5 / 2020-05-08

• Added Demo: Features - ordering

2.0.4 / 2020-05-06

• Added Demo: Features - vertical-aligment

2.0.3 / 2020-05-01

• Added Demo: Features - horizontal-aligment

2.0.2 / 2020-04-24

• Update Demo: text-utilites
• Update Demo: Overview

2.0.1 / 2020-04-18

• Fixed Readme.md (default breakpoints, deprecated versions)

2.0.0 / 2020-04-17

• Update Readme.md (default breakpoints)

1.3.3 / 2020-04-17

• Added Demo: text-utilites

1.3.2 / 2020-04-14

• Added Demo: responsive-utilites
• Added LICENSE
• Fixed Demo CSS (main)

1.3.1 / 2020-04-10

• Added Demo: collapse, display-models

1.3.0 / 2020-04-04

• Added Demo: /demo/index.html, /demo/columns.html, /demo/structure-elements.html,

1.2.1 / 2020-02-28

• Fix Reverse in Block model
• Fixed Collapse (columns)
• Added container-elastic

1.2.0 / 2019-12-26

• Added SCSS Utulites (functions)
• Added 'Usage' in Readme.md

1.1.2 / 2019-12-26

• Update Readme.md Example code

1.1.1 / 2019-12-25

• Update

1.1.0 / 2019-12-25

• Added SCSS API with scss '!default'

1.0.3 / 2019-12-18

• Added Readme.md
• Added History.md

1.0.2 / 2019-12-18

• Updated keywords to package

1.0.1 / 2019-12-18

• Added keywords to package

1.0.0 / 2019-12-18

• Initial release