Issue 38
A book giveaway! Visual flexbox, experiments and a revised subgrid proposal.
News
Issue 38
This week we have another giveaway courtesy of SitePoint, "the first" visual flexbox builder has launched and I've an assorted collection of other reading from around the web.
I really enjoyed reading Morgan Feeney's thoughts in "Don't build a Bootstrap style grid-system with Flexbox". My feeling is that we still have a long way to go to really understand how we work with our new layout methods. Quite a lot of the thinking around flexbox translates well the CSS Grid Layout too, perhaps even more so.
Don't forget to send me your demos and blog posts so I can take a look and share them with other readers and if you enjoy this email please spread the word via Twitter or anywhere else you are online.
Rachel Andrew, CSS Layout News
SitePoint have published Jump Start Sass by Hugo Giraudel and Miriam Suzanne and have given me three copies to give away to readers of this email. I'll randomly select 3 names from everyone who emails me to tell me the answer to the following question:
What are your favourite blogs, emails, Twitter accounts or resource sites for learning about CSS?
I'll do a roundup of your suggestions in the next email.
On the CSS Working Group mailing list, a revised subgrid proposal. I'll write some more about this later this week but if you have been looking into subgrid take a look and add your thoughts.
Webflow have announced the "first visual flexbox builder". While it seems to be a comprehensive bit of work I remain unconvinced that anyone should be encouraged to use Flexbox for full page layout. Stating that this is a flexbox builder rather than just incorporating flexbox as one tool used for layout seems to encourage that idea.
You can check it out by playing their game/demo. I'd be interested in the thoughts of those who like to use a visual interface for doing this sort of thing.
Learn
"It felt like I was just replicating what Bootstrap did with floats, with Flexbox. I soon came to the conclusion that something didn't feel right."
Morgan Feeney explains why using FLexbox to recreate Bootstrap-style grid systems is a bad idea.
Some experiments from Chris Wright using Flexbox.
A nice tutorial and technique for creating blurred backgrounds using SVG.
Having z-index conflicts isn't something I've really run into, but if you have then here is a Sass maps and lists technique for managing your z-indexes.
Interesting
Scroll Anchoring keeps track of where you are on the page and prevents anything that causes a reflow from disrupting your position on the page. Currently you can try this out in Canary.
A good list of responsive table solutions although most do rely to some extent on JavaScript.
Our Sponsor
If developing a layout seems to mostly consist of trial and error, or you are relying on a framework in order to make layouts that work, I have a course for you. Throughout this video course I'll explain the mysterious aspects of CSS, giving you a solid foundation to create the layouts you want.
Purchasing a course also gives you access to our private Slack Community, discuss the things you are learning or any problems you have with other people doing the course - and me!