The CoffeeCup Guide to

Responsive Website Design



  • Author
    Bob Visser CoffeeCup Guru
  • Design
    Mateo Carrasco Master of Art
  • Edits
    Suzanne Norvell Tutorial Jedi
  • Document Version
    Version 4.0 July 31, 2019
  • Production Rights
    CoffeeCup Inc. Fresh software, warm people.

The Styles Pane – Layout

On the Styles Pane under the Layout section, several positioning options are made available to you so you can pick the method that fits best with your design. The choice will vary depending on which element is currently selected. The three most common display options are CSS Grid, Flexbox, and Block. You can also select less frequented layout controls such as Inline Block, Absolute Positioning along with Hide.

Layout Preview

Depending on the layout selection you choose, corresponding layout controls will appear. Apply your positioning, then you can tweak the dimensions of the items below including Height, Width, Margin and Padding.

Preview of the Layout & Positioning Controls.

Layout Preview

The tools on the design pane have been organized in groups of related controls. Each of the groups (sections) can be collapsed and expanded when needed. When all the sections are expanded the scroll to the lower sections can be getting rather long.

CSS Grid

CSS Grid layouts are the most powerful layout controls in CSS. It is a two-dimensional system that handles both rows and columns. The "Grid' is great for a modular design approach. Used to manage major page areas or small combination of elements.

CSS Grid

This system allows you to design without having to use floats and other positioning methods.

Organize page content into Container elements then position the content accordingly within it. You basically build a mini grid within the Container. The children within the parent element can be directly told where to go within the grid. You can either give each item an area name, or give it coordinates that match the lines you want them on.

CSS Grid

We see Grid being the layout method of choice for content on the web - especially now that all modern browsers support it. CSS Grid is covered later in this guide. If you would like to skip ahead using the following links.

Liberate Your Layout

Using 'grid' for layout is the hottest new design technique that has come to the web in years. And for good reason, ever since the early days of the web world, layout creation has been cumbersome. A fact only amplified by the responsive revolution where layouts have to be adjusted depending on the available screen width. Luckily CSS Grid is the final answer to all the old layout hacks and inconveniences.

With Grid Layout, content can be placed explicitly and precisely in grid containers. These containers can also be nested — the child grid containers can be easily be arranged within their parent grid container.

Easily rearrange layouts for different screens. With media queries, the elements (and 'element containers') can be easily repositioned to accommodate for different display sizes. We made a short video showing a full-blown layout change using line-based placement. What's really cool is that the entire rearrangement you see below took me less than 10 minutes!

Flexbox

Flexbox provides a superior method for aligning, ordering, sizing and positioning elements. Yup, it can do all of that and therefore is increasingly being used instead of other positioning controls. Setting the Display control to Flex for a Container will make all elements inside flex-children. These children will then listen to the flex settings of the parent, but can also get some individual flex styles.

Flexbox

A flex layout is created by setting the display property of a container element to  Flex . This can be any element that contains other elements, from a simple container, to a list element. The parent container becomes a flex-container, and all immediate children become flex-items.

The main characteristic of the flex container is the ability to modify the order, position, alignment, width or height of its children.

The Direction is used to define the direction the flex-items follow in the flex container. By default the flex-items will be positioned as (horizontal) Row. Changing the dropdown to Column will stack them.

Flexbox positioning controls.

Flexbox

The Wrap can be used to position a series of items on a single, or on multiple lines. If there is not enough space available, setting this property to wrap will place items that do not fit on the next line.

The Justify control determines how the elements are spaced out horizontally.

When there is more than a single line — more than a single column or row — of items, (align) Content can be used to distribute the space between the lines.

Using (align) Items the position of the elements on the cross axis of the defined direction can be managed.

Flexbox

The container has a class of flex-parent with initial settings of Direction row to place them next to each other and Justify flex-start to align them to the left. The Item center value perfectly centers them vertically

The flex-items also use the flex display property. This allows us to easily vertically center the text using the column Direction now with center for the Justify control.

Flex-item #1
Flex-item #2
Flex-item #3
Flex-item #4

The flex-items can also take on individual flexbox rules. The example below is an extension from the previous example, but now each of the containers have one additional class — fi-1 to fi-4 — so individual rules can be applied. Please make sure to deselect the other classes before doing so!

It will be immediately clear that the blue box — item #4 — is now first in line. This is done with the Order control. Negative values can be used here as well, for fi-4 the -1 value puts it visually first in line.

The alignment specified by align-items on the parent container can be changed for individual flex items with the Align Self control. The black box has been pulled up by assigning the flex-start value to the fi-2 class. This overrides the center value specified on the parent.

The size of flex-items can be controlled with the Flex control. The Flex Basis specifies the initial size of a flex-item. This can be an absolute pixel value or a relative value like, for example, a percentage of the width of the parent.

The Flex Grow and  Flex Shrink controls are powerful tools that can be used to control the growth or reduction of the element based upon the available display space.

Placeholder Picture

The image above shows the settings for the black box (flex-item #2). The initial width is not changed, the Flex Basis remains on auto. However, the Flex Grow setting tells the browser that the black box can take up 3 times as much of the remaining empty space as the other items.

Flex-item #1
Flex-item #2
Flex-item #3
Flex-item #4

Each of the items above has a different grow value, ranging from 1 to 4, causing the differences in width.

With the combination of Flex Basis and the unit switcher plus the Flex Grow control magical things can be achieved. In the example below the target (initial) value for each of the cards is set to 280px. When there is not enough room to get to that width, the item(s) will wrap.

They all have a Flex Grow value of 1 , so any remaining empty space will be distributed to them equally.

The result is that the sizing and positioning of the cards automagically adjusts to the available width and the height is maintained dynamically. Flexbox is an extremely powerful layout tool.

The History of CoffeeCup Software

Did you know we brewed the worlds very first HTML Editor? From a coffee shop!?

Read on

It’s about creating experiences. Not code!

Visual CSS. Easy to manage custom breakpoints. Width slider. Prototyping and designing in the real production environment (yup, the browser) and so much more...

Designers rejoice!

Learn more

The road to a Design System

The only way to complete a mission like that? Hard work, step-by-step, and with the support of our awesome customers!

Support us

Position Power 

The Position control can be used to define alternative rules for the positioning of an element.

Static — the first button — is the position value applied by the browser if no other value has been specified. These elements behave exactly as you would expect, according to the rules defined by the other controls. In the first row of the example below this is illustrated — four blocks, each 22% wide and 1% margin on the left and right are placed next to each other using flex-direction: row.

Relative positioned elements behave very similar to static elements with two exceptions. Firstly, they can be moved around using offset values. The big difference with using margins for this is that other elements are displayed as if the element were in its normal position and taking up its normal space. The second row shows this — despite the dark block being visually out of position, the other blocks display exactly as in the row above.

Position-Settings

An absolute element can be positioned anywhere in the design using the same offset properties as relatively positioned elements. To do this inside of the current container or column, this parent container cannot be positioned static.

Element that are positioned absolutely are taken out of the flow, taking up no space and not influencing the position of the other elements. Usually the z-index property is increased to make sure the element is visible on top of the other element. This is how dropdown menus are frequently created and illustrated in the third row. All types of cool stuff can be created with absolute positioned elements.

An element with a fixed position uses the viewport (browser window) as its coordinate system. This means it always stays at the exact same position, also when the page is scrolled.

Static
Static
Static
Static

Static
Relative
Static
Static

Static
Absolute
Static
Static

Block

Most elements in the app are displayed as block by default. This means the elements they will stack on top of each other vertically.

More Layout Controls

In addition to items placed in a stacked position, Display inline or inline-block can be used to place them next to each other.

1.Block
Even though there’s room, this container ‘blocks’ the next element from being positioned next to it.
2. Inline-block A
Floated elements allow other floated elements next to them. This element is floated left.
2. Inline-block B
This ‘next’ element is floated left as well.

Buttons and text-links are displayed as inline-blocks by default. Inline-blocks can not be centered using auto value for the margins. This can be done by setting the text-align property of the parent container or container to center. The example below shows this for the two inline-blocks.

The inline value works similar to inline-blocks but the element looses its height and width. This is not recommended for elements that contain other elements.

The Display none value is used to hide or show element under specific circumstances. One example would be to not show an illustrative element on small screens. Another example are elements that only appear following user interaction — modal dialogs and larger mobile navigations are usually only visible following the click of a button.

The elements of (un) ordered lists are displayed as list items. The remainder of the possible values relates to the use of tables. Because of their ‘width requirements’ tables can be a bit of an issue in a responsive design. One of the approaches would be to build a Flexbox Table — detailed guide can be found here.

The Float was originally intended for text wrapping around other elements such as pictures. Simply set Float to right for the image and the paragraph will wrap around it. When the image is increased in size or replaced by a larger one, the text automatically adjusts and reflows around it.

By default elements are not floating and behave as blocks. Adding a float will place these blocks next to each other, if space permits.

The Clear is used in conjunction with floats. It can used be to move down (clear) the element following a floating element. Below you find a little example of the described behavior.

Floats work really well for many other layout constructs as well, including building an entire responsive grid system. However, they also come with a few peculiarities related. One of them can be seen at viewports widths below 440px — the Float C box will ‘float’ under B instead of A.

The new CSS Flexbox Module provides a superior method for aligning, ordering, sizing and positioning elements. Yup, it can do all of that and therefore is increasingly being used instead of floats. Setting the Display control to Flex for a Column or Container will make all elements inside flex-children. These children will then listen to the flex settings of the parent, but can also get some individual flex styles.

1. No float
Even though there’s room, this container ‘blocks’ the next element from being positioned next to it.
2. Float A
Floated elements allow other floated elements next to them. This element is floated left.
2. Float B
This ‘next’ element is floated left as well.
2. Float C
This element is also floated, but without enough space it will stack.
3. Floated and Cleared
This element is floated, but when ‘cleared' it will stack.

Z-Index, Overflow, and Vertical Align

When elements overlap, the Z-index determines which one covers the other. An element with a higher z-index covers an element with a lower one.

Z-index 1
Z-index 2

When a container has a specific height, there might not always be enough room for all the content to be displayed. With Overflow you can specify what needs to happen in that case. The content can be clipped or be allowed to overflow, which might impact elements below the container. The parent container can also be instructed to render scrollbars.

Specific Height

Vertical-align controls how inline elements are lined up vertically. The default value is baseline, which aligns the baseline of the element with the baseline of its parent.

The most common custom values are top, middle and bottom. The effect is shown in the examples below.

Placeholder Picture

Stellar designs. Visually. CoffeeCup.

Placeholder Picture

Stellar designs. Visually. CoffeeCup.

Placeholder Picture

Stellar designs. Visually. CoffeeCup.

Please note that this CSS control does not allow you to vertically center an element within another element. Flexbox would be the tool of choice for that.

Additional Resources

Multi-Column Layout

The CSS multi-column layout is mostly thought of as a way to create print-inspired text columns. However, it's a very versatile tool that extends to other bigger and smaller areas of layout creation — it can be applied to containers as well as single text elements.

As an example, this is a single paragraph using the multi-column settings. Whenever there's enough room to divide the text over two columns that are (at least) 220px wide, the browser will do so. If this paragraph shows as a single column, it means that there was not enough room for two 220px columns. The cool thing is that the text automatically flows between the columns ‚ when text is added or text flows due to width changes — to create (approximately) the same height columns.

Count and Width are the most powerful tools. They control whether and how many columns will appear. Obviously, the Count sets the number of columns to a specific number.

The Width determines the minimum desired column width. If column-count is not also set, then the browser will automatically make as many columns as fit in the available width. Otherwise the browser will make columns of the specified width, with a maximum as defined by the Count.

Styles Panes

The tools for creating cool multi-column layouts.

The other controls enhance this core feature. The Gap let's you specify the space between the columns. A line can be drawn between the columns with the Rule control. The width, style and color can be specified as well.

When the multi-column is used on a container, elements inside can be instructed to span across all columns of the layout. Content before and after the element is still automatically balanced across columns before and after the element appears.

Multi-column layout settings are not limited to text and can be applied on parent containers as well. In the example below there's a bunch of cards that are flowing between different columns and for which the column count changes depending on the display width.

Please note that in some browsers a tiny overflow effect can be visible at certain widths.

Column-span

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

This element spans both colums. The typographic possibilities are enormous! Adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Additional Resources

Direction & Writing Mode

These controls allow you to which way text and content is positioned. It opens the door for displaying content in cool ways.

Writing Modes

Setting the Direction sets how the content  is layed out. The default is Left to Right (LTR) but you can also choose Right to Left (RTL). This is helpful when using languages that are written RTL.

Writing Mode allows you to change text orientation. Flip the text Horizontal or, like the example below, make it flow Vertically. Adjusting the Orientation of content is possible too to Mixed or Upright.

Writing Modes
Placeholder Picture

Dimensions

The exact number of controls on the dimensions pane depends on the Element Type. On the right the controls for the image element are shown. Containers, for example, have a larger selection of dimension controls. Together with the ability to use a specific unit of measurement for each control, amazing layouts and effects can be created.

The width and height controls, including the minimum and maximum, work on the content area of an element. The content area is the part inside of the padding, border, and margin of the element.

The Max-width tells the browser that an element can never become wider than the specified value. The Min-width does the contrary (and will override the Max-width setting) — it specifies a minimum for the width of an element. The height controls do the same for the height of an element.

Dimension controls and length units.

Dimensions

The Padding controls the space between the content area of the element and the border. The space the padding takes up is part of the element and, for example, gets the same background color. The arrows denote where the padding will be applied, on the top, right, border or left side of the content area respectively.

Margin is the space between element. If an element is placed inside another element, the margin will push the (child) element away from the border of the parent element. A margin can also be a negative value.

One additional thing to know about Margin is that is can also be used to center elements within the parent container. Giving both the left and right margins the auto value will do the trick. This value is available by clicking on the unit switch dropdown.

The same dropdown can be used to change the value type the dimension is specified in. Dimensions can be set in absolute pixel (px) values, or in relative values such as a percentile. Let’s look at that — how length can be defined in CSS — in a little more detail.

Dimensions Length in CSS

Pixels used to be a value that is normalized (the same) across devices and displays, but with the different new high resolutions screens that increasingly isn't true anymore. A pixel defined in CSS is now not necessarily the same as the pixels used by a device. Although an interesting topic, this is beyond the scope of this document.

When a dimension is specified in a percent, the allotted space is calculated relative to the value of the parent element. This can be seen in the example below, the percent bar will under all circumstances take up half of the grey column.

The vh and vw are two interesting units that are relatively new to the table in terms of good browser support. The first unit stands for Viewport Height and assigns space relative to the height of the browser window. It can, for example, be used to create a cool effect with a background that takes up the full screen. This approach has been used in the Wave Weapons theme.

In the example below the width of the Viewport height bar is set relative to the height — when changing the height of the app (or browser window) you will see the width of the bar change accordingly.

The vw unit works the same, but is based upon the width of the viewport. The main use case is viewport based typography — the font can grow or shrink depending on the available space. The Wave Weapons theme showcases this as well. For dimensions this unit can be used to, for example, split screen design.

The em and rem units allocate space relative to font size. This is (almost) always 16px for both units. However, a website visitor could set his default font size at a higher (or lower) value, causing the em and rem based dimensions to change with it.

Control a responsive design pixel values are mainly used for minimum and maximum width settings (if any) and for defining margins and paddings. For the default Width specification the auto and percent values are most common.

The vmin and vmax values are whichever is smaller respectively larger of either the vh or vw values. This can come in handy but is currently not supported by all browsers.

Pixels: 200px
Percent: 50%
Viewport width: 25vw
Viewport height: 30vh
Relative font-size: 20em
Relative to root font-size: 20rem

Additional Resources