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?
52 comments
These three are "classless" CSS frameworks:
https://newcss.net/
https://uglyduck.ca/typesafe-css/
https://oxal.org/projects/sakura/
https://newcss.net/
https://uglyduck.ca/typesafe-css/
https://oxal.org/projects/sakura/
Oh the irony of calling it new.css which is vanilla HTML (no classes) and a 2002 era css file with some modern features. I love it.
Here's another one: https://andybrewer.github.io/mvp/
And its HN thread 8 months ago: https://news.ycombinator.com/item?id=22681270
And its HN thread 8 months ago: https://news.ycombinator.com/item?id=22681270
I always end up back at bootstrap, and eventually am pretty happy with it... ¯\_(ツ)_/¯
https://getbootstrap.com/
https://getbootstrap.com/
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.
As an alternative to Bootstrap, there is also Bulma https://bulma.io/
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).
----
¹: https://base32h.github.io/
²: https://github.com/Base32H/base32h.github.io/blob/master/ass...
----
¹: https://base32h.github.io/
²: https://github.com/Base32H/base32h.github.io/blob/master/ass...
now that Bootstrap uses the system font stack, using it doesn't have to scream "I AM USING BOOTSTRAP" any more
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.
The ones we chose were from https://bootlab.io/themes - very nice quality.
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.
I struggled with this a lot, and was never satisfied, until I spent a few weeks doing CSS & flexbox lessons from Lynda.com (free from my library).
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.
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.
Positioning jokes aside, learning CSS is easy.
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.
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.
I'm in this boat. I can structure and do layouty things, I just don't have a taste for design. This is where component libraries help out a lot.
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.
Ive used http://getskeleton.com/ for a number of projects, its simple enough to get me 80% of the way there without a bunch of excess.
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.
[1] https://picturepan2.github.io/spectre/getting-started.html [2] [https://github.com/picturepan2/spectre]
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]
Spectre.CSS looks great. I have been using bulma with extensions. I might switch to Spectre.CSS. Thanks.
Thank you for posting this. Seems like a great resource for landing pages.
Depending on what you interpreted the OP as requesting, this is either a great recommendation or a hilarious dig against utility-first CSS.
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.
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.
Is there something like this for Bootstrap?
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.
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.
A lot of these comments are suggesting CSS frameworks. If you're looking for built-out templates, https://html5up.net/ provides decent ones.
All CSS templates are beautiful, or at least thats what their authors say.
I made just such a template for myself recently. Sort of Medium-ish, single column; option for full width/bleed image: https://birddive.com/blog.2020-11-8.repurposable-templates.h...
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 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
Tailwind UI: https://tailwindui.com/components by people behind https://tailwindcss.com
Because I like the look, I typically end up "butchering" tabler[1]. Have used it on a few projects now.
[1] https://preview.tabler.io/
[1] https://preview.tabler.io/
I found these to be clean and easy to use. I converted the templates to React components without issue, but now they offer that too.
https://cruip.com/
https://cruip.com/
I'm surprised that no one has mentioned awsm.css yet: https://igoradamenko.github.io/awsm.css/
Because it uses jQuery for its plugins?
Stackbit has nice templates which can be used for a variety of static site generators: https://www.stackbit.com
Do you mean clean design or markup?
List of free tools and resources to create UIs: https://dev.to/davidepacilio/50-free-tools-and-resources-to-...
Templates: https://cruip.com/
Templates: https://cruip.com/
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."
[deleted]
Html5up.com or pixelarity.com are pretty good. One is a paid, attribution free version of the other.
I program in clojure and clojurescript. I use hiccup. All the beautiful stuff is right there.
I like browsing Wordpress theme libraries then cloning design elements I like in plain HTML/CSS myself.
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.
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.
I have also had this problem. One of the css frameworks that I have enjoyed using is https://semantic-ui.com.
I enjoyed working with MVP.css (https://andybrewer.github.io/mvp/) recently.
I like Skeleton:
http://getskeleton.com/
http://getskeleton.com/
Are you looking for a CSS framework? Here are some:
https://github.com/troxler/awesome-css-frameworks
https://github.com/troxler/awesome-css-frameworks
That's actually a very good question
bookmarked