9 ms·

Lit: A ridiculously small responsive CSS framework

240 points by spking 6y ago

folkhack 6y ago
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.
- ignoramous 6y ago
  Water.css is a credible alternative: https://kognise.github.io/water.css/ https://kognise.github.io/water.css/ Discussion: https://news.ycombinator.com/item?id=19593866 https://news.ycombinator.com/item?id=19593866
  - bori5 6y ago
    Interesting it errors under safari technology preview r105 when I hit switch theme button, works fine under safari though both on Mac/iOS.
    - archmaster 6y ago
      Hey, developer of Water.css here - I'll take a look!
- jb3689 6y ago
  > 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?
  - onion2k 6y ago
    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.
    - tasogare 6y ago
      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.
      - onion2k 6y ago
        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.
- giancarlostoro 6y ago
  A friend of mine made PrefaceCSS: https://cluzier.github.io/PrefaceCSS/dist/index.html https://cluzier.github.io/PrefaceCSS/dist/index.html
  - duxup 6y ago
    I really like this one. It's still got a minimal old school feel but with enough style to not look... unstyled.
- mrb 6y ago
  It doesn't use variables in the minified version where the vars are already expanded: https://raw.githubusercontent.com/ajusa/lit/master/dist/lit.css 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.
- hombre_fatal 6y ago
  > 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.
- bshimmin 6y ago
  I have to admit, I found the wonky vertical alignment of the text on the buttons really off-putting (caused by Nunito).
colordrops 6y ago
Name will probably be confused with Google's web component frameworks Lit HTML and Lit Element.
zozbot234 6y ago
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.
avallark 6y ago
Really nice. I was looking for something to use on my blog. I will try this out now.
- louismerlin 6y ago
  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/ https://concrete.style/
  - truthwhisperer 6y ago
    #noonecares 1000 and 1 solutions available waste of time and effort
  - andai 6y ago
    Very clean. Reminds me of nutrition info labels.
    - louismerlin 6y ago
      Haha you're right it does have that vibe
  - laurentdc 6y ago
    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
    - louismerlin 6y ago
      That's actually a great idea, thanks :)
spking 6y ago
Picnic is another very nice and compact option: https://picnicss.com/ https://picnicss.com/
- yellowapple 6y ago
  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).
  - wuschel 6y ago
    What is the difference to Skeleton [1]? [1] https://skeleton-framework.github.io/ https://skeleton-framework.github.io/
    - dingdingdang 6y ago
      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.
  - naasking 6y ago
    > (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!
    - yellowapple 6y ago
      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.
smlckz 6y ago
.\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?
- juliend2 6y ago
  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 https://stackoverflow.com/a/35122909/242404
- duskwuff 6y ago
  Escapes for "1", "3", "4", "5", and "2". Probably a workaround for a CSS grammar issue that makes ".1{…}" not parse correctly?
- uryga 6y ago
  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 https://stackoverflow.com/a/27882887/5534735
  - uryga 6y ago
    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">
deleted 6y ago
[deleted]
marban 6y ago
Settled with https://picturepan2.github.io/spectre/ https://picturepan2.github.io/spectre/ (After having tried close to 50 frameworks)
- uxcolumbo 6y ago
  Any view on Tailwind or Tachyon? Too big?
  - danjac 6y ago
    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).
thrownaway954 6y ago
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 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.
- hu3 6y ago
  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 https://ajusa.github.io/lit/docs/lit.html#grid
  - thrownaway954 6y ago
    well... since the project hasn't been touched in 2 years, i doubt that it will be fixed.
ateevchopra 6y ago
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 !
fimdomeio 6y ago
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.
- mtrower 6y ago
  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.
- wmeredith 6y ago
  Love the big ones (Bootstrap) for rapid prototyping. I have less and less use for them otherwise.
- tenaciousDaniel 6y ago
  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.
  - morgancmartin 6y ago
    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.
    - tenaciousDaniel 6y ago
antidaily 6y ago
Looks ok. But make those inputs 16px or higher so they don’t zoom screen on mobile. Select looks crunched.
zeusly 6y ago
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>
SeanLuke 6y ago
Because it's got a frame around it Lit's non-primary button looks like the primary button. To me.
hendry 6y ago
Any minimal CSS for prefers-color-scheme: dark? Only aware of https://kognise.github.io/water.css/ https://kognise.github.io/water.css/

240 points by spking 6y ago

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.

ignoramous 6y ago
Water.css is a credible alternative: https://kognise.github.io/water.css/ https://kognise.github.io/water.css/ Discussion: https://news.ycombinator.com/item?id=19593866 https://news.ycombinator.com/item?id=19593866
- bori5 6y ago
  Interesting it errors under safari technology preview r105 when I hit switch theme button, works fine under safari though both on Mac/iOS.
  - archmaster 6y ago
    Hey, developer of Water.css here - I'll take a look!
jb3689 6y ago
> 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?
- onion2k 6y ago
  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.
  - tasogare 6y ago
    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.
    - onion2k 6y ago
      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.
giancarlostoro 6y ago
A friend of mine made PrefaceCSS: https://cluzier.github.io/PrefaceCSS/dist/index.html https://cluzier.github.io/PrefaceCSS/dist/index.html
- duxup 6y ago
  I really like this one. It's still got a minimal old school feel but with enough style to not look... unstyled.
mrb 6y ago
It doesn't use variables in the minified version where the vars are already expanded: https://raw.githubusercontent.com/ajusa/lit/master/dist/lit.css 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.
hombre_fatal 6y ago
> 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.
bshimmin 6y ago
I have to admit, I found the wonky vertical alignment of the text on the buttons really off-putting (caused by Nunito).

colordrops 6y ago

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

zozbot234 6y ago

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.

avallark 6y ago

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

louismerlin 6y ago
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/ https://concrete.style/
- truthwhisperer 6y ago
  #noonecares 1000 and 1 solutions available waste of time and effort
- andai 6y ago
  Very clean. Reminds me of nutrition info labels.
  - louismerlin 6y ago
    Haha you're right it does have that vibe
- laurentdc 6y ago
  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
  - louismerlin 6y ago
    That's actually a great idea, thanks :)

spking 6y ago

Picnic is another very nice and compact option: https://picnicss.com/ https://picnicss.com/

yellowapple 6y ago
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).
- wuschel 6y ago
  What is the difference to Skeleton [1]? [1] https://skeleton-framework.github.io/ https://skeleton-framework.github.io/
  - dingdingdang 6y ago
    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.
- naasking 6y ago
  > (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!
  - yellowapple 6y ago
    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.

smlckz 6y ago

.\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?

juliend2 6y ago
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 https://stackoverflow.com/a/35122909/242404
duskwuff 6y ago
Escapes for "1", "3", "4", "5", and "2". Probably a workaround for a CSS grammar issue that makes ".1{…}" not parse correctly?
uryga 6y ago
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 https://stackoverflow.com/a/27882887/5534735
- uryga 6y ago
  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">

deleted 6y ago

[deleted]

marban 6y ago

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

uxcolumbo 6y ago
Any view on Tailwind or Tachyon? Too big?
- danjac 6y ago
  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).

thrownaway954 6y ago

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 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.

hu3 6y ago
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 https://ajusa.github.io/lit/docs/lit.html#grid
- thrownaway954 6y ago
  well... since the project hasn't been touched in 2 years, i doubt that it will be fixed.

ateevchopra 6y ago

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 !

fimdomeio 6y ago

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.

mtrower 6y ago
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.
wmeredith 6y ago
Love the big ones (Bootstrap) for rapid prototyping. I have less and less use for them otherwise.
tenaciousDaniel 6y ago
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.
- morgancmartin 6y ago
  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.
  - tenaciousDaniel 6y ago

antidaily 6y ago

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

zeusly 6y ago

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>

SeanLuke 6y ago

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

hendry 6y ago

Any minimal CSS for prefers-color-scheme: dark? Only aware of https://kognise.github.io/water.css/ https://kognise.github.io/water.css/