JWS Docs / JWS Styling / JWS Styling Extras

Jasmine Website Starter CSS Styling Extras

CSS Styling Extras is a collection of CSS tips and additions, specifically aimed at usable properties within our JWS template CSS file.

We plan to add more code snippets and tips to this page over time, please feel free to suggest any useful additions.

Navigation Positioning & Spacing

In the Next Steps part of our docs we introduce you to navigation by adding a <nav></nav> element to the <header></header> which contains two nav items (page links) within an unordered list <ul></ul> that are currently spaced evenly in the space the nav takes up.

To start making style changes you first need to open your code editor and locate the style.css file within the CSS folder and open it.

The selector nav ul that styles / controls the ul can be found on line 358 in the style.css file.

It currently has a flex property of justify-content which has a value of space-evenly. Changing the value of the justify-content property will change the positioning of the nav items.

These properties are available to us as the nav ul element is set to display: flex;.

nav ul {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    flex: 1;
    justify-content: space-evenly; /* Distribute items evenly. Start, in-between, and end gaps have equal sizes */
}
/*-- alternative values --*/
    justify-content: space-between; /* Distribute items evenly. The first item is flush with the start, the last is flush with the end */
    justify-content: space-around; /* Distribute items evenly Start and end gaps are half the size of the space between each item */
    justify-content: center; /* Pack items around the center */
    justify-content: flex-start; /* or start */ /* Pack items or flex items from the start*/
    justify-content: flex-end; /* or end */ /* Pack items or flex items from the end */

space-evenly

The items are evenly distributed within the nav container along the main axis. The spacing between each of the items, the start edge and the end edge, will all be exactly the same.

space-between

The items are evenly distributed within the nav container along the main axis. The spacing between each of the items is the same. With the first item flush with the start edge, and the last item flush with the end edge of the nav container.

space-around

The items are evenly distributed within the nav container along the main axis. The spacing between each of the items is the same. With the space before the first and after the last items equalling half of the space between the items.

center

The items are flush together at the center of the nav container along the main axis.

flex-start / start

The items will be grouped together from the starting edge of the nav container along the main axis.

flex-end / end

The items will be grouped together at the ending edge of the nav container along the main axis.

Adding Gap Spacing

If you change the list items to center, start or end you may want to increase the spacing between the nav items also. We can do this by adding the property gap this adds a column space with a added length value e.g 1rem.

nav ul {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    flex: 1;
    justify-content: space-evenly;
    gap: 1rem;
}
/*-- alternative values --*/
    gap: 10px;
    gap: 10%;
    
/*-- add row spacing too --*/
    gap: 10px 20px;
    
/*-- or use a calc() --*/
    gap: calc(20px + 10%);