Issue 54
News
Issue 54
I am back from Australia, where I had an excellent time at Web Directions Code meeting lots of Australian web folk. I also ran a one day workshop and spoke on upcoming layout features at the MelbJS meetup - you can find slides and demos for that short talk here.
Despite the fiercest jet lag I have ever encountered I had an amazing time and can recommend the Web Directions conferences if you want to spend time learning your craft amongst other switched on folk.
We have a new sponsor this week so please do check out the free prototyping course from Planning for Aliens. If you have a product or service that might appeal to the 4300 people currently getting this email take a look here. Sponsorship helps support the time I put into this email and the other things I do around CSS layout, creating resources and demos and so on.
Rachel Andrew, CSS Layout News
CSS WG Blog – Minutes Telecon 2016-08-03
In the CSS Working Group call last Wednesday it was resolved to take CSS Grid Layout to Candidate Recommendation (CR),
"By publishing a Candidate Recommendation, a working group is expressing that it has resolved all known issues. A CR is also a call for implementations." - CSS WG process
This is an important step in our getting Grid from experimental status to something we can all be using in production.
Browser Support for CSS Grid Layout
I am now getting more than one email a day demanding to know when Grid will be shipped in browsers. Sadly I have no special insight into that. Even if vendors had some roadmap they were working to internally they would be very unlikely to share that with the world at large.
New features are being implemented in the current flagged implementations all of the time so it is safe to say that Grid is on the way. If you want to keep track of this yourself then the linked page details the meta bugs and other information about implementation status.
-webkit-background-clip: text demo
Firefox Nightly and Developer edition have shipped the text value of the prefixed -webkit-background-clip property. This value isn't currently part of the backgrounds draft, but is rather nice and useful for those big feature headings.
Use Chrome, Safari or Firefox Developer/Nightly to see the demo working.
Learn
Design Better Data Tables — Mission Log — Medium
With our Perch UI design underway I'm very interested in anything about layout of UI components such as forms and tables. Here is a great post about how to design better data tables, focussing on some of the small things that make a real difference to complex tables.
CSS Writing Mode
"The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress."
A post about creating vertical text.
Interesting
CSS only scroll indicator
A nice CodePen Demo of a CSS only scroll indicator. As Mike notes there is definitely some fragility here and perhaps the more robust solution uses JavaScript but I like the experimentation. It is also a really nice feature for a site with long form content. So whichever way you choose to implement something like this it might be a useful detail.
For inspiration: a curated directory of Pricing Pages
I often build a pricing page as a grid or flexbox demo as they expose a lot of things neatly solved by flexbox and grid. If you need to create one for there are some lovely examples here.
Our Sponsor
Over 24,000 different cellphones and tablets and iDevices run a web browser …
And your responsive design has to look great on all of them.
You can't create a Photoshop comp for every possible screen your design will run on. So what tool do you use? How do you work with developers?
Do you have to be a magical unicorn to be a web designer these days? Nope! No unicorn skills required, you just need the right tools for the job.
The tools developers use to speed up programming can be used by designers to speed up prototyping in the browser — but you have to pick and choose only the pieces that are useful to you as a designer.
And that is what you will learn in this free course. Start the free course here.