Web_Designer_UK__May_2018

Recommendations

Info

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 <strong>Web</strong> designer and developer codepen.io/ 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 http://bit.ly/2n6D6cE 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 http://bit.ly/2DB6r8L 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 https://mzl.la/2nsykId 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 http://bit.ly/2BqrtS1 A COMPLETE GUIDE TO GRID http://bit.ly/1UM0gSd 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 http://bit.ly/2n6qpO5 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 https://tympanus.net/ Development/Exhibition CSS EXCLUSIONS http://bit.ly/2F9UR18 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
Page 1:
29 PAGES OF EXPERT TUTORIALS FREE O
Page 4:
Meta Contributors This issue’s pa
Page 7 and 8:
FileSilo 96 Get the latest must-hav
Page 9 and 10:
Header Inspiration Sites of the mon
Page 11 and 12:
Header Opinion There is no excuse f
Page 13 and 14:
Reader survey FREE The JavaScript H
Page 15 and 16:
Li htBox Millennials Are Screwed #0
Page 17 and 18: LightBox Millennials Are Screwed Cr
Page 19 and 20: #5F9DCC #5A293E #0D738C #B6AEAB Abo
Page 21 and 22: LightBox Open Wear Create an animat
Page 23 and 24: #FF4B33 #151D1E #9403B4 #D5154A Abo
Page 25 and 26: NEW YORK | 25-27 APRIL 2018 DONNA L
Page 27 and 28: https://inculerate.com by RED COLLA
Page 29 and 30: ANGELIC AIRPLANES INTO THE FOLD So
Page 31 and 32: ANGELIC AIRPLANES “Well the site
Page 33 and 34: Subscription offer MOST GRE
Page 35 and 36: FORM AND FFUNCTION It was2005,andFF
Page 37 and 38: FORM AND FFUNCTION MAKING THE CONNE
Page 39 and 40: FORM AND FFUNCTION TIMELINE whythen
Page 41 and 42: AIGA Justified 2014 - Winner 2014 G
Page 43 and 44: GET PRO DESIGN SKILLS FONTS & TYPOG
Page 45 and 46: GET PRO DESIGN SKILLS RESOURCES GOO
Page 47 and 48: GET PRO DESIGN SKIL 5 USE A SCALE I
Page 49 and 50: GET PRO DESIGN SKILLS COLOUR PERSON
Page 51 and 52: Overlay graphics on video backgroun
Page 53 and 54: Tutorials There’s so much that ca
Page 55 and 56: Tutorials Code a dynamic SVG radial
Page 57 and 58: Tutorials Perspective is everything
Page 59 and 60: Tutorials Design isometric typograp
Page 61 and 62: EXPERT ADVICE Using body labelling
Page 63 and 64: GET PRO DESIGN SKILLS DESIGNING LAY
Page 65 and 66: GET PRO DESIGN SKILLS flow of the c
Page 67: GET PRO DESIGN SKILLS CREATING LAYO
Page 71 and 72: Tutorials Web designers have had ac
Page 73 and 74: Tutorials Shrink your code with CSS
Page 75 and 76: 10 BEST STATIC SITE GENERATORS STAT
Page 77 and 78: 10 BEST STATIC SITE GENERATORS 5. N
Page 79 and 80: CREATE THE IMPOSSIBLE www.photoshop
Page 81 and 82: Developer tutorials Intoday’swebd
Page 83 and 84: Developer tutorials Automate your w
Page 85 and 86: Special offer for readers in North
Page 87 and 88: Developer tutorials While TypeScrip
Page 89 and 90: Developer tutorials Deploy TypeScri
Page 91 and 92: Discover another of our great booka
Page 93 and 94: Get your listing in our directory T
Page 95 and 96: Get your listing in our directory T
Page 97 and 98: Thehomeofgreat home of downloads -
Page 100: 9000 1
show all

Web_Designer_UK__May_2018

Create successful ePaper yourself

Delete template?

Save as template?