JWS Docs / JWS Styling / JWS Style Patterns

Styling Your Share Links Page

Now we have our LinkShare HTML page all done we need to add some CSS styling to control the visual layout, after that you can add your company branding, or simply make the page your own.

We are going to be showing you two different options for styling your page one will use the JWS Stylesheet and the other we will be writing our style from scratch using CSS Grids.

Whichever way you choose, the aim with both is to style the HTML page contents into a layout that looks like this.

After you have the basic page styled you might like to continue with some of the additional pattern options (coming soon!) which will enable you to - style your links into cards and add icons, images, pop-up info panels, buttons and more...

JWS Template Stylesheet

If you have chosen to use our template stylesheet either in a new Github repository or by copying and saving a copy locally, you'll be pleased to know that most of the layout work is already done for you, so we now only need to tweak and add a few lines of code to make our page layout complete!!

The body of our page is controlled by CSS grid with the header and footer being told to auto size to the contents inside them, and the main to take up any remaining free space:

body {
    display: grid;
    grid-template: auto 1fr auto / 1fr;
}

Each of these elements then control the contents within them using CSS Flex (Flexbox). Its with the flex controls on these elements that we will need to make a few changes, so lets get started

Header Section

Well this is the easiest of sections to complete, as the stylesheet's flex header styling already does for us what we want our header's elements to do. By centering the contents of our bio in a column. So we don't actually need to make any changes to our stylesheet yet.

header {
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1 {
    text-align: center;
}

Main Section

If we preview what the page looks like at the moment, we'll find that the list of links we added to the main are currently inline across the page not in a column. So we need to change the direction of the main by changing its flex-direction value to be column instead of row, and by adding an align-content property with the value of center, to center the content within the page.

main {
    grid-column: 1 / 2;
    grid-row: 2;
    display: flex;
    flex-direction: row; /* CHANGE THIS VALUE TO COLUMN */
    flex-wrap: wrap;
    margin: 0;
    padding: .5rem 1.5rem;
    justify-content: space-evenly;
    gap: 2rem;
    align-content: center; /* ADD THIS PROPERTY & VALUE TO CENTER CONTENT IN PAGE */
}

Footer Section

The footer section is another quick change, like with the main we can see that the footer contents are in a line. These are again being controlled by the flex-direction property on the footer, so we need to change its value from row to column.

footer {
    grid-column: 1 / 2;
    grid-row: 3;
    display: flex;
    flex-direction: row; /* CHANGE THIS VALUE TO COLUMN */
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: center;
    padding: 1rem 0;
    gap: 2rem;
    border-top: solid 1px var(--color-border-footer);
}

So that's it folks!! Those are all the changes we need to make to create our Sharelinks page using our template Stylesheet. Though this doesn't mean you can't make further changes to the background colours or font - family, sizes and colours to name just a few so go explore your creative side.

Styling from Scratch

Its a natural progression to want to start creating your own stylesheet just like you've learnt to create the HTML page from scratch, and we think this project is a perfect place to start! As the basic Sharelink page doesn't need a great amount of code to create the layout we want.

Page Head

When adding styling to a website we usually create a style.css file, which we then link to our HTML page inside the head section. Which is definitely a good route to take especially if you think future you might expand on our basic page layout so will need to add more CSS.

But if you are looking to just do the most basic of styling for now, using only the following small amount of CSS. Then an alternative route is for you to add the CSS within <style> </style> tags instead, these then sit inside the head section of your HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
            <!-- Linking a style.css file -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    header {
        display:grid;
    }
    </style>
</head>
            <!-- Writing CSS inside <style> tags -->

No matter which route you choose, the CSS we are going to write will be the same, so let's get started...!

Global Resets

Even though we are trying to write this page with the least amount of code possible there are some additional lines of code, referred to as CSS global resets, that we should include before we start adding our own.

A global reset rule is a way to ensure consistent baseline styling across browsers. It lets whatever browser is being used know that it needs to follow and obey, a particular rule and behaviour, or reset the value of a property to zero. Rather than use it's own or the CSS default rules and settings.

For example the box model rule box-sizing: border-box; makes sure a child elements width, height, padding and border sizes, don't add-up and overflow the size of its containing parent. If we also add the universal selector * symbol to the box model rule, it will then be applied to all elements of a page.

*, *::after, *::before { 
    box-sizing: border-box; 
} 
html {
    margin-inline: 0;   /* zero reset width wise */ 
    margin-block: 0;    /* zero reset height wise */
}

On the body is where we need to set our:

font-family We are using what is referred to as System UI font which means our website does not have to worry about hosting or users downloading any fonts, as do many other companies such as GitHub. There are other System font options available, on our Extras page you will find a link to the Modernfontstacks website which gives you other options.

font-size the baseline all other font sizes in the page/website will be calculated from this value.

line-height this controls the spacing between lines of text such as paragraphs and headings.

min-block-size, defines the minimum size of an element's block dimension, in horizontal writing modes this refers to the height, in vertical writing modes it refers to the width. The vb unit stands for Viewport Block it represents 1% of the viewport's block dimension, so 100vb would be equal to 100% of the viewport's block dimension (the height in most cases).

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Segoe, Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    min-block-size: 100vb;
    margin-inline: 0;
    margin-block: 0;
}

Images by default are inline elements so are affected by the line-height set on the body of the page, so resetting them to be block elements will stop mysteriously added space appearing around them. Also setting a max-width will prevent an image that is larger than its containing element to overflow it.

img, picture, video, canvas, svg {
  display: block; 
  max-width: 100%;
}

Paragraphs often have the habit of wrapping the last word onto a line by itself by using the text-wrap value : pretty; we can prevent this. Also by adding a word-wrap value : break-word; will prevent long words overflowing its containing element, and a added bottom margin will make sure no element is ever too close to the bottom of your text making for easier reading.

p {
    margin: 0 0 .5rem; 
    text-wrap: pretty; 
    word-wrap: break-word;
}

Headings can also sometimes wrap oddly so to help keep them more balanced we use the text-wrap value : balance;, we can also add a small bottom margin and word-wrap here like we did for the paragraphs.

h1 {
    margin: 0 0 .5rem; 
    text-wrap: balance; 
    word-wrap: break-word;
}

Creating our layout

Now we have the global resets in place, we can start adding the code we want to use to control the layout of our page elements.

If you are viewing the rendered HTML page (e.g. using Codeswing) you will see that so far, the page contents are currently displayed as a block in the top left corner of your screen. As we progress you will be able to see just how the CSS we write effects the layout.

Body

/* Add these Grid settings to the body */

    display: grid;
    grid-template: auto 1fr auto / 1fr;
    gap: 1rem;

This creates our first grid, which will set out the header, main and footer full width across the screen (1fr), with the header and footer elements automatically expanding to the size of their contents (auto), and the main taking any remaining space (1fr). Plus a small gap spacing between them (1rem).

If you are wanting a background colour across the whole page then you should add this here too.

The body's CSS should now look like this:

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Segoe, Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    min-block-size: 100vb;
    margin-inline: 0;
    margin-block: 0;
    display: grid;
    grid-template: auto 1fr auto / 1fr;
    gap: 1rem;
    background-color: rgb(255, 255, 255);
}

Header

We first need to position our header within the body grid using the grid-column and grid-row properties. We will start the column position at grid line 1 and end it at grid line 2 as the body is only one column width across. Then we will place it in the first grid row.

header {
    grid-column: 1 / 2;
    grid-row: 1;
}

Now its in position, we can look at how it will display the items inside it. First we want to display them as grid items, this will then allow us to use justify-contents to center everything within the header. We are going to add some padding space too, so none of the contents can touch the edge of the screen.

header {
    grid-column: 1 / 2;
    grid-row: 1;
    display: grid;
    justify-content: center;
    padding: 1rem 2rem;
}

Main

Like with the header we want to position the main first and then tell the elements inside the main to display as grid items.

main {
    grid-column: 1 / 2;
    grid-row: 2;
    display: grid;
}

The Links that were in a horizontal line spreading from the left side of the screen, are now displayed as a vertical column spread out down the left side. We are going to center the links by using justify-contents again.

We next want to contain how the links are spread out, as at the moment when the screen size increases, so will the spacing between the links. With the first one always at the start and the last one always at the end of the main. Now on smaller screens and devices this will look okay, but on larger ones not so much.

To stop this behaviour we are going to add the align-content property with the value of start, this will move the column of links up together at the top of the main section. Though now there isn't any spacing between them, other than what we get from the line-height we set. So we need to add some back, which we can do by applying a gap property with a value of our choosing.

main {
    grid-column: 1 / 2;
    grid-row: 2;
    display: grid;
    justify-content: center;
    align-content: start;
    gap: 2rem;
}

There is much more we can do to the links by way of visually styling them up, making them into buttons or card layouts, all of which we'll explore in a moment after we cover the footer layout.

Footer

Here we have a little more to do as we need to set the grid layout for the footer, and also for the contents inside the social_icon div too.

To start with we need to position the footer in relation to the body like we did with the header and main. Plus the elements inside the footer to display as grid items, and also to be centered as we did before.

footer {
    grid-column: 1 / 2;
    grid-row: 3;
    display: grid;
    justify-content: center;
}

We now need to align and space out the elements inside the social_icon div. Remember we are targeting a class selector this time, so we need to add a full stop/period before the class name. Then we want the elements inside to display as grid items.

Next we are going to use the grid-auto-flow property. This controls how items are automatically placed inside a grid container, without using explicit placement rules such as grid-row or grid-column, and determines the direction in which the grid items are laid out too e.g. columns or rows.

.social_icon {
    display: grid;
    grid-auto-flow: column;
}

If you have more grid items (or icon links in this instance), than would sensibly fit (or look good) across the parent container. Then you can define how many columns across there are, by adding the property grid-template-columns: with as many columns as we want or need in the value e.g. repeat(3, 1fr);. Once the limit of columns is filled up, then the next item will wrap around and start a new row of columns.

Styling

Now we have our page contents all spaced out and centered we can next look at ways to visually style up our links and start adding your own identity to the page.