Ask HN: Where are the Beautiful clean HTML/CSS templates?
Everytime I start a new project (i.e. weekly) I go looking for a clean and beautiful html template. It's always sooo hard to find some. What's your go-to for clean html template?
Yep, agree. Starting with Bootstrap is fairly frictionless, it has good library support, and there are heaps of documentations/examples/tutorials easily available. And if you need to change the look and feel, you can swap out the bootstrap.css file with one of the examples from Bootswatch - https://bootswatch.com/
Bootswatch is awesome! Recently I’ve just been getting the original Sass files and customizing there, and setting up a gulp pipeline to build my modified bootstrap CSS file. Works great for most things.
Bulma's what I used for a recent project of mine¹, and while it did take some tinkering² to get it looking decent with minimal HTML pollution, I've been happy enough with it that I'll probably keep using it for new projects (and possibly redo some existing websites with it).
I recently did an extensive test of many, many HTML templates.
The key thing I looked for was when the templates had been created and how often/how recently it had been updated - sites like Envato are loaded to the brim with old no-longer-updated templates.
I tested by loading them on the iPhone 6.
In almost every single case, the layout instantly broke, OR the side menu didn't work, OR the side menu felt "sticky" and would not smooth scroll, OR sliding the side menu scrolled the underlying page as well.
That was 90% of the templates or more - the quality level in general is terrible.
I'm still in the same boat as well to be honest, but I recently came across https://refactoringui.com/ on HN, which looks like it could be a really helpful resource for people like us. Still trying to get it expensed on my employer's learning budget, so haven't read the whole thing, but the excerpts I've seen so far have me looking forward to it.
I love Skeleton, used if for a long time. It still has a certain “X-factor” which makes it perfect with the right content and message.
Some time ago I started looking for a new framework, more up to date, at least. The website and GitHub repo for Skeleton hasn't been updated since 2014, so maybe I was missing out on the latest fashions? Doing more ambitious/insane web projects than happened earlier when less experienced, a bigger toolbox was needed. Of course, I had more requirements which were as important as possibly at odds with eachother.
I still wanted a framework which felt as qualitative, effortless and pure as Skeleton did. No “api-breaking changes” or industrial-grade build-processes.
For me, the winner was Spectre.CSS[1], great work by Yan Zhu[2] . I'd like to pretend Spectre covers all of contemporary must-have elements, details and attractively styled controls for all future needs, because Spectre is great at teaching what is doable with pure CSS at the same time it makes me feel like a great designer, getting more done while doing even less.
I tried this just last week, and I've gotta say, out of all the templates and frameworks out there these were the easiest to use and tweak.
Because it really is just HTML with utility classes, you never end up in a situation where you have, say, a "card class" you can't really override without a bunch of `!important`s.
Many of the components in Tailwind UI were already in Bootstrap. There's also a ton of free and commercial themes for Bootstrap (themeforest.net, themes.getbootstrap.com, creativemarket.com, creativetim.com, etc)
Everyone's definition of 'clean' will vary, but when I think 'clean' I'm also thinking clean code. Some of the examples of clean templates given in the comments here pull down 2MB over the wire, ~500k-1MB of which is frequently JS, and that's before I've written a single line of custom functionality myself. For reference, React + react-dom is ~35kb gzipped.
Does anyone have any examples of templates that focus on clean, lean code as well as final layout? I'm thinking framework-agnostic low-to-no JS, coupled with something that doesn't use thousands of lines of CSS for a homepage layout.
i recently sat down over a weekend and did the same after realizing that i should hammer out something i can use for myself - it dawned on me the work i thought i might be saving with frameworks was offset by the work i'd wind up doing to them - having to go through and cut out all the stuff i wound up not using, changing defaults to things i like etc.
i think a part of that was also realizing what drew me to frameworks initially was less about styling and more about the grid or flexbox etc scaffold - the most daunting part for me to this day. creating my own set of base templates helped me learn quite a bit about grids though, and now when stuff breaks i can tackle it with more confidence in where to look for the issue and how to go about fixing it.
that being said, i'm not anti-framework or anything - i relied on them alot as i learned CSS, and even now i still treat them like something akin to styleguides or catalogs of what's new/trending in webdesign
I resorted to buying a WordPress template and tearing out the PHP. the Jekyll community had a bunch of Jekyll templates back in the day, but they seemed a bit minimal and primitive for my needs today. then again, that could be what you want, depending on the definition of "beautiful and clean."
https://newcss.net/
https://uglyduck.ca/typesafe-css/
https://oxal.org/projects/sakura/
And its HN thread 8 months ago: https://news.ycombinator.com/item?id=22681270
https://getbootstrap.com/
----
¹: https://base32h.github.io/
²: https://github.com/Base32H/base32h.github.io/blob/master/ass...
The key thing I looked for was when the templates had been created and how often/how recently it had been updated - sites like Envato are loaded to the brim with old no-longer-updated templates.
I tested by loading them on the iPhone 6.
In almost every single case, the layout instantly broke, OR the side menu didn't work, OR the side menu felt "sticky" and would not smooth scroll, OR sliding the side menu scrolled the underlying page as well.
That was 90% of the templates or more - the quality level in general is terrible.
The ones we chose were from https://bootlab.io/themes - very nice quality.
Now I can get mostly where I want to go without frameworks and it is very empowering. It's just another language, it's not that tough.
Where most of us developers struggle with is making beautiful websites vs just something that works but looks ok.
One of the reasons bootstrap is so successful is that it's easy to use/integrate and produces a website that is very pleasant to look at.
Some time ago I started looking for a new framework, more up to date, at least. The website and GitHub repo for Skeleton hasn't been updated since 2014, so maybe I was missing out on the latest fashions? Doing more ambitious/insane web projects than happened earlier when less experienced, a bigger toolbox was needed. Of course, I had more requirements which were as important as possibly at odds with eachother. I still wanted a framework which felt as qualitative, effortless and pure as Skeleton did. No “api-breaking changes” or industrial-grade build-processes.
For me, the winner was Spectre.CSS[1], great work by Yan Zhu[2] . I'd like to pretend Spectre covers all of contemporary must-have elements, details and attractively styled controls for all future needs, because Spectre is great at teaching what is doable with pure CSS at the same time it makes me feel like a great designer, getting more done while doing even less.
[1] https://picturepan2.github.io/spectre/getting-started.html [2] [https://github.com/picturepan2/spectre]
Because it really is just HTML with utility classes, you never end up in a situation where you have, say, a "card class" you can't really override without a bunch of `!important`s.
Does anyone have any examples of templates that focus on clean, lean code as well as final layout? I'm thinking framework-agnostic low-to-no JS, coupled with something that doesn't use thousands of lines of CSS for a homepage layout.
i think a part of that was also realizing what drew me to frameworks initially was less about styling and more about the grid or flexbox etc scaffold - the most daunting part for me to this day. creating my own set of base templates helped me learn quite a bit about grids though, and now when stuff breaks i can tackle it with more confidence in where to look for the issue and how to go about fixing it.
that being said, i'm not anti-framework or anything - i relied on them alot as i learned CSS, and even now i still treat them like something akin to styleguides or catalogs of what's new/trending in webdesign
[1] https://preview.tabler.io/
https://cruip.com/
Templates: https://cruip.com/
It's not quite the same as starting with an out-of-the-box template but it can help save a lot of design time to get inspiration.
http://getskeleton.com/
https://github.com/troxler/awesome-css-frameworks