My take on Taffy css by @lodog23 (Open source, lightweight, modern CSS framework built with Flexbox)
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
examples_css
src/css
.gitignore
README.md

README.md

Taffy con chile V.4.0

Very simple and lightweight framework based on Taffy: https://github.com/lodog23/Taffy-CSS-Framework

What is new in V.4.0

  • The old grid system is back Because it make sense all this time but i didn't believe in myself
  • Check the rules for the grids down below
  • New grids with flex-grow
  • Believe it or not this system didn't have (untill now) a way to make disappear stuff with mediaqueries so now you have this classes to make your wildest dreams come true: .lg--hidden .md--hidden .sm--hidden
  • And god dammit i don't have time to support sass (sorry guys and gurls)..so bye bye sass

Preliminar notes:

  • Is not supported by all browsers (i know bummer) but be careful this use some wild shit mainly supported by chrome, firefox, edge, safari and other modern browsers (i did some test in opera and kind of works but i dunno).
  • It is all css, so is ready to use, i could make a fully browser compatible in sass (and i did but it was useless) but this supposed to be used quickly without further installations.
  • There is a section of modules where i will be adding more modules that are not strictly necessary
  • Last but not least big shout out to Logan who's work i am about to distort, you are the man!

How to install?

T.L.D.R: Check out the examples on the folder "examples"

  1. Copy the taffy-con-chile.min on top of your css files
  2. Substitute the main variables with your own
  3. Please just add code, don't try to manipulate the files if you don't know what you are doin', in case you know go to step 4
  4. If you wish to mess more with the code the uncompressed file is on the src folder
  5. To avoid compatibility issues remember to look at the version you are using (^ _ ^')

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 get rid of some cool features but i think they are not too helpfull like grid-grow, grid count and grid child sizing
  • Added some class for buttons and helpers

How to use?

Vars

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

:root {
  --main-color: #333333;    /* body font color */
  --main-bgcolor: #fff;     /* body background color */
  --main-line: #cfcfcf;     /* hr, blockquote, input and table border color */
  --title-color: #555555;   /* h1,h2,h3,h4 color */
  --accent-color: #0396EF;  /* links and buttons colors */
  --accent-bgcolor: #02a4ef;/* buttons background color */
  --accent-line: #ededed;   /* table-striped and table-select background color */
  --disabled-color: #777777;/* disable and muted_color */
  --main-size: 22px;        /* font size for desktop */
  --main-font: "Helvetica Neue", Helvetica, Arial, sans-serif;  /* body font family */
  --title-font: "Helvetica Neue", Helvetica, Arial, sans-serif; /* h1,h2,h3,h4 font-family */
  --accent-font: Georgia, Times, "Times New Roman", serif;    /* blockquote and text-highlight */
}

Grid

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

grid

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

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

<div class="grid">
	<div class="is-4--sm">
		Column 1
	</div>
	<div class="is-4--sm">
		Column 2
	</div>
	<div class="is-4--sm">
		Column 3
	</div>
</div>

grid-flex flex-grow (NEW)

This will display your elements side to side left to right no matter the device size and will fill all the space neatly

<div class="grid-inline">
	<div class="col-flex">
		This column will fill an equivalent size depending of the number of columns you use
	</div>
	<div class="col-flex">
		This column will fill an equivalent size depending of the number of columns you use
	</div>
	<div class="col-flex">
		This column will fill an equivalent size depending of the number of columns you use
	</div>
</div>

Offset

Because some times you need to complicate the grid a bit, so to move some columns and make spaces that are responsive

In this example we center an element of 3/12 and breake it on small devices

<div class="offset--4--sm is-3--sm">
	Center column 3
</div>

Compatibility

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

Live Examples