UPDATE 27-08-2024

Much of the instructions in this blog can now be more easily accomplished using SiteFarm's Layout Builder system.

UPDATE 03-09-2022

Layout Columns is now a web component so the internals are now hidden away in a Shadow DOM. So if you want to style the internals you should use CSS ::part(). So coloring the background now looks like:

.custom-fwb::part(base) {
    background-color: #022851;
    color: #fff;
}

 

 

The comprehensive value in this article is found in the video tutorial, please watch Single Column Layouts Part 1 and 2 to get the full value of this article. The videos have been embedded at the top of this page for quick access, but you will find useful code snippets farther down the page to help you duplicate the features from the tutorial.

Jump to code snippets

What to Expect From this Tutorial

Prerequisites to Doing Advance Page Design

In the videos I show how to duplicate some of the layouts and components found on the UCDavis.edu home site. That site is fully customized and managed by a team with both development and design professionals. You can duplicate much of what you see using the tools in SiteFarm, but you will need some beginner to intermediate HTML and CSS skills to pull off these type of layouts.

To learn more about HTML and CSS go to W3 Schools Website

• Basic HTML training
  • https://www.w3schools.com/html/default.asp
• Basic CSS training
  • https://www.w3schools.com/css/default.asp

Design Perspective

We also talk about the design decisions that go into making such great layouts as those seen on the main UC Davis webpage and why it is so successful. Once you know why it looks good, you can apply those principals to your own page designs.

• Optimal Line Lengths
  • https://baymard.com/blog/line-length-readability
•  Visual Rhythm
  • Alternating dark and light fields going down the page is a hallmark on single column, edge to edge, page design.
• Balance
  • Consistency in alignment of text and images
  • Visual appeal of odd number of columns in a row

Components Addressed

• Hero Banner
• Link Grid/Priority Links/Vertical Focal Links
• Centered Teaser (Basic Block)
• Full Width Custom Block (Basic Block)
• Ranking Block (Basic Block)
• Full width end of page graphic (Basic Block)

The highlights being how to use the Basic Block to create components like these:

Accessibility Responsibility

When you start building websites, especially for UC, you take on the responsibility of making sure everyone can access and consume your content.

• Check your colors
  • https://webaim.org/resources/contrastchecker/
• Check mobile
  • https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode

Tutorial Code Snippets

Custom Full Width Block

As explained in the tutorial, the .custom-fwb and .custom-fwb__body class names will depend on what you name your custom layout classes.

Rankings Block

Here is the code used in the tutorial to center a weighted underlined block title.

Footer Graphic Block

And finally here is the code used in the tutorial to eliminate the white space between our end of page graphic and the footer.