So I’m building a responsive layout and I’m reading that I should start with a fluid layout. Ok. But where do I start? Should I build one from scratch and use % and ems and zero pixels width values?
The demo on http://www.initializr.com/ sounds bullet proof. I’d like to use it, but the demo http://www.initializr.com/try doesn’t match my design.
Do I start with that demo and edit as needed? What approach do you take?
I have had similar problems, but using WordPress and responsive theme took care of everything for me
Because I’m still learning to code I’ll often start off with a template like your initializr one and then tinker with it to get where I want to go. I tend to learn a lot playing with someone else’s code and it helps get me off to a good start. Of course, you may end up with messy or defunct code as a result, so depending on your prowess it may be better to start from scratch, or at the very least inspect the code you’ll copy from to ensure it falls in with your own work style?
I opted to learn about building responsive websites from scratch, and doing that really helped my css skills.
Personally, I adopted % for the initial font declarations and used ems for fonts and paddings from then on. I’ve also used % widths and media queries in pixels to shape the website to my liking. You might want to try these out.
Thanks. I thought I would just build my own, to fit my design, but the template on initializr and other grids sound to me to claim to be a one size fits all.
Why would someone use a grid opposed to building their own layout?
Grid systems are great starting points for designers to get their stuff up extremely quickly as they provide lots of helper classes and many things are already predefined.
I see the benefit of using grid systems for larger projects where design layouts could be complicated, but for small projects, I’ll stick to rolling my own, because of the code bloat in most traditional grid systems and unintuitive addition of divs and classes.
I’m contemplating on picking up a grid framework that is usable with CSS preprocessors that allows me to change the number of columns, gutter width and column width with every project at a quick rate though, but the learning curve seems to be quite steep in that area. (I use SASS, but I don’t seem to figure out how the grid systems work there )