And you can use this demo site to switch between them all on the fly: https://dohliam.github.io/dropin-minimal-css/
I also have a related repository. It is a gallery of screenshots of classless CSS themes: https://github.com/dbohdan/classless-css. I've just added a link to the drop-in CSS switcher there.
Most mobile browsers seem to lock the scroll direction while moving anyway, so atleast it isn't sloppy in practice, imho
the problem is no website offer custom css.
for an example: https://stackoverflow.com/questions/48227413/what-is-the-pur...
I can think of some uses for this if it were sticky - high contrast and dark mode versions for websites
HN is pretty vanilla. I use it with
Not the standardized approach that we should have had long ago but better than nothing.
Plus a couple bootstrap classes where HTML5 has no elements : grid and card.
A bit more on "WHY" you'd want to use a classless theme:
* Quick prototyping, especially when working on backend sites and can't yet be bothered to fidget with css/html.
* Building a quick (but pretty) site/blog for your best friend or aunt!
* Works amazingly with markdown generated HTML content. So it's a perfect match when rendering markdown but don't want to customise the rendering process to include specific classes.
* Using it as a placeholder: I almost always start a project with sakura.css, just drop the link tag and you’re done. Start working on features instantly.Once I’ve built the flows/components a bit I replace it with something like tailwind! There is no friction to this workflow as sakura and sisters are all classless anyways, so you can replace it easily.
BTW loving the xz logo and the website. Overall super cool!
If so thanks for pointing it out, looks like I forgot to add the `fn1` footnote id on the element. Fixed it.
> Vercel's impossibly fast CDN delivers new.css and the font Inter using xz/fonts, so there's virtually no bloat added to your pages.
It's 300kb of font downloads, hardly light. And the xz/fonts page says:
>Break your users from unethical tracking networks
I'm still making a request to a 3rd party CDN with an origin header that says what page I'm looking at, so I'm not sure what privacy I'm gaining here.
I'll be more clear about this in the future, thanks for your opinions!
Besides this isn’t meant to supplant Bootstrap. It evens says so on the site.
However sometimes a dark navy blue would be better.
Which is very good and quite welcome in the current state of overbloated JS frameworks that do everything.
I wonder if this will also drive further the adoption of standard web components https://open-wc.org/guide/
I started typing a reply out to someone's criticism of this, and it had me think of it this way.
I have my own personal stylesheet that I use as a plugin for overriding blog styles (just because I like to read text formatted in a specific way, a lot of blogs aren't very readable IMO). This style of library kinda extends that where the end user can "customize" or make the site look how they want it to (not that it's something people should be considering when building their blogs, but I think its fairly normal for people to have opinions on these things).
I especially like it for quickly prototyping internal tools/sites at work. A lot of times I want something to look clean but don't have the bandwidth to really customize a lot of stuff. This allows you to write CSS for what you need, but have the overall page styled for you with minimal effort. (Also building your own css templates like this helps teach generic css. I think it's a good skill if anyone is within proximity of the web).
Definitely got me Zen Garden vibes.
When the margin works, the logic makes sense. 50vw sets the padding of the side in question (e.g. left) to the middle of the screen, 50% subtracts half of the containing element's width (<body>) from it. Doing this for both left and right and then negating it with equal negative margins results in the content area in the header being centered and having the same width as body, but the padding stretching out to the edges of the window.
I find water.css to be the prettiest of the classless bunch.
Please keep leaving your constructive feedback. I'm excited to keep making new.css something for everyone to enjoy.
A few years ago you might have simply named it "reset.css", but it's too opinionated to really have that name.
It feels like I would spend more time undoing what it does than would be saved by using it.
I don't hate it... but I don't entirely see the point of it.
They list use-cases:
> A dead-simple blog
> Collecting your most used links
> Making a simple "about me" site
> Rendering markdown-generated HTML
It’s when you have some basic HTML and just want it to look good.
Agreed that framework is a very unfitting descriptor for it though.
I think I would like to see more websites entirely devoid of css, together with an evolving ecosystem of browser-side theme-like css rulesets to style and layout sites based on the page's semantics and everyone's unique preferences, like we style our desktops and terminals.
But that's just my cloud cuckoo land, right?
Because client defaults usually suck.
In practice, I've found its good to roll your own at some point, so you don't have to spend time undoing someone elses.
Ah how could I even live without getting hired for this job and all of its lustful classes?!
Unnecessarily opinionated and against the "lightweight" aims of this library (not knocking Inter btw - it's awesome).
Probably part of this CSS is something like reboot or reset which will try to paper over the remaining differences between different browsers, I think the browsers probably are converging in that regard but IE11 and backwards compatibility still make them necessary.
Yep! MVP.css was featured in March:
I have often thought about a CSS "framework" that did this but never bothered to look it up never thought of the name classless since it seems most popular frameworks use classes and other things.
I think this sort of thing looks cool, though picnic.css (https://picnicss.com/tests) -- from another comment seems more my flavor.
Might be a good way to focus on the functionality, maybe use it w/ tailwinds for extra styles where needed, and launch faster make some $$ hire a person to do the design stuff I hate to do in an actual framework or something and launch a prettier v2.
Are people reminiscing the simplicity of just HTML & CSS again?
1. Nesting can still be an issue if you have complicated layouts. You can mostly get around this with good use of classes/IDs.
2. Custom properties cannot be used in media queries. This was my biggest problem, because you now have to repeat your breakpoint sizes in every place you want to use media queries (which is many places if you split your code into many files), or you can have one file with the breakpoints set a bunch of custom properties that are used then throughout the styling. But the latter method falls down if you need to use e.g. `display: grid` for one size and `display: block` for another -- you end up with tons of properties. An example of that in my blog's code .
3. I really missed the lighten/darken helpers from SCSS. Those would have been useful with all the colors, because now I'd have to calculate all of them again if I wanted to change the color scheme.
Why almost? The theme totally screws up wide tables. They bleed off the edge of the page, and there's no vertical scrollbar. Furthermore, widening the page just moves everything, including the table, to the right. The only way to see a wide table is to have a giant window with a big empty space on the left.
I personally didn't dig into your css. If you can bring back the horizontal scrollbar at least it's a workaround.
and you can keep even more of your work directly in html.
Just plain HTML + CSS
By contrast (and not having used it) new.css seems to provide some basic styling to give some elements like input or summary a certain look which you may or may not like. New.css seems like a very lightweight (CSS-only) Bootstrap framework. If you don't like the specific look (including colors and margins) the designer chose for you, there is apparently no easy way to change it or go beyond it -- other than by the usual mechanisms of writing more CSS.
See also: https://css-tricks.com/lets-define-exactly-atomic-css/
I code using a black on white editor but could I guess handle non-white on black themes if the non-white color wasn't as bright.
Wanted: class-based CSS that only deals with layout and positioning, not component-styles.
I might just "deprecate" it and point to this one if I like it more.
edit: hmm, no grids?
2) I hope one of those helps you. I didn't see one specific to being classless or a framework for a website. But I did see a github-pages one that might be the closest?
I see "unformatted" left aligned site for 1/2 a sec before it centers and get formatted.
So classless does not mean lightweight, perhaps?
I write web apps which need real frameworks.
I also write basic text pages, and something like this is very nice. It's a dying art (university professors seem like the last hold-outs), but it's often handy.
The top comment gives a list of such frameworks, though, many of which look nicer than this one.
You ever worked on a project where a non-technical PM got to pick technologies? I guarantee you someone is going to choose this CSS library in the future because they think it looks nice, then be confused or frustrated when it stomps over some other styling they want to use because it directly styles tag names