CSStack (Beta)

Summary

• Overview
• Working with the main containers
• Working with the grid system
• How to Install
• Classes
• Contribution

Overview

Working with the main containers

Considering Below:

  <div class='stack'>
    <div class='queue between'>
      <div class='element'></div>
      <div class='element'></div>
      <div class='element'></div>
    </div>
    <div class='queue'></div>
    <div class='queue'></div>
    <div class='queue'></div>
  </div>

Which compiles to:

• The 'container' element has the class 'stack', which stacks all elements inside itself.
• The 'box' elements have the class 'queue' each one, making that horizontal stacking.
  • Note that it also has the 'between' class, arranging the elements inside accordingly.
• And the 'elements' are commom elements.

Working with the grid system

Working with the grid system is very based on bootstrap: It has columns from 1 to 12 and you can define it's responsiveness.

So creating something like this:

  <div class='board'>
    <div col-4>
    <div col-4>
    <div col-4>
  </div>

Compiles to:

And if creates something like this:

  <div class='board'>
    <div col-4>
    <div col-4>
    <div col-8>
  </div>

How to Install

Install via NPM npm i csstack

Also you can include through jsdlivr https://cdn.jsdelivr.net/npm/[email protected]/css/master.css

For example, in the HTML: <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/css/master.css'>

Classes

Containers

• .stack
  • Create a container which elements stack up vertically.
• .queue
  • Create a container which elements stack up horizontally.

Grid

• .board

  • Create a container which elements stack up horizontally and enable the grid line break for subsequent items until reach 12 spaces(columns).

• .col-1 (col-2, col-3... col-12)

  • Tells the elements to ocupy from 1 to 12 spaces in the container.

• .col-m-1 (col-m-2, col-m-3... col-m-12)

  • Tells the elements to ocupy from 1 to 12 spaces in the container.
    • It Override previous col classes.

• .col-l-1 (col-l-2, col-m-3... col-m-12)

  • Tells the elements to ocupy from 1 to 12 spaces in the container.
    • It Override previous col classes.

Flex Helpers

• .start

  • Forces flex content to start.

• .center

  • Forces flex content center.

• .end

  • Forces flex content end.

• .around

  • Forces flex content around.

• .between

  • Forces flex content between.

Contribution

Like the project? Give a star, issues, comments and pull requests are welcome.