Grid System

Table Of Content

• Table Of Content
• About
• Install
• Usage
  • 1. Import css file
  • 2. Use css classes
• Documentation
• Developers & contributers guide
• Changelog
• License

About

A simple grid system with 4 screen sizes (sm, md, lg, xl) build using Flex-box CSS3 prooperties & it based on bootstrap media query sizes to make your design responsive with maximum media resolutions

Install

avaliable installing ways

• CDN
  https://mohssineaboutaj.github.io/grid-system/css/grid-system.min.css
• NPM
  npm install --save @mohssineaboutaj/grid-system
• Yarn
  yarn add --save @mohssineaboutaj/grid-system
• Download
  go to https://github.com/mohssineAboutaj/grid-system, download the zip or clone the repo, copy css file exist on the path css/grid-system.css or css/grid-system.min.css, then follow usage steps bellow

Usage

1. Import css file

<link rel="stylesheet" href=PATH_OF_CSS_FILE />

NOTE: dont forget to replace the PATH_OF_CSS_FILE with a real path of the css file

2. Use css classes

<div class="row">
  <div class="grid md-6-and-up">
    size 6 columns in medium screens & up
  </div>
  <div class="grid md-6-and-up">
    size 6 columns in medium screens & up
  </div>
</div>

Documentation

Full documentation & more info

Developers & contributers guide

README file for developers & contributers

Changelog

Read the Changelog

License

MIT @mohssineAboutaj