Hacker News new | past | comments | ask | show | jobs | submit login
New.css – A classless CSS framework to write modern websites using only HTML (newcss.net)
925 points by sdan 14 days ago | hide | past | web | favorite | 182 comments



This Github repository tracks a whole bunch of these drop-in CSS files: https://github.com/dohliam/dropin-minimal-css

And you can use this demo site to switch between them all on the fly: https://dohliam.github.io/dropin-minimal-css/


This is really useful! Thanks for linking to it.

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.



It's a shame how few of these prevent horizontal scroll on mobile. Usually the table and/or video are not probably handled. My take away from this: Simple does not mean easy; check edge cases.


As suggested by a sibling comment the key isn't to prevent horizontal scrolling, but to prevent content from overflowing a single screen width. Which isn't hard per se but doesn't have a one-size-fits-all solution.


So many websites overflow a single screen width by a trivial amount. This is just enough to cause accidental horizontal scrolling which disrupts the flow of scrolling the page. Very frustrating!


Yep. The offenders are usually really long un-line-breakable words, images, or videos. In this case we have:

  href="https://newcss.net/theme/terminal.css">
Which is not being allowed to break to a new line because it doesn't contain whitespace. A CSS rule can be used to allow it to break, though that can also have other, unwanted ramifications.


It's not super easy either. I ran into this also (https://doc.sscaffold-css.com/ysk/tables/) and the root cause is that the <table> element is not considered to be either a block-level or an inline element. It's special, and because it's special, some browsers support setting max-width on it and some don't. So tables need a container element or some other kind of special handling. It's an easy bug to overlook because the cause is so unexpected.


It's a tricky problem. I've been battling with it on MVP.css (https://andybrewer.github.io/mvp/) but I think I found a good solution for responsive tables with some help from the community.


I'm also interested in your tables solution. Also, is there an organized MVP.css community somewhere?


Feel free to ask questions or contribute on GitHub: https://github.com/andybrewer/mvp


I'm probably gonna use your solution. Thanks.


As someone who constantly runs into mobile pages with poorly fitting content yet are still scroll-limited, I see this as a welcome feature.

Most mobile browsers seem to lock the scroll direction while moving anyway, so atleast it isn't sloppy in practice, imho


I use a browser that locks the scroll direction and pages which overflow horizontally drive me mad. If your website does that, I will search for the reading mode button immediately because I cannot really work with handling scrolling in two directions.


That's excellent. It would be funny if that 'LaTeX CSS' moved all images to the end of the web page..


With references, of course. ;-)


Of course :-)


It's a shame that none of these (as far as I can tell with the 60% I clicked though) restrict the page width to 100% to prevent horizontal scrolling on mobile. Simple enough to add yourself, but still.


Pity I cannot just receive vanilla mark up and pick a client side theme.


I'm pretty sure firefox has this feature.

the problem is no website offer custom css.

for an example: https://stackoverflow.com/questions/48227413/what-is-the-pur...


Seems Firefox doesn't remember the CSS you have selected (i.e. per page? per domain?)

I can think of some uses for this if it were sticky - high contrast and dark mode versions for websites


You can detect css changes and remember/enforce it yourself but yeah, it does remember permission per page so adding this should have been/be easy.

Oh wow. Does this only work on FF?


I doubt it would work well but you could put a theme in user.css (on Firefox) and block all .css files (with uBlock, say). Not sure if uBlock will block <style> tags, but I think it can.


I think user.css automatically overrides any remote CSS, doesn't it?—so no need for blocking.


Yes, I suppose if you use a css reset then you wouldn't need to block .css files; but you could save a little bandwidth if you did.

Yeah, that is how it should have worked.

HN is pretty vanilla. I use it with https://userstyles.org/styles/92693/dark-hacker-news-solariz...

Not the standardized approach that we should have had long ago but better than nothing.


Seeing all these styles, I can't help but get the feeling that we're heading towards the aesthetic minimalist ideal of mixed text media.


It's modern MSWord templates.


shh


hah, reminds me of http://www.csszengarden.com but simpler.


I would like these themes to go beyond a simple article view. We have tags like <header>, <nav>, <main>, <aside>, <section> and <footer> now. Should be possible to build a complete app-shell with classless CSS.


This is what I expected too. This one has nav, aside : http://classless.de/#extra

Plus a couple bootstrap classes where HTML5 has no elements : grid and card.


As an exercice, I’m building my neighborhood newspaper website without any classes. It is surprisingly easy. With Grid and min(), I don’t even need media queries. CSS and HTML in 2020 is great, if you take the time to choose only the latest solutions.


Have a link to it?


I style those elements in MVP.css (https://github.com/andybrewer/mvp/)


Thanks! Does anyone know how these stylesheets interact with other frameworks like bootstrap? If I want to use bootstrap in a website, can I still start with one of the above as the base style?


It might be an interesting question to ask why bootstrap couldn’t be mostly classless. I remember learning Bootstrap and thinking it was silly I had to add class=table to a table.


That's very cool ! My microframework is on there and I wasn't even aware.


Do any of them support Dark/Light?

Author of Sakura.css [0] here linked in the article. Thanks for the link ^_^, new.css looks super great!

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.

[0]: https://github.com/oxalorg/sakura


Never in a thousand years would I even consider being on the same level as oxal's project. It's an absolute honor! Thanks so much for your support.


Haha thanks, you're being too humble ^_^

BTW loving the xz logo and the website. Overall super cool!


For some reason the footnote link on sakura did not make my view jump to the note (neither Firefox 76.0.1, nor Chromium 81.0.4044.138 / Linux Ubuntu) although it works in Wikipedia.


Hey are you talking about the footnote link [0] on the demo page?

If so thanks for pointing it out, looks like I forgot to add the `fn1` footnote id on the element. Fixed it.

[0]: https://oxal.org/projects/sakura/demo/#fn1


I don't understand the claims re: font loading.

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


You can always set a referrer-policy HTTP header on the origin site to prevent the CDN from getting the path (or even the domain) of the web page. They’d still see user IP address but on its own that’s not very useful.


It's the `Origin` header that's the issue, not `Refer(r)er`.

Slightly off-topic but this made me wonder: is it possible to store the 1000 most used web fonts locally and tell your browser to use the local version instead of the Google version?


Decentraleyes[0] does this for JavaScript files. There was a request to add fonts[1], but it hasn't been implemented.

[0]: https://decentraleyes.org/ [1]: https://github.com/Synzvato/decentraleyes/issues/34


Cool, thanks! Definitely going to install that extension. It seems they moved to Gitlab, I subscribed to the new issue[0].

[0]: https://git.synz.io/Synzvato/decentraleyes/-/issues/34


I guess the key word is “unethical”.


Hey, developer of both here. It's certainly not a light download, I understand. It's more of an effort to pull CDN requests to known unethical networks, namely Google Fonts, which are known to be used to track users between websites.

I'll be more clear about this in the future, thanks for your opinions!


Any source about the unethical bit? Their privacy section looks good

https://developers.google.com/fonts/faq#what_does_using_the_...


I still don't see how switching from Google to a VC-backed CDN startup is better for ethical purposes.


It's better, but it's still not as good as just using the browser default font.


Or just serve them yourself.


They also have a lite version that uses system fonts, for whatever it is worth.


While I do like the style sheet that was created, the marketing spin on this page was off-putting to me as well.


Crazy. This isn't a "framework". It's a stylesheet.


"Classless" also made my brow furrow when I realized they didn't mean, say, CSS components styled without a bunch of classes (a la Twitter Bootstrap) but rather, it just has no components. It's classless because it only styles some basic html elements.


That's exactly how I understood it and it sounds useful to me. No need to look up what styles do what, you can just use the standard elements and expect them to look coherent and as expected. E.g. "<header>" is descriptive enough since HTML5 introduced it.


It didn't mean that for me because we've been sharing minimal css files for decades without without calling them frameworks or "classless". Usually when you see a new term, it describes a spin on the old act. If they had also called it a "serverless" CSS framework, I wouldn't have guessed they meant that the CSS file just doesn't make any HTTP requests.


It seems like it styles more than just the basics, as it gets details, kbd, and a few others that I don’t see around as much.

Besides this isn’t meant to supplant Bootstrap. It evens says so on the site.


That's my reaction as well... What am I missing? People really forgot that you can write a "reactive" website in pure HTML and that's what it was actually designed for?


This is... not remotely what people mean when they say "reactive". And nobody thinks JS is necessary to get a visual theme that looks nice. CSS and JS frameworks serve radically different purposes.


Or did you mean "responsive" ?


Yes, responsive, sorry.


Yeah, I think "blog theme" is probably the best it can be described.


Also my reaction. If anything the response to this shows developers' adverse reaction (or stylistic deference) to CSS in general. IMO CSS is not that hard to grasp, although my bias/expertise might be getting in the way. There are plenty of CS concepts that are much more complex than understanding selector specificity.


It's like normalize.css[1], unify elements across browsers.

[1]: https://necolas.github.io/normalize.css/


hence the bubble.


This reminds me of W3C Core Styles[1]. I remember using those in many quick pages to make them look somewhat presentable without spending any effort myself, when perfect styling just wasn't important. I wonder how many sites nowadays use their styles directly from their URLs.

[1] https://www.w3.org/StyleSheets/Core/


It might be just me but I can't look at websites with black backgrounds and white or yellow letters. My eyes hurt and when I turn my head elsewhere I can see shadows of the website for a bit. I use dark(ish) themes everywhere but such high contrast somehow is too much.


i have exactly the same issue. so many websites nowadays choose to have dark themes which are essentially black backgrounds with white text and it is physically painful to read. if i'm invested enough in the article, i always try to change the user styles a bit to make it more bearable.


Yep, exactly. Last ditch resort is to modify the values via devtools myself but usually I just skip that site.


OTOH, deep-black backgrounds and green letters (with red/yellow/white highlights) is perfect if you're using an OLED screen. Maybe browsers need adjustable (and site-specific) brightness and contrast knobs, like monitors and TV's.


Love dark blacks on OLED.

However sometimes a dark navy blue would be better.


The problem is using `white` on black instead of `gray` on black. The latter provides plenty of contrast while still being easy to read.


I think new.css is themable.


This recent vibe of minimal CSS files for plain HTML tags feels the same as the CSS Zen Garden from years ago.

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 was just thinking the same thing!

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


Ah memories. I used to reference the CSS Zen Garden when convincing my clients about our new approach to web building (CSS is awesome!). Never once achieved it (complete separation of content from style) in practice.


I wrote a bit about this about a year ago: https://blog.usejournal.com/the-next-css-frontier-classless-...

Definitely got me Zen Garden vibes.


Stylesheets have absolutely nothing to say about JS framework usage and vice-versa.


In theory yes, but React and similar JS frameworks have been chomping away at the “cascading” of CSS for a while, in favor of embedding styles inside each JS component. They have become very much intertwined.


It doesn't work properly. The body has a max-width of 750px, and the header uses a padding hack of 'calc(50vw - 50%)'. That 50% means '50% of the containing element', so if 50vw is more than 750px (eg your viewport is more than 1500px wide) the header element stops being centred and starts spilling over on the right hand side.


Seems to work properly in Firefox (https://i.imgur.com/AQ2M1G3.png) but breaks in Chrome (https://i.imgur.com/U2tVg2k.png); Chrome doesn't accept the margin value (https://i.imgur.com/pH7X0ZO.png).

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.


There's already a PR to fix this, looks like there's a missing space after one of the minus signs.


A good place for the under-appreciated CSS ‘clamp’ function!


... that doesn't work in Safari or iOS, or non-Chrome Android browsers yet.


Yeah... Looks terrible for me.


Checkout https://github.com/kognise/water.css

I find water.css to be the prettiest of the classless bunch.


I recently started a project using Skeleton CSS (http://getskeleton.com/) which is similar. It only uses classes to deal with the grid (which it looks like neither water.css nor new.css handle).


This has long been abandoned, hasn't it? (just checked, last updated in 2014)

This looks great, thanks for the link!



Milligram is not class-less, it's more like a light Bootstrap.


Hey everyone, developer of new.css here. I've gotten a lot of valuable feedback from everyone today! But I get it, new.css is very basic, and it's not the traditional definition of a framework.

Please keep leaving your constructive feedback. I'm excited to keep making new.css something for everyone to enjoy.


I'm not entirely sure this can be called a framework. If there was a Bootstrap v0.1 it would be this, before it decided to do a whole bunch of extra things to become a framework.

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.


> It feels like I would spend more time undoing what it does than would be saved by using 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.


But then, why not have this be defined by the client?

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?


>But then, why not have this be defined by the client?

Because client defaults usually suck.


Reading mode does that, and you can have it auto-enable in Safari if you want.


These types of stylesheets are sometimes referred to as Base Stylesheets.

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.


5 comments with 5 alternatives so far. Oh the irony.


This is the reason I actually "favourite" threads such as this one. The comments help me find alternatives to try out. There was an Ask HN, "Ask HN: Is there a search engine which excludes the world's biggest websites?'[0]. I commented that I search HN for different subjects and read through the comments. This is probably better than searching Google for minimal CSS.

[0]https://news.ycombinator.com/item?id=23202850


Nice huh, it shows that ecosystem is really strong?


A variation on Cunningham's Law?


Without classes, CSS is a race to the bottom.


I disagree. For many simple things you can get a long way without or with minimal amount of classes. Coincidentially I am working on implementing some changes to a really bad case of the vile disease classinitis. With names such as: xyz_product__form and g-region--desktop-one-half. Lest not forget about their actual use in the markup: `class="form-field__input form-field__input--button button button--cta button--large button-mobile-full u-flex-1"`

Ah how could I even live without getting hired for this job and all of its lustful classes?!


I prefer MVP.css (https://andybrewer.github.io/mvp/) tbh


This seems like a decent boilerplate+extras but line 1 is importing a custom font. Why?

Unnecessarily opinionated and against the "lightweight" aims of this library (not knocking Inter btw - it's awesome).


Use the code <link rel="stylesheet" href="https://newcss.net/lite.css"> for the lite version, which uses the system font stack rather than importing one.


There is a lite version (which I think does not import the font)


Seems one of these things hits the front page every month or so. My question is, why don't the browser makers adopt something like this as the default stylesheet? Are they constrained by the spec here or is it just a matter of inertia?


The defaults inherit, so changes to the default made by a browser (or indeed a browser user) can cascade through to other sites.

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.


Browsers do, it's the reading mode feature. However of course it's not a default stylesheet.


I think it's a backwards-compatibility thing. Browsers take BC extremely seriously, even when it comes to UX. Changing the unstyled look of different elements could break a legacy site that didn't give those its own styles.


> Seems one of these things hits the front page every month or so.

Yep! MVP.css was featured in March: https://news.ycombinator.com/item?id=22681270


To continue the chain, we had 98.css last month, although a little more niche: https://news.ycombinator.com/item?id=22940564


This is kind of funny to me because I wish more frameworks went this route then I can just override as necessary with my own classes and ids instead we end up with people creating new classes when they shouldnt need to or hacking together different classes and writing scope creep type of CSS.

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.


Hey sorry I’m not in the know, but what’s wrong with classes and styling?


Nothing, but a lot of the web dev community feels like we've gone overboard in terms of bloated CSS frameworks and this is what I perceive to be a reversion back to the basic ability to style a document without much need for writing and learning CSS or the frameworks themselves.


As a full-stack dev who has started/but not finished tons of side projects because I hate the design part (okay, I'm more backend than frontend, I like vue/js but css/scss isn't my favorite part of the stack though I can do it in bulma, material-ui, vuetify/etc....)

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.


Nothing's wrong, the supposed advantage of this is that it's less complex and the only thing you need to learn is html.


Which most people that would use this already know and so really you can just skip the learning and go straight to using it.


Reminded me of the "CSS Zen Garden" thread just had back in March - https://news.ycombinator.com/item?id=22627018

Are people reminiscing the simplicity of just HTML & CSS again?


It may be not a good idea to use a grey input background for generic cases as it may confuse as disabled.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_in...



This looks to be using the new css variables (well, new to me - I was checking on the state of the art in css just recently). I was looking into how you can do components now and this stuff looks pretty interesting, though styling of nested components using these techniques looked a little...hairy. Has anyone used these in anger?

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...


I used CSS custom properties (AKA variables) when rewriting my blog's frontend just recently. A few issues come to mind even when using the latest CSS features:

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 [1].

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.

[1] https://gitlab.com/Nicd/mebe-2/-/blob/f0f988e3d120c4cff54277...


I love the terminal theme. I've been trying to do something that looks like an older terminal for a configuration page, and this version almost does it.

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.


Thanks for the feedback gwbas1c. How would you recommend improving form support? I'd be more than happy to merge any improvements.


Just try new.css on a page with a very wide table. You'll see the problem right away.

I personally didn't dig into your css. If you can bring back the horizontal scrollbar at least it's a workaround.


pair this up with the successor to intercoolerjs,

https://htmx.org/

and you can keep even more of your work directly in html.


Bring back fond memories of http://www.csszengarden.com/

Just plain HTML + CSS


There are reasonable arguments that CSS is best done with no classes, only semantic elements. There are reasonable arguments that CSS is best done with classes only, independent of element name. And there are valid arguments for various incompatible ways of naming and namespacing CSS class names. We are a long way from one "right" way of doing CSS.


We changed the URL from https://github.com/xz/new.css, which points to this. Both are great, but when a project has its own site it seems best to link to that one, as long as it links to the Github or equivalent page when there is one.


I am confused, why is it called a framework? From what I read it's just a default theme for HTML. Did I miss anything?


Because it is about frontend development.


Any frontend dev out there would like to compare this with MVP and Tachyons? I am a bit lost when to pick over another.


Tachyons, which I like a lot, is Atomic CSS, which means essentially things do what they say, like .red makes things red, or .ma0 sets a margin of 0. With Tachyons, you can define any look you want by adding these atomic styles to HTML elements. While that might be a lot of work if you style HTML by hand, it is not much of a chore if you are writing JavaScript code which defines widgets which you use by calling a function (like using Mithril, a favorite vdom UI building library). Occasionally you may use inline styles, or add some new atomic styles, or change existing Tachyons styles (like set a different shade of .red) to get a precise look -- but for the most part, Tachyons styles cover most common cases.

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.

I like the Atomic CSS approach because, for what I do (mainly single-page apps) I just write JavaScript which generates HTML which is almost-entirely styled using existing Tachyons classes (which never collide). By contrast, most other CSS libraries (such as apparently new.css) expect you to write new CSS styles for HTML elements and also semantic CSS classes (e.g. .main-content) if you need something other than exactly what they provided, and so you have to be managing multiple stylesheets and their collisions.

See also: https://css-tricks.com/lets-define-exactly-atomic-css/


Thanks a million! Now I understand much better. We are using Tachyons and going to keep using it.

I don't know why but white on black premade theme given here is just horrible for my eyes. The text burns into my eyes and then anywhere I look I can see the blurry text lines.

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.


Cool. Looks nice!

Wanted: class-based CSS that only deals with layout and positioning, not component-styles.


Could you elaborate?


I threw together a similar concept here: https://elementcss.neocities.org

I might just "deprecate" it and point to this one if I like it more.

edit: hmm, no grids?


There is some very odd marketing speak here. "Vercel's impossibly fast cdn", taking about how hosting on Google is somehow unethical? This whole thing is weird for some basic default CSS.


It sounds weird because it seems a clone of Native Elements published 3 years ago.

https://github.com/n-elements/core


It sounds weird, because it looks as a clone of Native Elements built 3 years ago.

https://github.com/n-elements/core


i personally like https://igoradamenko.github.io/awsm.css/ which has a similar approach.


Tangentially related: I've been on the hunt for a CSS framework/drop-in that approximates the style of the Dracula theme – Dark background with bright, happy, bold, cotton-candy colors.

Any suggestions?


1) I went searching for you and was quite impressed with how many apps and such that Dracula supports: https://github.com/dracula .. wow

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?


That actually was super helpful! I went to the GH-Pages preview [0] and pulled the compiled CSS file out. I hope the license permits reuse in this way. Thank you!

[0]: https://dracula.github.io/gh-pages/


This CSS drop-in is themable, so you could pick colors you like and emulate it easily.


When I open https://newcss.net/ the header is already broken using Chrome... That's kinda sad


Just to point out there are also: https://native-elements.stackblitz.io/


For a static text page why did I have to wait two seconds for a loading spinner?


Looks nice. I checked the network tab to see how light the page newcss.net really is. ~600kb looks good but interestingly enough, the favicon is the biggest asset.


I'd love to see a list of CSS files that are actually usable out of the box i.e. have a reasonable column width for body text on both desktop and mobile.


Really nice work. One thing you might consider is making sure that tabs and modals work well/there is a model for them. Picnic.css does this well.


Is this just a reset css with default styles?


Yes


when i got this site

https://dohliam.github.io/dropin-minimal-css/

I see "unformatted" left aligned site for 1/2 a sec before it centers and get formatted.


Despite being classless, I still got a Flash of Unstyled Content FOUC) when I load one of the themed pages on Firefox for Android (technically Fennec F-Droid).

So classless does not mean lightweight, perhaps?


I assume that the author must be in their teens/20s to call a stylesheet that is literally the most basic, primitive form of CSS possible "modern" :-D


We need more of these and less js livbraries


The thing about "classless" CSS or auto-generated class names is that it becomes much harder to customize a website via user scripts. Its not a good trend.


Good idea that leads to cleaner code


Using it now on my blog: https://natalian.org/

Nice!


Cool!


So basically a stripped down version of Tailwind?


I would say the opposite of tailwind.


Name and lede wise I prefer https://mblode.github.io/marx/


A css framework for communists?


This looks more like an attempt at criticizing the bloat people add to their websites basically just to change the font from Times New Roman. I can't really see this competing with bootstrap, since it lacks all the custom components.


I don't think so. This is criticizing no one. Right tool for the right job.

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.


It's obviously not meant to compete with Bootstrap.


Styling semantic tags in a library is a really bad idea, it assumes your css is going to be the only css used in an app. It's good manners to style class names instead.


You should use thing for what they're made for. Even using classes you can't solve the problem you're describing.


"You should use thing for what they're made for."

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




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: