What is your go to CSS framework for side projects?

I roll my own. Anything else feels bloated, and hinders me from achieving what I want. It does help that I've been doing web dev for 10+ years, focusing on frontend most of the time.

Like you mention, you can easily get messy CSS if you don't keep tabs on it. The solution is the same thing with anything you program: structure! How you do it depends on you and your project, but mine usually resembles something like this in the end:

Base (global scope)

• Reset/normalize etc
• Branding (variables with color etc)
• Spacing
• Layout

Components (local scope - well defined components)

• Forms
• Cards
• Etc etc

Pages (usually not needed, but if certain pages need certain styling it goes here)

• Start
• That-funky-article-with-custom-storytelling-animations

Modifiers

• Responsive
• Print

It's a mindset thing - start building your project in components and reusable rules instead of pages. If you're using React, Vue or another popular frontend framework this comes with the tech, but it really has nothing to do with the frameworks. It's all about the structure and realising that CSS architecture, like backend architecture, is extremely important for maintainability and scalability.

Here are a few good resources to get you thinking about CSS architecture and figure out what works for you:

http://bradfrost.com/blog/post/atomic-web-design/
https://github.com/jareware/css-architecture
http://getbem.com/

It pays off to learn this. If you're a programmer or designer the concepts are easy to grasp, your project will be more easily maintained, and a bit more performant.

Good luck!

We used Semantic-UI (semantic-ui.com) for everything at Plainflow.com (web app + public website) and it's been truly awesome.

The learning curve if you come from Bootstrap is a bit steep but it'll pay off in term of development speed.

Very modularized source code (support downloading a standalone element), good-looking default theme, elegant docs site & greatly documented. Coulnd't recommend it more.

Give Tailwind CSS a shot. It's a slightly different approach to solving problems, but I no longer find myself googling for "bootstrap user login modal html". Instead, once you understand the helper classes that tailwind provides, it's pretty easy to just implement it yourself.

I still use Bootstrap honestly. Make sure to strip it down and it becomes reasonably sized. Then add one of the boat-loads of themes to make it look nice.

I've used Primer on a side project (https://meditations.upvalue.io). It's from GitHub, very Bootstrap-esque (I think one of the original authors of Bootstrap works on it full time) but looks a little better for an application.

I have been eyeing Spectre.css for a while.

I personally don't mind writing my own CSS, it's mainly the utility layout classes and decent looking styling out of the box that attracts me to frameworks. It can get really gnarly on its own.

Well this is my goto. Because I made it. Check it out - https://renaissancecss.com/

And if you want to really make quick front end magic, just started making these react components - https://www.npmjs.com/package/renaissance-react

Lately, I have been using Bootstrap, Spectre.css and Tachyons.

I can't recommend bulma.io highly enough. I use it on my react projects. I like the semantics and customizability. It does rely on flexbox though so look elsewhere for ancient browser support.

I find it strikes a good balance of being useful and lightweight. I find frameworks like bootstrap and semantic UI to be too bloated for most of my use cases, and frameworks like pure to have too little.

Bulma also comes with a ton of utility classes and responsive classes/mixins (it's scss). Please note that it does not include any JavaScript - it's purely a style lib.

I'm a big fan of tachyons (https://tachyons.io). It's small and unopinionated!

After years of trying to find the most scalable, yet light CSS framework, I've ended up embracing functional CSS entirely with https://tachyons.io. Adam Wathan has written a great article about it (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/).

The advantages are enormous:

• you are not afraid of side effects that always happen with normal CSS
• you have a very basic set of classes that never change
• your CSS is finally scalable: as there is no side effect, you can grow your project a lot without having to worry about growing your CSS exponentially.

It's a bit unnatural to start with it at first, but give it a try. After a few weeks, you won't come back to how you previously wrote CSS. I did this with my side project and am extremely happy on how flexible it is.

Bootstrap have served me well, but I'm super happy to finally ditch it entirely for current and future projects.

I've been using Tachyons (http://tachyons.io/) and a React UI kit: http://blueprintjs.com/

Highly recommend them both, Blueprint specifically I've be using with Next.js for server side rendered apps.

bootstrap, semantic-ui

Materialize CSS 😎

I like to roll my own CSS (and judging by the comments so far that is not the norm around here). I don't really have a process. I admit it's sometimes a struggle.

The propensity for a design to look really bad after many hours of work is frustrating. If you want to go fast then definitely use a framework!

But if you do want to look different rolling your own CSS is the way to go. (For example here is http://cicerone.co, which I redesigned recently.)

If I have one thing to suggest it's to practice practice practice, and learn CSS really well. Learning CSS in depth is a challenge all to itself because it is chock-full of little gotchas and caveats.

PS: Another advantage of rolling your own CSS is you can take advantage of newer CSS (like Grid, which is excellent), while frameworks tend to lag behind. If you learn grid well enough you may find a framework is not that necessary.

I started with milligram.io and then tweaked it to fit my style. It's grown a lot over the years to the point where I can re-use a lot of the same files from project to project. I wasn't a fan of the bootstrap/foundation look.

I use http://getskeleton.com/ on just about everything. It's very simple, lightweight and easy to learn. No B.S. It just gets the job done. When I need to add more functionality and features, I just add a custom.css file to the mix.

I ended up using bourbon.io for my food project. I did pay one of the developers to create the initial set of files. What I liked best about the result was a 4kb compressed css file that handled my whole site

I just started to dig deep into Vue, and I will definitely make use of the single file component https://vuejs.org/v2/guide/single-file-components.html
Beside that i think i will be using sass in the future, and just making sure to divide my files into smaller bits, so each file represents an area.

I absolutely love http://tachyons.io/

I'm a designer historically and really dislike bootstrap etc. This one give me a whole load of flexibility to create layouts super fast. And its very minimal. I use a few custom rules to expand it a little bit for what I need (adding flexbox etc).

I use a modified version of Lemonade (https://github.com/dope/lemonade) for the grid and write the rest of the code myself. Frameworks are helpful, but you can achieve more unique outcomes doing it yourself.

Bulma here too :-)

Hey 👋
This might not be exactly what you're looking for but for css management in the world of React I stick to https://github.com/Khan/aphrodite when doing inline styles (local to a single component). For me that keeps css styles contained to their use while not polluting the whole application. Note it's not dependant on using React.

A valid alternative, though a little rougher to get going, is https://www.styled-components.com

Best of luck!

This comment was deleted 4 years ago

This comment was deleted 4 years ago

This comment was deleted 6 years ago