CSStack (Beta)

Summary

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

Overview

Have you ever felt that positioning and styling mess a lot with your work organization?
If you use CSS without the assistance of any framework, for example, your file starts getting too big, and if you use a framework like Bootstrap(which is amazing), half of your HTML is destined for classes.

CSStack is a tiny CSS Grid framework built in SASS focused on the construction of the page structure. It is simple and easy-to-use, aiming to keep the CSS only for styling(fonts, colors...) and polluting it with less lines.

It has a responsive columns feature mixed with 'a box inside a box' concept which helps getting those nasty elements in the place you want.

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>

Compiles to:

How to Install

Install via NPM
npm i csstack

Also you can include through jsdlivr
https://cdn.jsdelivr.net/npm/csstack@1.2.5/css/master.css

For example, in the HTML:
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/csstack@1.2.5/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.