8 ms·
Cutestrap: 8k CSS framework
- ungzd 10y agoFor me, forms look microsoftish (maybe can be easily customized though) and BEM is hungarian notation of CSS.
- _RPM 10y agoWhat is "microsoftish"?
- davidlakata 10y agoI suppose the forms are vaguely reminiscent of Microsoft's rectangular, solid-colored forms
- izym 10y agoHow is BEM the Hungarian notation of CSS?
- GavinMcG 10y agoFor 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.)
- tylerchilds 10y agoHuh, I haven't even looked at MS in years. I just styled them this way for consistency in markup and display.
- sotojuan 10y agoCool, but what does it offer that Pure (4kb doesn't)? http://purecss.io http://purecss.io
- nikolay 10y agoCuteness, I guess. ;)
- xutopia 10y agoThe grids are way nicer in cute. You just have to specify a grid container and the flex takes care of the rest.
- achairapart 10y agoYes, 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 10y agoOriginally 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.
- odonnellryan 10y agoPureCSS has been my go-to for small websites/web applications for a while. I only use Bootstrap for clients that: 1) Want to use it 2) Are already using it 3) Found a template they love they want to base the site off of
- hire_charts 10y agoFrom what I can tell, they have slightly different aims. 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.
- deleted 10y ago[deleted]
- Keats 10y agoI 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 10y agoThis is something that interests me as well. I would like a bare-bones configurable SCSS library to use in my projects.
- tylerchilds 10y agoWhen I was originally writing it, I had the classes split out into mixins, but put them back into classes so it would be a little simpler to follow at first. 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 :)
- vonklaus 10y agocan 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 10y agoHey! 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.
- cel1ne 10y agoIn 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 10y agoGeez. Those selectors.. "<footer class="pv4 ph3 ph5-m ph6-l mid-gray">"
- sdnguyen90 10y agoIt 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 10y ago"...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/
- quaunaut 10y agoIt's definitely weird at first, but the aim of atomic CSS is to not have a CSS file that just grows and grows and grows. This article(written by the creator of Tachyons) helps to explain the issue: http://mrmrs.io/writing/2016/03/24/scalable-css/ http://mrmrs.io/writing/2016/03/24/scalable-css/ Where I work, we're using it on a new project and while it definitely requires a lot of learning(and just generally understanding CSS), it's faster to debug with, easier to take care of edge cases, and the total size for our app is incredibly small.
- 10y ago
- azurelogic 10y agoRead '8k' and thought we were talking about resolution, not kilobytes. Cool, but not as absurd as I was hoping for.
- mkolodny 10y agoBootstrap can be customized to be as small as you want it to be: http://getbootstrap.com/customize/ http://getbootstrap.com/customize/
- mkoryak 10y agounless its still not small enough
- deedubaya 10y agoBEM may be effective for some, but it's a total turn-off for me simply because of the `__` syntax making my eyes bleed.
- e12e 10y agoHad 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 10y agoI'm with you, those two concepts are mutually exclusive though.
- deleted 10y ago[deleted]
- mhd 10y agoNo words about browser support?
- tylerchilds 10y agoIt's IE10+, the flexbox grid is the only limiting factor.
- sixdimensional 10y agoSmall 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 10y agoThanks! Someone opened up a PR and it's merged now :)
- andersevenrud 10y agoJust 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!
- Simorgh 10y agoI'm using this these days. I find it incredibly flexible.
- mrinterweb 10y agoSemantic 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.
- honua 10y ago> bower install cutestrap People still use bower...? Somehow I thought it officially(?) was dead.
- whatnotests 10y agoWhat do you suggest to use instead?
- tylerchilds 10y agoYou can install it with either now, it's not officially dead at all though. Most people talk about it like it is though.
- edwinyzh 10y agoWhat 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?