@morsecodemedia/containers.css NPM

containers.css

A starting point for container and gaps when you don't want to use Bootstrap and you can't go evergreen with CSS Grid.

GitHub NPM npm

Installation

YARN

yarn add -D @morsecodemedia/containers.css

NPM

npm install -D @morsecodemedia/containers.css

Adding to project

Nuxt.js

In the nuxt.config.js file

css: [
  '@morsecodemedia/containers.css'
]

Browser support

Chrome
Edge
Firefox ESR+
Internet Explorer 10+
Safari 8+
Opera

Containers

Containers are the max-width areas in which content blocks can take up. Currently there are three (1-3), 1 being the widest and 3 being the most narrow.

A Visual Representation

https://morsecodemedia.github.io/containers.css/

Containers Breakdown

0px-767px

.container1 100% - 30px (15px on either side)

.container2 100% - 30px (15px on either side)

.container3 100% - 30px (15px on either side)

768px-991px

.container1 100% - 50px (25px on either side)

.container2 100% - 70px (35px on either side)

.container3 100% - 110px (55px on either side)

992px-1199px

.container1 100% - 70px (35px on either side)

.container2 100% - 200px (100px on either side)

.container3 100% - 400px (200px on either side)

1200px-1399px

.container1 100% - 100px (50px on either side)

.container2 100% - 300px (150px on either side)

.container3 100% - 500px (250px on either side)

1400px+

.container1 max-width: 1300px

.container2 max-width: 1000px

.container3 max-width: 700px

Gaps

Gaps are vertical spacing used between columns to keep a consistent vertical rhythm among containers. Currently there are four gaps (1-4). 1 being the smallest and 4 being the tallest.