Chameleon Grid Layout

A CSS library that provides classes to work with Responsive Grid Layout.

Downloads

Statistics of this lib on NPM.

Total	Weekly	Monthly	Yearly

How to use (install)?

CDN

To use the CSS file via CDN, or if you prefer, you can use the auto-import file (JS) via CDN, it can be done this way:

Unpkg CSS

  https://unpkg.com/@vlalg-nimbus/chameleon-grid-layout/dist/chameleon-grid-layout.min.css

To install

YARN

  yarn add @vlalg-nimbus/chameleon-grid-layout

To use, just import the CSS file. I do not recommend using the auto import file (IIFE), this avoids possible conflicts if your system does not support IIFE.

import '@vlalg-nimbus/chameleon-grid-layout/dist/chameleon-grid-layout.min.css'

HTML5

The lib makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

<!doctype html>
<html lang="en">
  ...
</html>

Mobile first

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Reset

For improved cross-browser rendering, we use Bee: CSS Reset internally.

Grid system

The library includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.

Available breakpoints

Devices	Breakpoint	Infix	Class infix	Dimensions
Mobile	Extra small	`xs`	`.col-xs`	<767px
Tablet	Small	`sm`	`.col-sm`	≥768px
Desktop	Medium	`md`	`.col-md`	≥1024px
Large Desktops	Large	`lg`	`.col-lg`	≥1440px
Extra Large Desktops	Extra large	`xl`	`.col-xl`	≥1600px

It is recommended to use the following Media Queries to work with breakpoints:

@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1440px) {}
@media (min-width: 1600px) {}

To have a better capture, you can set the screen.

@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 1440px) {}
@media screen and (min-width: 1600px) {}

We use other Media Queries to help us with mobile resolutions, enabling better work. This is optional.

@media screen and (min-width: 375px) {}
@media screen and (min-width: 425px) {}
@media screen and (min-width: 576px) {}

All Media Queries:

@media screen and (min-width: 375px) {}
@media screen and (min-width: 425px) {}
@media screen and (min-width: 576px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 1440px) {}
@media screen and (min-width: 1600px) {}

Containers

It is possible to choose between two different containers:

.container, which sets a max width at each responsive breakpoint.
.container-fluid, which is width: 100% at all breakpoints

The max width for each containers are:

Containers	Extra small <767px	Small ≥768px	Medium ≥1024px	Large ≥1440px	Extra large ≥1600px
`.container`	100%	736px	992px	1408px	1568px
`.container-fluid`	100%	100%	100%	100%	100%

To use:

container

  <div class="container">
    <!-- Content here -->
  </div>

Grid system uses a series of containers, rows, and columns to layout and align content. Is fully responsive. The columns range from 1 to 12, allowing you to work on arranging the content without breaking the layout.

Basically, it follows the same pattern as the best-known Frameworks.

A "row" does not exist without a "container" or "container-fluid", and "columns" do not exist without the "row".

A container ("container" or "container-fluid") can have 1 or several "rows", a "row" can have 1 to 12 columns. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

code

  <div class="container">
    <div class="row">
      <div class="col-INFIX-NUMBER">
        <!-- Content here -->
      </div>
    </div>
  </div>

To use the column, you must enter INFIX and the NUMBER.

INFIX: Represents breakpoint, allowing you to choose between the (Class infix) defined in the Breakpoint table.
NUMBER: Represents the size of the column.

code

  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-3 col-md-6">
        <!-- Content here -->
      </div>

      <div class="col-xs-12 col-sm-9 col-md-6">
        <!-- Content here -->
      </div>
    </div>
  </div>

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

code

  <div class="row">
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-xs-block"></div>

    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  </div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls.

code

  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
  </div>

  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
  </div>

Remove gutters

Remove the gutters from a column with the col-no-gutters or no-padding class.

<div class="row">
  <div class="col-xs-12 col-md-8 col-no-gutters">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4 no-padding">.col-xs-6 .col-md-4</div>
</div>

Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

code

  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>

You can also override offsets from lower grid tiers with .col-*-offset-0 classes.

code

  <div class="row">
    <div class="col-xs-6 col-sm-4">
    </div>
    <div class="col-xs-6 col-sm-4">
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
    </div>
  </div>

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

code

  <div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  </div>

Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

	Extra small (xs) Mobile (<767px)	Small (sm) Tablet (≥768px)	Medium (md) Desktop (≥1024px)	Large (lg) Large Monitor (≥1440px)	Extra Large (xl) Extra Large Monitor (≥1600px)
`.visible-xs-*`	Visible	Hidden	Hidden	Hidden	Hidden
`.visible-sm-*`	Hidden	Visible	Hidden	Hidden	Hidden
`.visible-md-*`	Hidden	Hidden	Visible	Hidden	Hidden
`.visible-lg-*`	Hidden	Hidden	Hidden	Visible	Hidden
`.visible-xl-*`	Hidden	Hidden	Hidden	Hidden	Visible
`.hidden-xs`	Hidden	Visible	Visible	Visible	Visible
`.hidden-sm`	Visible	Hidden	Visible	Visible	Visible
`.hidden-md`	Visible	Visible	Hidden	Visible	Visible
`.hidden-lg`	Visible	Visible	Visible	Hidden	Visible
`.hidden-xl`	Visible	Visible	Visible	Visible	Hidden

the .visible-- classes for each breakpoint come in three variations, one for each CSS display property value listed below:

Group of classes	CSS `display`
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Classes	Browser	Print
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Hidden	Visible
`.hidden-print`	Visible	Hidden

Playground

To test, view this example in the external CodePen.

Css LibrariesBEE - CSS Reset

Css LibrariesMysteryBox: CSS Framework