Cutestrap: 8k CSS framework

It's a grid system, not framework, so it adapts to what you need.

For instance, Cutestrap follows BEM naming conventions and uses KSS to generate its own documentation. KSS is a nice way of generating a pattern library of your own, as you start to extend your base CSS framework.

Also, one big difference is the way they handle grids. Cutestrap grids automatically stretch columns to fill up the horizontal space and allow you to provide weights. (This is essentially a very thin abstraction on top of flexbox.) Whereas Pure grids deal more with unit sizing, more like Bootstrap.

In general, Cutestrap is more opinionated (as its tagline implies) whereas Pure offers much more customizability. I'd argue that Pure should be used more like Bootstrap, as a way to prototype complex UIs before applying more custom styling, whereas Cutestrap should be more directly used as a base for your own, custom (and opinionated) styling.

1) Want to use it

2) Are already using it

3) Found a template they love they want to base the site off of

https://css-tricks.com/bem-101/

[ed: Having now read: http://mrmrs.io/writing/2016/03/24/scalable-css/ linked above, I can at least see where this idea is coming from. I guess I'm still thinking in documents with semantic mark-up, rather than UI widgets. I'm not entirely convinced throwing out all the cascading bits is the best approach, but I sympathize with that point of view.]

This is madness. Why work so hard to avoid how CSS selectors work? I mean, if you have a menu-structure built around divs, surely it should be enough to say that direct children of the div with class menu, should be considered menu items?

  <!DOCTYPE html>
  <html>
  <body>
  <style>
  div.menu > div {
    background: red;
  }
  div.menu > div:nth-child(3) {
    background: blue;
  }
  </style>

  <div class="menu">
    <div>Item one</div>
    <div><p>Also<br />an item</p>
    </div>
    <div>Item #3 and CSSv3
       <div>knows (still blue)</div>
    it</div>
    <div>Item #4 and CSSv3 knows it</div>
  </div>
  <div>wat</div>
  </body>
  </html>

I prefer CSS frameworks to provide the bare minimum instead of the kitchen sink. The only exception I make is if I am working on a project that I know will not have design provided. If a project does have a provided design, overriding framework defaults is counterproductive. Just write your own styles when you need them.

With something this small, it could be just into the one file, but I'm optimizing for that granularity.

I want to build the project in a way that people would like to use it, so you'll probably see mixins brought back in a future release :)