CSS Baseline Grid vs CSS Frameworks

When thinking about moving from CSS Newbie to early Junior Front-end Dev, I have a question as it relates to real-world projects.

When you start coding a new project from scratch, in a professional environment or for a work-related project, do you typically:

  • Code a CSS Baseline Grid from scratch each time
  • Have a CSS Baseline Grid in your back pocket you’ve used and relied on before
  • Use a CSS Framework (Bulma, Tailwind, Bootstrap) and therefore don’t usually code or use your own Baseline?

I’m starting to try and find, and code, my own projects for practice. Trying to figure out what the best method for starting out from a framework perspective is. Purist vs Real-world.

Thanks all!

K

Hi Kyle,
The question leaves room for subjective answers and I would assume many people would give you an opinion. There are obviously pros and.cons for more deeply learning css or delving into a framework.

I would say that the best way to learn however, is to try one project that is pure css for a day, and one learning a specific framework. After those two projects are done. Just pick the one that was more fun to code.

Chances are that you’ll be much more likely to become an expert in the option that you enjoyed, then choosing one that was “Real-World”. Being an expert will make you much more marketable.

1 Like

@kylemhudson If you’re talking just about a Grid system, I’m currently going through a time at work to come up with our own simple Grid system instead of downloading a package (because our app is very size sensitive and we tend to do things more “vanilla” with little dependencies).

When I was first starting out, I learned vanilla flexbox (my css grid is weaker and I don’t use it as often as I should :joy:). From there, I built projects and grid systems using only vanilla css for practice. From there, I moved on to bootstrap to understand how they came up with their grid system. I recommend looking into the grid.css file in their src. I learned so much about how they came up with the grid system and I can see why so many other grid systems following the same conventions (not saying Bootstrap was the first to come up with that system because i’m not sure).

Now tasked with creating my own Grid system, I have these conventions in mind and I am able to pick and choose what techniques to use. I like the Material-UI Grid system as it uses only 1 Grid React component instead of the traditional Container, Row, Col system seen on other css frameworks. So there’s another style/method to learn from Material-UI as well…

In summary, for me, I think it came down to learning the fundamentals of flexbox/css grid first, then learning past conventions that people love (and hate) and then taking lessons and techniques from them and then moving on to creating something of your flavor.

Hope that helps you with making a decision on how to go forth with your practice!