| I'm an applications programmer. My first meaningful web dev experience was a GWT app I built from 2011-2012 using the SmartGWT widget library. They completely bypass the standard CSS layout modes - everything is absolutely positioned using locations calculated in JS. Felt very much at home given my previous desktop UI toolkit experience. However, for the last two years I've been building a related web app that's all JS. We've cobbled together our own UI conventions out of HTML, CSS, and Backbone/Marionette classes. For a long time, I got frustrated with any task that involved doing UI layout. I inevitably found myself reduced to desperate googling and randomly flipping CSS attributes in the hopes that I might finally get things to slide into place. Fortunately, in the last couple months things seem to have finally come together for me. The two keys for me have been: - Grasping the core concepts of the HTML box model and block/inline behavior - Flexbox. Flexbox FTW. I've been able to replace SO many nasty CSS hacks with simple flexbox directives over the last few weeks. Here's two key links that have really helped me: - http://learnlayout.com/ is a great guide to the basics of layout in CSS - http://jonibologna.com/flexbox-cheatsheet/ is a simple graphical overview of flexbox commands Obviously, all this is focused on the layout aspect rather than the "styling" part per se, as that's been my biggest concern on this project. |