Why I created this?

I needed a framework to make easier and faster the work in my projects and avoid running Sass every damn time I needed to work on something. I , i always recurred to boostrap but i find it really heavy for what i needed and with a lot of detail in things i dind’t needed an viceversa so i created this taking different pieces from other frameworks i liked specially from taffy. If you like the structure and feel of this site is because is created with Taffy con Chile.

Preliminar notes:

  • It’s not supported by all browsers (I know, bummer) but runs on some wild shit mainly supported by chrome, firefox, edge, safari and other modern browsers (I tested it in opera and kind of works).
  • It is all css, so is ready to use. I could make a fully browser compatible in sass but it is meant to run quickly, without further installations.
  • I’m still working in a section to add more useful modules, although they are not strictly necessary.
  • Last but not least: big shout out to Logan whose work I am about to distort, you are the man!

What changed from the original Taffy?

  • Taffy don't have the var system.
  • The grid system is different on the construction (more above).
  • I also got rid of some cool features because I think they are not as helpful as grid-grow, grid count and grid child sizing.
  • Added some class for buttons and helpers.

How to use the var system

Yeap i use css vars to control the basics, colors and fonts. Everything is very commented (at least the vars):

:root {
--main-color: #f8f8f8; /* body font color */
--main-bgcolor: #323232; /* body background color */
--main-line: #c4c4c4; /* hr, blockquote, input color */
--accent-color: #68d6d0; /* links and buttons colors */
--accent-bgcolor: #54afaa; /* buttons background color */
--accent-line: #e8e8e8; /* table background color */
--disabled-color: #e89999; /* disable and muted_color */
--main-size: 16px; /* font size for desktop */
--main-font: 'font name', serif; /* body font family */
--title-font: 'font name', serif; /* hs font-family */
--accent-font: 'font name', serif; /* text-highlight */
}

Grid

The grid system have two kind of containers usign the power of flex-box:

This grid will display your elements side to side left to right and will collapse on small devices.

Explaning the name of the grids will give you a clue on how to use it: is- will make the columns have a padding left and right **the number, for example 4 ** will determine the relation of the columns divided by 12 **the size for collapse ** last but not least we can use -- and lg, md or sm to collapse on large, medium or small devices according to the case

is-4--sm
is-4--sm
is-4--sm
In this example we have 3 divs so 4/12 = 3 and we want it to collapse on small devices so we add --sm

Compatibility

T.L.D.R: Don't use the css only on internet explorer cuz vars if you want compatibility use the sass files