Responsive Grid System

Responsive grids - inspiration by Jonas Schmedtmann's course.

Architecture / Philosophies

• No Bootstrap or any other frameworks used. This is pure Sassy Cascading Style Sheets!
• Usage of Sassy CSS (SCSS)
• Block Element Modifier Naming System
• Think, Build, Architect Thinking Philosophy
• Responsive Design
• Standard UI Design Procedures
• Coded with Visual Studio Code

Overview

• There are three grid systems that would be updated here: Float Layout, Flexbox, and CSS Grid.
• For now, only the Float Layout and the CSS Grid Layout are available.

Float Layouts

• Usage of width, floats, and clearfix hacks in order to make a responsive grid system.

Flexbox Layouts

• Usage of flexbox to make layouts easier. The design is pretty similar to the Float Layouts.

CSS Grid

• The design is a blog-like website, but only the grids that are available.

Usage

• First, clone this repository by using git clone repository_link.
• Next, run npm i to install the SASS compiler.
• Choose one of the NPM scripts to run: float:watch:sass, flex:watch:sass or grid:watch:sass.
• Every time you change your SASS file, it should be compiled to CSS immediately.
• I intentionally ignored the CSS files to reduce clutter.

Alternatively, run it on codepen.io by copy pasting the HTML and the SCSS code.