Issue 38
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
Giveaway! Jump Start Sass - SitePoint Premium
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.
[css-grid] Reduced Subgrid Proposal from fantasai on 2016-04-14
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.
Visual CSS flexbox builder | Webflow
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
Don't build a Bootstrap style grid-system with Flexbox.
"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.
Experiments with interaction concepts using CSS and Javascript
Some experiments from Chris Wright using Flexbox.
Create Abstract Blurred Backgrounds from Images with SVG
A nice tutorial and technique for creating blurred backgrounds using SVG.
Sassier z-index Management For Complex Layouts by Matt Stow on CodePen
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
Experiment Time: Scroll Anchoring | Web Updates - Google Developers
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.
Responsive Data Tables: A Comprehensive List of Solutions
A good list of responsive table solutions although most do rely to some extent on JavaScript.
Our Sponsor
CSS Layout doesn't need to be confusing
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!