7 months ago



GET PRO DESIGN SKILLS FLEXBOX Flexbox is great for creating single-axis layouts, either vertically or horizontally. Supported by the browser’s powerful layout algorithm, spacing and sizing elements along an axis has never been more satisfying. The syntax can be confusing sometimes and there is a lot to learn but once you are familiar with this new way of aligning items you’ll wish it had always been this way. Flexbox shares some similarities with CSS Grid in that applying the value of ‘flex’ or ‘inline-flex’ to the ‘display’ property will have an effect on direct children in the DOM. When Flexbox is applied the browser will align all of the direct children, or flex-items as they are called. By default these items will be placed in a row next to each other and each item will take up as much space as it needs, something that’s either Perfect for single-axis layouts FRAMEWORKS AND GRID SYSTEMS Powerful battle-tested systems dictated by its content, or by setting a width on each item. FLEX-GROW The ‘flex-grow’ property enables you to apply the leftover width in the container once the items have been aligned according to their content. By setting the flex-items grow property to the value of ‘1’ the remaining space in the container will be shared among the items equally. See fig.1 If we set the ‘flex-grow’ property on the last flex-item to the value of ‘2’ then the leftover space will not be split equally, the last item will be given twice as much of the left over space in the container. See fig.2 FLEX-SHRINK The ‘flex-shink’ property does the opposite when the container is made smaller than its items’ widths. If you set the ‘flex-shrink’ property on all the items to the value of ‘1’ they will be reduced in size equally. See fig.3 If you set the last item to ‘2’ the width with be reduced in size twice as much as the other flex-items. See fig.4 WHEN FLEXBOX IS APPLIED THE BROWSER WILL ALIGN ALL OF THE DIRECT CHILDREN OR FLEX-ITEMS AS THEY ARE CALLED Default — flex-items — (flex-grow: 0; flex-shrink: 0;) Fig.1 — flex-items — flex-grow: 1; Fig.2 — flex-items — flex-grow: 2; for the last item, 1 for the others Fig.3 — flex-items — flex-shrink: 1; Fig.4 — flex-items — flex-shrink: 2; for the last item, 1 for the others You can save yourself hours of time in development since frameworks have been battle-tested by a number of developers and users. However, they can also add an unnecessary amount of code bloat to the project. When using a framework it is worth spending time choosing only the elements that you want. This will help keep down the size of the files to be used. However, thanks to the widespread adoption of CSS Grid and Flexbox these systems are starting to fall out of favour. These frameworks usually offer much more than just a grid system, but since we’re discussing layout we’ll concentrate on the most popular frameworks grid system. BOOTSTRAP The Twitter Bootstrap grid works much like old design grids — they apply 12 columns onto the container and you (as the developer of the project you’re working on) choose how many of these columns any given element should span. The grid itself is fully responsive and built using Flexbox. Grids are defined by using a series of containers, rows and columns. The number of columns an element spans at any given screen size is dictated by part of the class name. While this is a powerful grid system it is very rigid, the breakpoints for the grid are always the same and the syntax isn’t very intuitive for someone who is new to the system. HOW DOES IT WORK? The element shown in the code above will span 12 columns by default and then on medium-sized screens span 9 columns and then on extra-large screens span 8 columns. The screen sizes are defined in Bootstrap and if you are just including Bootstrap as an external resource it is very difficult to update these values. While these grid systems and frameworks can be good for beginners it’s worth noting that unless you know how all of this works under the hood you’re cheating yourself out of learning the fundamentals of CSS and relying on someone else’s code. 68 _________________________________________________feature

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