Taffy Con Chile

I created this css framework to help me build my projects faster

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 without compiling any code.
  • 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.
:root {
--main-color: #f8f8f8; /*font color*/
--main-bgcolor: #323232; /*background color*/
--main-line: #c4c4c4; /*border color*/
--accent-color: #68d6d0; /*links colors*/
--accent-bgcolor: #54afaa; /*buttons color*/
--accent-line: #e8e8e8;
--disabled-color: #e89999; /*disable*/
--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;
}

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):

Compatibility

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