Web_Designer_UK__May_2018
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
GET PRO DESIGN SKILLS<br />
WHAT NEXT FOR<br />
LAYOUTS?<br />
LAYOUTS?<br />
Standard<br />
STEVEN<br />
ROBETS<br />
<strong>Web</strong> designer and<br />
developer<br />
codepen.io/<br />
matchboxhero<br />
“CSS GRID’S NEW<br />
TEMPLATING ENGINE<br />
ALLOWS FOR QUICK AND<br />
EASY EXPERIMENTATION<br />
WITH LAYOUT AND<br />
DESIGN. BY SIMPLY<br />
CHANGING THE TEMPLATE<br />
WE CAN RE-ORDER THE<br />
CONTENT.”<br />
“CSS REGIONS ALLOW<br />
FOR ELEMENTS TO BE<br />
PLACED INSIDE OF<br />
FLOWING CONTENT, THIS<br />
ALLOWS ELEMENTS<br />
BELOW THE FOLD ON<br />
MOBILE TO BE SHOWN AS<br />
PART OF THE CONTENT,<br />
ABOVE THE FOLD.”<br />
“CSS SHAPES ALLOW US<br />
TO WRAP TEXT AROUND A<br />
SHAPE BRINING YET MORE<br />
DESIGN ELEMENTS FROM<br />
THE PRINT WORLD OVER<br />
TO THE WEB”<br />
CLOSE UP WITH NEW CSS SPECS CSS REGIONS<br />
http://bit.ly/2n6D6cE<br />
layouts are still the staple diet of many sites, but new<br />
specifications can mean new direction for layouts. Here we check<br />
out what’s happening in the world of layouts with expert insight<br />
and the resources to help get you get to the next level<br />
CSS SHAPES<br />
http://bit.ly/2DB6r8L<br />
4 MUST-READ RESOURCES<br />
1<br />
2<br />
THE EXPERIMENTAL LAYOUT<br />
LAB OF JEN SIMMONS<br />
http://labs.jensimmons.<br />
com/index.html<br />
JenSimmonsiteprovidesahostof<br />
experiementsthatrevealwhatcan<br />
be done CSS Grid. It’s not just CSS<br />
Grid that is included take a look at<br />
Whitespace, Flexbox & more.<br />
3<br />
CSS GRID LAYOUT AND<br />
ACCESSIBILITY<br />
https://mzl.la/2nsykId<br />
Accessibility is an often forgotten<br />
aspect of layout, but it shouldn’t<br />
be.Checkoutthisresourcefrom<br />
Mozilla. It asks and answers how<br />
users should approach<br />
accessibility with grid layouts.<br />
We know that CSS Grid is taking layouts to new levels, but<br />
what else does the W3 have in the pipeline? Find out more<br />
CSS BOX ALIGNMENT<br />
http://bit.ly/2BqrtS1<br />
A COMPLETE GUIDE TO GRID<br />
http://bit.ly/1UM0gSd<br />
As the title suggests this<br />
is an extensive look at CSS Grid. It<br />
introduces the basics, browser<br />
support and terminology before<br />
going in-depth on the specifics.<br />
Makesureyoubookmarkthisasit<br />
is a great reference point.<br />
4<br />
EXPERIMENTAL 3D ROOM<br />
EXHIBITION LAYOUT<br />
http://bit.ly/2n6qpO5<br />
This one is a bit more out there. It<br />
is an experimental 3D layout that<br />
uses CSS 3D transforms and CSS<br />
Flexbox to create its layout. VIew<br />
the demo at https://tympanus.net/<br />
Development/Exhibition<br />
CSS EXCLUSIONS<br />
http://bit.ly/2F9UR18<br />
The CSS Regions module, a<br />
working draft, allows content<br />
from multiple elements to flow<br />
through multiple boxes.<br />
This specification allows the use<br />
of geometric shapes in designs.<br />
Currently supported in Chrome<br />
and Safari but not Firefox.<br />
A working draft this module<br />
relates to the alignment of boxes<br />
within their containers in various<br />
CSS layout models.<br />
Currently a working draft this<br />
specification defines arbitrary<br />
areas around which inline<br />
content can flow.<br />
feature _________________________________________________69