I feel a little overwhelmed by the idea of responsive web design. When I first went through the front end part of FCC, the only responsive design it really taught was using bootstrap.
Here’s the deal though, I hate bootstrap. It’s ok for mockups I suppose, but bootstrap sites largely don’t look original, and customizing bootstrap is more effort than i feel it is worth. Plus I don’t like using it as a crutch instead of getting better at CSS.
But the idea of building a fully responsive site from the gronud up seems daunting. The Responsive web design part of the FCC cert does a great job of teaching the building blocks behind responisive design, but I feel overwhelmed at the idea of building from the ground up. Aside from constantly checking the site after making every little change, is there a better way to make sure a site I build is going to be fully responsive? I’m hoping for something like a guideline, list of standards, or a checklist to make sure I’m thinking of everything, as I build every element of the site. I’ve searched for it, but so far found nothing that is what I’m looking for.
Since you don’t want to use bootstrap (and I assume other libraries) you’ll have to do that. You’ll get better with time and it’ll be easier to make a responsive layout. It’s not that difficult, especially with CSS Grid and Flexbox.
There are a couple of things you can do to help yourself.
Learn the difference between mobile-first and desktop-first and how that affects the development.
Learn the common breakpoints. like 320px, 600px, 900px, 1200px and >. You can take a look at different CSS libraries, they may use different breakpoints but can serve as a general guide.
Get a responsive-design course if you need it. https://www.udemy.com/advanced-css-and-sass/ this one is pretty good, beautiful and advanced projects, all responsive, very hands-on.
I like the look of PireCSS. It’s not libraries as a whole that I am opposed to, but I don’t like the idea of having some gargantuan library like bootstrap that I need to learn so many classes for, which don’t even help further my understanding of styling and responsive design. But I like the idea where you can just use bits and pieces of pureCSS to get only what you need, with minimal styling. This quote on their page is great…
“We believe that it’s much easier to add new CSS rules than to overwrite existing rules.”
The experience’s been completely the opposite for me, I love using CSS Grid. It’s been easier to learn than Flexbox and feels more intuitive.
And it’s not overcomplicated, but definitely more complicated than Flexbox. Not strange considering it’s also more powerful and complex. It’s easy to pick up, easy to create entire website layouts and mobile layouts as well.
The library is huge and complicated. If you don’t know it well enough its mountains of css to rewrite the grid every so often size wise. Then you have multiple different grids for different sections.
???
How?
I can change direction of children from row to column, top of div to bottom or center, in 2 lines of css code.
All in flexbox.
No grid-area.
No defining columns or rows with certain set heights and widths i must follow for the entire grid.
Many IDEs come with preview functionality where you can see your page updated in real-time as you make changes to your code.
PS: IMO grid makes it much easier to make responsive site layouts, and it allows you to do things that are impossible with flexbox, such as multi-dimensional layouts where some items occupy multiple rows and/or columns. Grid also has some very useful features like the auto-placement, where you can specify desired min and max size of your column (or row) and have grid automatically size your items to fill the container. Here’s a demo: https://codepen.io/SaraSoueidan/pen/JrLdBQ
CSS Grid is used mainly for the entire layouts, not the individual small sections. You can use flexbox in there or not even that. And if you do choose to use CSS Grid, structure the code better, use modules. It’s not Grid’s fault if it starts being difficult to manage.
Also, often you don’t need to declare the template-grid-areas, grid-areas and so on. Flow can be changed and order can be changed similarly as in Flexbox (use grid-auto-flow and grid-column-start/end). It usually also takes one line. The direction(within the column/row) can’t be simply changed for all elements, so you’re right here, flexbox wins.
On the side note, CSS Grid is not a library. It’s supported natively.
I can understand that, I had similar issues with Bootstrap.
Try playing around with CSS Grid/Flexbox, it might seem difficult now but after you create 1 or 2 projects, things will start coming together. I also recommend you start using SASS or SCSS before you take on full projects, it makes things much easier, including defining styles that are responsible for responsivity.
Again, you can do all of this in flexbox without a grid. You would be surprised at how much you can do with putting items in rows and columns with 2 lines of code.
Doesn’t make it any better. And yes it is the grid’s fault that it is difficult to manage. The amount of code it takes and the skill you have to be at in order to use it is simply not worth it.
Even with the most complicated websites a grid is not needed. Your stacking boxes on top of each other (sections). Using a grid doesn’t make it any different. Want to put two sections in a row? Put them in a div and flex it to a row. I can then go and manipulate width with percentages to make it responsive. Not rocket science.
One of the selling points with Grid is that i can move sections next to each other on demand.