Lit: A ridiculously small responsive CSS framework | Hacker News Reader

Lit: A ridiculously small responsive CSS framework

ajusa.github.io

240 pointsspking59 comments

Love to know the current general feeling on css framworks around hn crowd. Personally I'm using them less and less as css evolves. You can have a pretty good responsive grid with just a few lines of css as for the other things I end up styling them a lot to my own needs so frameworks don't provide me that much value.

I don't love them. They're useful/convenient if you need to support older or edge-case browsers.

When I can get away with it, I'd rather use plain CSS.

Love the big ones (Bootstrap) for rapid prototyping. I have less and less use for them otherwise.

As it happens, yesterday morning I tried using one for the first time in years. Material UI for React. Looked incredible, is very impressive, and yet within only 2 hours I ran into a scenario that couldn't be handled by the framework.

This morning, I'm stripping out all of it and starting over from scratch, like I should have done in the first place.

A caveat is that I love their color system, so I'm importing and using that, but leaving out everything else.

Would highly recommend Tailwind if you don't like the boxed-in nature of most frameworks. Tailwind is more of a design system than a CSS framework. It simply gives you guidance on establishing proper constraints of your design system and then a nice set of utilities to get started with. There is no "can't be handled" scenario in Tailwind.

EDIT: And the book by the same author, Refactoring UI, is also a fantastic primer on the philosophy behind Tailwind.

Refactoring UI looks awesome, thanks for the recommendation, will check it out. I've heard of Tailwind and I can't remember what the price tag was, but it made me raise my eyebrows a bit lol.

> I've heard of Tailwind and I can't remember what the price tag was

It was (and still) is zero. Maybe you have it mixed up with Tailwind UI? (which is a paid library of ready-made components built using TailwindCSS framework)

out of curiosity, what was the scenario?

Converting a tree-like structure into a nested form inputs. Material seems to be rather opinionated about what a "form" is, and I found it too constricting for my needs.

More specifically, the TextField component assumes an accompanying label, while none of the other form components do. It seems like a very odd choice to me, since all form elements should have a descriptive label.

What input didn't have a label? I'm using mui in a webapp and didn't find any I couldn't add a label to.

TextField is already a composition of other components.

The demo page for Checkbox (https://material-ui.com/components/checkboxes/) shows how to use them with labels, and also groups.

Agreed there should be something included for CheckboxWithLabel, but to think it's impossible and the whole thing must be thrown out is a bit much.

Eh I wasn't super descriptive in my response, but it was connected to that. It wasn't that I didn't see a solution, it was more "how much effort modifying in a solution will take vs just writing it myself". I decided the latter was more cost-effective for my particular use case.

I like them b/c my main project requires me to support IE11, which doesn't get the niceties of modern CSS. If it weren't for that, I'd avoid them.

I'm more inclined to use them these days not less. Bulma CSS framework is well structured and easily extensible. Tachyons is really good for prototyping. I am looking forward to try tailwind

Hasn't had any updates for two years and looks like it's doing something weird with the base font inclusion assuming you have "nunito" already (not a safe assumption).

Also I'd suggest to anyone to potentially avoid using CSS vars if you're looking for enterprise browser support due to old IE. Obviously make your own decisions on this one but it I think 10 starts getting really weird with them...

All-in-all for the limited benefit this micro-lib brings I'd say go to something that's popular/supported vs. a project that hasn't seen a commit in 2 years.

Water.css is a credible alternative: https://kognise.github.io/water.css/

Discussion: https://news.ycombinator.com/item?id=19593866

Interesting it errors under safari technology preview r105 when I hit switch theme button, works fine under safari though both on Mac/iOS.

Hey, developer of Water.css here - I'll take a look!

> I'd say go to something that's popular/supported vs. a project that hasn't seen a commit in 2 years.

Isn't the whole point of a micro lib that it is limited in scope, well-designed, and shouldn't need to change much? I have my own libraries that see few commits as of late but still work fine

I haven't tried this yet, but in the author's defense the repo has no issues against it, so it's not like there is tangible proof that the author is neglecting maintenance or anything. Besides, the whole thing <500 lines of CSS - if it does what you need it to why go with anything that would be more complicated and more likely to break with an upgrade?

Isn't the whole point of a micro lib that it is limited in scope, well-designed, and shouldn't need to change much?

In the case of a CSS framework specifically, browsers are a moving target and you would expect changes to either fix issues or to take advantage of new features. 2018 is more than 10 versions of Chrome old, and while it's possible that nothing in that time was worth adding to this framework it does seem unlikely. At the very least you'd expect a line in a readme to be updated to say its been tested and it works.

As long as the old thing works there is no reason to chase the new features, especially because they are by definition not available in old browsers.

Sure, which is exactly why I said I'd expect at least an occasional update to a readme to say the framework has been tested and still works.

More broadly for web dev though, the fact a feature isn't available in old browsers is a bad a reason not to use a new feature if it's useful and improves a site for the user. Obviously you shouldn't break your site in old browsers but progressively enhancing to take advantage of things is a very good thing. Browsers implemented @supports in CSS for precisely this reason.

A friend of mine made PrefaceCSS:

https://cluzier.github.io/PrefaceCSS/dist/index.html

I really like this one. It's still got a minimal old school feel but with enough style to not look... unstyled.

It doesn't use variables in the minified version where the vars are already expanded: https://raw.githubusercontent.com/ajusa/lit/master/dist/lit....

Also how much support & udpates do you want to see in a piece of CSS that's barely a dozen blocks? It's a strange comment to make.

> Also I'd suggest to anyone to potentially avoid using CSS vars if you're looking for enterprise browser support due to old IE.

You can trivially process your css files through babel + postcss to support arbitrary browser targets. In this case, postcss will inline the vars letting write modern css while shipping css that works in old browsers.

I have to admit, I found the wonky vertical alignment of the text on the buttons really off-putting (caused by Nunito).

Name will probably be confused with Google's web component frameworks Lit HTML and Lit Element.

three thing just killed it for me right away

1) the grid doesn't have gaps between columns. look at the form example, see how the two form field are right next to each other with no gap between them... that will cause a lot of headaches trying to layout even a slightly more complex form.

2) the naming of the colors in the util is inconsistent... they follow bootstrap with info, error, success, but then go with black, white, gray??? wtf is that. what about just sticking with the bootstrap naming and using dark, light, and default like they do. why switch when you already copied 80% of bootstrap's naming convention? makes no sense.

3) back to the grid. there are no viewpoint or reordering classes. do you know how much of a life saver it is to change the column order between devices with a simple order-md-2 in bootstrap. my god... if you ever had to do css trickery to move an element on mobile you see that the reordering in the grid is a god send.

https://getbootstrap.com/docs/4.0/layout/grid/#reordering

i'm sorry, but i personally see these micro frameworks as traps. bootstrap is very easy to recompile and strip out what you don't need to roll your own essentially.

I'm not sure what's going on with the form but the pure grid example itself does have margin: https://ajusa.github.io/lit/docs/lit.html#grid

well... since the project hasn't been touched in 2 years, i doubt that it will be fixed.

Picnic is another very nice and compact option:

https://picnicss.com/

I've been meaning to put picnic to use in future projects. I very much like the minimal reliance on JS and the semantic class names (nothing irks me quite like CSS concerns bleeding into the HTML).

What is the difference to Skeleton [1]?

[1] https://skeleton-framework.github.io/

I can vouch for skeleton, modified a few variables (default page max-width not fit for modern monitors) and tweaked things to my liking but hurrah - base functionality makes for super simple & nice layout and works on everything from desktop to phone. Have no regrets on fact that it hasn't been updated for 4 years at present.

> (nothing irks me quite like CSS concerns bleeding into the HTML)

Don't knock it till you try it! If you're generating HTML dynamically, define functions in code for your custom style classes which consist of a set of atomic styles provided by something like Tachyons.css. Then just call those in your template while rendering.

All the benefits of CSS variables and tooling like Sass/Less/etc. without the need for any special tooling!

Typically, by the time I'm at the point where I'm dynamically generating HTML, I'm also at the point where I've got enough tooling around it already that adding Sass/Less to the mix ain't much of a big deal.

So not only are you unnecessarily adding to your tools, but also unnecessarily adding to your build steps, which costs time every time you make any sort of visual change.

Workflow under Tachyons: change html, reload page to see change, change html, reload, change html, reload, ....

Workflow under Sass/Less/etc.: change css, build css, (maybe) change html, reload, change css, build css, (maybe) change html, reload, ...

> So not only are you unnecessarily adding to your tools, but also unnecessarily adding to your build steps, which costs time every time you make any sort of visual change.

Most frameworks nowadays ship with Sass/Less built-in, or at the very least make it trivial to bolt it on. Further, most frameworks nowadays fully support the ability to automatically rebuild stylesheets when regenerating the HTML, in which case it's quite literally: change CSS, reload, change CSS, reload, etc. The build times are negligible (especially if I'm using Erlang/Elixir or C# or something else that needs compilation on changes anyway).

Also, since I'm in the habit of keeping the HTML I write or generate concerned solely with describing the content rather than the appearance thereof, there's rarely (if ever) a separate "change HTML" step there; the HTML (or the templates to generate it) is already written alongside the content, and it's just a matter of adding enough CSS to make it look decent.

Importantly, since the HTML makes no assumptions about its appearance, it's straightforward to define different stylesheets for different contexts (whether interactive v. print, or reusing a given page on multiple sites/applications with very different styles, or what have you).

Settled with https://picturepan2.github.io/spectre/ (After having tried close to 50 frameworks)

Any view on Tailwind or Tachyon? Too big?

They are different. Spectre is more like a lighter, smaller non-JS version of Bootstrap, but both still provide recognizable "components" like navbars, form inputs, dropdowns, tabs and so on which are common to most web sites and applications. Tailwind (and maybe Tachyons, I don't know) is a utility framework, or meta-framework if you like: it provides a toolbox of lower level primitives for spacing, fonts, layouts, colors and so forth, out of which you can build your own custom components (or use a palette of existing ones, like Tailwind UI). Of course Spectre/Foundation/Bootstrap etc have these primitives too, but their base premise is that you have higher level components common to every or most sites, so there is no need to reinvent the wheel by rebuilding the nth navbar or tab menu.

YMMV, but probably if you are building, say, a standard "boring" CRUD application and you need to get it out quickly you can get a lot of mileage out of Bootstrap or similar frameworks. There is a ton of work already done for you with things like accessibility and browser compatibility, and while these kinds of sites are a bit samey, that is also a plus in that users don't face a learning curve - a menu or calendar widget will behave like every other menu or calendar widget they've seen. An off the shelf theme or some SASS variable tweaking can provide enough branding differentials.

On the other hand if you have very demanding customers/designers who require everything to be pixel perfect and "popping" then something like Tailwind that gives you more low level flexibility with some sensible defaults might be a better fit (honestly though, with these kinds of clients you're probably going to have to mess around with CSS anyway).

        .\31{width:5%}
        .\33{width:22%}
        .\34{width:30%}
        .\35{width:40%}
        .\32{width:15%}

huh? can you tell me what those \31 \33 etc. mean?

It means:

    .1{width:5%}
    .3{width:22%}
    .4{width:30%}
    .5{width:40%}
    .2{width:15%}

It's an escape sequence that lets you have non-alphabetic characters to start a CSS selector. See this for more examples:

https://stackoverflow.com/a/35122909/242404

Escapes for "1", "3", "4", "5", and "2".

Probably a workaround for a CSS grammar issue that makes ".1{…}" not parse correctly?

TIL! as with most languages, css indentifiers can't start with numbers, but you can get around that using backslash-escapes. you'd use these classes like this:

  <div class="35">

this stackoverflow answer has more info (looks like you can use any symbol you want, even spaces and [{}<>&*] !): https://stackoverflow.com/a/27882887/5534735

just realized my usage example is misleading. as sibling comments correctly explain, \35 means

  chr(0x35) == '\x35' == '5'

so the actual usage would be

  <div class="5">

I'm a bit confused - is the name of this project "lit" or "lit [U+1F525 FIRE]"? The linked page has the latter as a heading, and the more complete name would also resolve the ambiguity with existing projects that others are pointing out.

Whats the reason for using a form with a button instead of a link?

  <form action="docs/lit.html">
    <button class="mt1 btn primary white bold" type="submit">Get Started</button>
  </form>

Thanks for sharing this. 365 bytes gzipped is really amazing ! A lot of times for a simple page, just the basics like grids and all, I use custom trimmed down bootstrap. I would love to give this a try and some feedback on the experience !

Any minimal CSS for prefers-color-scheme: dark?

Only aware of https://kognise.github.io/water.css/

Because it's got a frame around it Lit's non-primary button looks like the primary button. To me.

Looks ok. But make those inputs 16px or higher so they don’t zoom screen on mobile. Select looks crunched.

Really nice. I was looking for something to use on my blog. I will try this out now.

Shameless plug : I coded a very small CSS library that will also be a good fit for a blog :D Check it out !

https://concrete.style/

Very clean. Reminds me of nutrition info labels.

Haha you're right it does have that vibe

I like the minimalism, but I wish the buttons had something on hover or on click (e.g. invert the colors). You should give user feedback that it's a clickable button and it has sent the form

That's actually a great idea, thanks :)

Reply on news.ycombinator.com