
Cutestrap: 8k CSS framework - tangue
https://www.cutestrap.com
======
cel1ne
In my opinion this is still the best option for CSS, especially in combination
with React.

[http://tachyons.io/](http://tachyons.io/)

Most importantly it contains a ratio-based scale:
[http://tachyons.io/docs/layout/spacing/](http://tachyons.io/docs/layout/spacing/)

~~~
missing_cipher
Geez. Those selectors.. "<footer class="pv4 ph3 ph5-m ph6-l mid-gray">"

~~~
sdnguyen90
It is a bit weird to use at first but I highly recommend giving it a shot.

I've built some complex UI's with the same class name styles (Basscss). 99% of
the time I'm reusing classes and I don't have to write anything custom.

Prototyping is great once you memorize the classnames.. Just write HTML, no
need to switch to CSS files.

If you're working with global styles this is by far the most scalable CSS
methodology as of right now IMO.

~~~
cel1ne
"...once you memorize the classnames"

I don't know which editor you are using, but for TextMate I've written a 20
line-plugin that greps the tachyons.css file and gives me code-completion.

[http://postimg.org/image/tq038rwqp/](http://postimg.org/image/tq038rwqp/)

------
sotojuan
Cool, but what does it offer that Pure (4kb doesn't)?

[http://purecss.io](http://purecss.io)

~~~
xutopia
The grids are way nicer in cute. You just have to specify a grid container and
the flex takes care of the rest.

~~~
achairapart
Yes, but just one row at a time (it doesn't wrap). And with flexbox it's just
2 lines of CSS code anyway (unprefixed).

~~~
tylerchilds
Originally I had one class with grid, direct children were rows and direct
children of rows were cells, but it turned into div soup pretty quickly, so I
opted for one row at a time.

------
deedubaya
BEM may be effective for some, but it's a total turn-off for me simply because
of the `__` syntax making my eyes bleed.

~~~
e12e
Had to look up BEM, this appears to be a good overview:

[https://css-tricks.com/bem-101/](https://css-tricks.com/bem-101/)

[ed: Having now read: [http://mrmrs.io/writing/2016/03/24/scalable-
css/](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>

~~~
tylerchilds
I'm with you, those two concepts are mutually exclusive though.

------
andersevenrud
Just throwing this in here in case anyone is on the look for other frameworks:
[http://semantic-ui.com/](http://semantic-ui.com/)

So far this is my favourite!

~~~
mrinterweb
Semantic UI is far from a light-weight CSS framework. I was recently working
on a project using semantic, and I saw that the CSS alone was around ~960KB.
I'm guessing that something must have been misconfigured for CSS output to be
that high just for the Semantic UI framework, but offhand I didn't see it.
That didn't include the icon fonts or the JS with Semantic. I'm guessing with
some work, that CSS payload could have been trimmed down, but I doubt it could
be trimmed enough to be considered light-weight.

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.

------
vonklaus
can someone explain the convention of importing a directory into a file of the
same name (and same level) before main.scss. The structure is:

    
    
        src/sass/
            components/
            support/
            vars/
            _components.scss
            _support.scss
            main.scss
    
    

and within main:

    
    
        @import "components";
    
    

Just curious why this is? I usually just import them directly into main, but I
could understand if they were nested into the directory so they could be
broken out. This structure doesn't make sense to me though as they are all
flat & in same directory.

~~~
tylerchilds
Hey! Usually I do exactly what you describe, but I laid it out like this so
that if people want to include all the components, it's one line. Or if they'd
want to include just the grid from components, it would still just be one
line.

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

------
honua
> bower install cutestrap

People still use bower...? Somehow I thought it officially(?) was dead.

~~~
whatnotests
What do you suggest to use instead?

~~~
honua
npm.

~~~
ben_jones
Is style(src="/node_modules/foo/bar.min.css") really that superior to
(src="/bower_components/foo/bar.min.css").

You could argue that npm is the better package manager, but the average user
does care about the underlying semantics.

------
mhd
No words about browser support?

~~~
tylerchilds
It's IE10+, the flexbox grid is the only limiting factor.

------
Keats
I think it will need to follow Foundation style and offer mixin rather than
hardcoding the classes. A library taking like .btn andothers etc is not
something you'd want. Or maybe it's just me that don't like putting tons of
classes in the HTML.

~~~
bearlikelion
This is something that interests me as well. I would like a bare-bones
configurable SCSS library to use in my projects.

------
edwinyzh
What do you think of [http://bulma.io](http://bulma.io)? It's based on
Flexbox, what it attracts me is that: 1) Quite feature rich out of the box. 2)
Very nice-looking out of the box, than Bootstrap. 3) Much lightweight than
bootstrap. 4) It's very easy to learn, even for a desktop-app-guy like me. 5)
It's very interesting that Bulma has very little "global styles" \- most of
the time you need to explicitly reference a Bulma class. To me this seems like
to way to go - you know, in the programming world we try our best of best to
avoid global variables.

What do you think?

------
sixdimensional
Small typo in the following paragraph on the front page: "There are plenty of
amazing front end ___framworks - > frameworks_ __already, such as, Bootstrap
and Foundation. If you 're looking for something feature rich with loads of
components, those are both great choices."

~~~
tylerchilds
Thanks! Someone opened up a PR and it's merged now :)

------
azurelogic
Read '8k' and thought we were talking about resolution, not kilobytes. Cool,
but not as absurd as I was hoping for.

------
mkolodny
Bootstrap can be customized to be as small as you want it to be:
[http://getbootstrap.com/customize/](http://getbootstrap.com/customize/)

~~~
mkoryak
unless its still not small enough

------
ungzd
For me, forms look microsoftish (maybe can be easily customized though) and
BEM is hungarian notation of CSS.

~~~
izym
How is BEM the Hungarian notation of CSS?

~~~
GavinMcG
For those, like me, who hadn't heard of Hungarian notation:
[https://en.wikipedia.org/wiki/Hungarian_notation](https://en.wikipedia.org/wiki/Hungarian_notation)

(Not suggesting you're one of them.)

