Web_Designer_UK__May_2018

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