Alflora logo
Styleguide

Menu

Typography

The following headings are available by using the <h1> through <h5> tags

Heading 1

(<h1>Heading 1</h1>)

Heading 2

Heading 3

Heading 4

Heading 5
You can also give every single tag classes to give them styling such as:

Heading 1

(<h1 class="bold">Heading 1</h1>)

Heading 2

(<h1 class="red">Heading 1</h1>)

And combinations are of course also possible:

Heading 3

(<h1 class="no-margin-top red bold underline">Heading 1</h1>)

Different classes

Different typography classes that can be applied:
Class Example
.bold I'm bold
.semibold I'm semibold
.light I'm light
.blue I'm blue
.red I'm red
.brown I'm brown
.strikethrough I'm strikethrough
.italic I'm italic
.underline I'm underline
(This table can be made by giving the table element a class of .table and .striped)

<table class="table striped margin-top">
  <tr>
    <td>Item 1</td>
    <li>Item 2</li>
  </tr>
</table>

Lists

Using the class .checklist on the <ul> tag the list items will have checkmarks in front of them.

  • Item 1
  • Item 2
  • Item 3
<ul class="checklist">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Font sizes

There are different classes for font sizes too. These can be applied to all sorts of elements. Below a table with examples

Class Example
.size-xxs Lorem ipsum dolor (10px)
.size-xs Lorem ipsum dolor (12px)
.size-s Lorem ipsum dolor (14px)
.size-m Lorem ipsum dolor (16px)
.size-xm Lorem ipsum dolor (18px)
.size-xxm Lorem ipsum dolor (22px)
.size-l Lorem ipsum dolor (28px)
.size-xl Lorem ipsum dolor (32px)
.size-xxl Lorem ipsum dolor (40px)

Buttons

You can also create your own buttons using  anchor  tags and different button classes. The  href  property on the anchor tag can be used to link to a specific page. For example, the orange button links to http://www.google.com. When you set a "#" as the href value, it does not go anywhere.
Buttons Code
I'm a button <a class="button orange" href="http://www.google.com">I'm a button</a> (the  target="_blank"  causes the link to open in a new window!)
I'm a button <a class="button blue" href="#">I'm a button</a>
I'm a button <a class="button green" href="#">I'm a button</a>
I'm a button <a class="button transparent transparent-green" href="#">I'm a button</a>
I'm a button <a class="button transparent transparent-blue" href="#">I'm a button</a>
I'm a button <a class="button transparent transparent-orange" href="#">I'm a button</a>

Layout

For the layout of this website there is a very big flexbox grid with many, many options. The complete documentation can be found here: Flexgrid. But down here is a small concise explanation of how it works.

The grid system is based on a 12-column grid. Meaning there are a total of 12 columns within each container. Using classes you can define how many columns an item should take up.

Titel 1

Euismod semper. Donec sed odio dui. Nullam quis risus eget urna mollis ornare donec sed odio dui.

Titel 2

Euismod semper. Donec sed odio dui. Nullam quis risus eget urna mollis ornare donec sed odio dui.

Titel 3

Euismod semper. Donec sed odio dui. Nullam quis risus eget urna mollis ornare donec sed odio dui.

Titel 4

Euismod semper. Donec sed odio dui. Nullam quis risus eget urna mollis ornare donec sed odio dui.

    <div class="row">
    	<div class="col-xs-12 col-md-6 col-lg-3">
    		Col #1
    	</div>
    	<div class="col-xs-12 col-md-6 col-lg-3">
    		Col #2
    	</div>
    	<div class="col-xs-12 col-md-6 col-lg-3">
    		Col #3
    	</div>
    	<div class="col-xs-12 col-md-6 col-lg-3">
    		Col #4
    	</div>
    </div>
When creating a grid, make sure there is a wrapper around all the children with the class row. This tells the page that within that container there is a grid!

The example above shows that on mobile each div should take up 12 columns (col-xs-12) (meaning the full width), on tablet 6 columns (col-md-6) and on desktop 3 columns (col-lg-3). Simply make sure that the total of columns always equals 12. For example, 3 columns x 4 divs = 12.

The full grid in action

Down here you see the full grid in action. Right now you see that I only used tablet styles, but you can add up to 3 different classes for each device. The columns do NOT need to be equal. You can have a div that takes up for example 4 columns and one next to it that takes up 8 columns.

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-2
col-md-2
col-md-2
col-md-2
col-md-2
col-md-2
col-md-3
col-md-3
col-md-3
col-md-3
col-md-4
col-md-4
col-md-4
col-md-5
col-md-5
col-md-2
col-md-6
col-md-6
col-md-7
col-md-5
col-md-8
col-md-4
col-md-12

Spacing of items.

There are two ways to align items; vertically and horizontally. Flexbox has one way to deal with both of these 'issues'.

Whenever a container has the class "row" it means that it's children are inside a grid (flexgrid). This means that you can move these children around using different classes on this container. To illustrate:

Alignment (horizontally)

Let's add classes to show how it works.

.start-xs/.start-md/.start-l

Using either of the classes of .start you can horizontally align items to the START of the parent. (As you can see down Below the white box is aligned to the start). The xs, md and l means WHEN it should do so responsive wise. If you put .start-xs and .end-l it means that on mobile and tablet it will align to the start and on desktop it will align to the end.

(I removed all the inline styling in the example below to illustrate how it works)
        <div class="row start-xs">
            <div class="box"></div>
        </div>
.center-xs/.center-md/.center-l

Same story as with the .start class now everything aligns in the middle.

        <div class="row center-xs">
            <div class="box"></div>
        </div>
.end-xs/.end-md/.end-l

Same story as with the .start and .center class now everything aligns to the end.

        <div class="row end-xs">
            <div class="box"></div>
        </div>

Alignment (vertically)

There is also vertical alignment ofcourse. This is shown below:

.top-xs/.top-md/.top-l

Below you can see two divs. There's one that's 150px high, and one that is 50px high (1/3). I've added the class .top-xs to the parent container. You can see that the big div stays unchanged, but the smaller div to the right aligns to the top.

(I left all the code I used inside the example to show you everything)
        <div class="row around-xs top-xs">
            <div style="width: 45%; height: 150px; background: blue;"></div>
            <div style="width: 45%; height: 50px; background: blue;"></div>
        </div>
.middle-xs/.middle-md/.middle-l

.middle is the equivalent of .center, instead it aligns everything vertically in the middle.

(I left all the code I used inside the example to show you everything)
        <div class="row around-xs middle-xs">
            <div style="width: 45%; height: 150px; background: blue;"></div>
            <div style="width: 45%; height: 50px; background: blue;"></div>
        </div>
.bottom-xs/.bottom-md/.bottom-l

.bottom is the equivalent of .end and aligns everything to the bottom, as you can see in the example below.

(I left all the code I used inside the example to show you everything)
        <div class="row around-xs bottom-xs">
            <div style="width: 45%; height: 150px; background: blue;"></div>
            <div style="width: 45%; height: 50px; background: blue;"></div>
        </div>

Distribution

As you might've seen in the previous example there is a class used that is called .around-xs. This is used to space items within a container a certain way. Below are examples.

.around-xs/.around-md/.around-l

Around is a spacing technique to give all children in a container an even amount of space.

(I left all the code I used inside the example to show you everything)
        <div style="background-color: blue; padding: 10px; height: 100px;" class="row around-xs middle-xs">
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
        </div>
.between-xs/.between-md/.between-l

Between is a spacing technique to align all children to the edge of the container (the little bit of space on the sides between the first and last square is padding on the container!

(I left all the code I used inside the example to show you everything)
        <div style="background-color: blue; padding: 10px; height: 100px;" class="row between-xs middle-xs">
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
        </div>
.flex-column-between-xs/.flex-column-between-md/.flex-column-between-l

This is mainly used for content. Imagine you have a container with content (a title, paragraph and two buttons). The title and content need to be align vertically to the top, but the buttons need to be aligned to the bottom. Then you can use .flex-column-between-xs/.flex-column-between-md/.flex-column-between-l

Fontawesome

Something that is very nice to have is FontAwesome, and that is something that is also installed on this website.

Click here to view the icons

If you click on the button you will be taken to the Font Awesome website on which you can select many, many icons. You can use these icons everywhere, including in buttons (as you can see in the button above, there's a little arrow to the right). If you click on any icon on the Font Awesome website you will see an HTML element tag.

These <i> tags have classes based on what icon they represent. For example, every icon has the class .fa to indicate it's a Font Awesome icon. Then there is the class for what icon it should be. In the mentioned case it's an address book and it looks as follows: There are many different icons that can be used for many different things. Use them inside buttons or as list item for example.

Not only can you display icons, but as mentioned in the name it is a FONT. Meaning it can have classes to change it's appearance, such as size and color. This gives you a lot of flexibility, mainly because there are so many different icons for many different purposes.

Some example icons

List icons

  • List icons
  • can be used
  • as bullets
  • in lists

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

<ul class="fa-ul">
    <li><i class="fa-li fas fa-check-square"></i>List icons</li>
    <li><i class="fa-li fas fa-check-square"></i>can be used</li>
    <li><i class="fa-li fas fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fas fa-square"></i>in lists</li>
</ul>
            

Larger icons and colored icons

fa-lg fa-2x fa-3x fa-4x fa-5x

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<i class="fas fa-camera-retro blue fa-lg"></i> fa-lg
<i class="fas fa-camera-retro red fa-2x"></i> fa-2x
<i class="fas fa-camera-retro green fa-3x"></i> fa-3x
<i class="fas fa-camera-retro blue fa-4x"></i> fa-4x
<i class="fas fa-camera-retro orange fa-5x"></i> fa-5x

Spacing

By default many elements have spacing. Heading tags for example (h1, h2, h3) have a margin top and bottom. I have added classes that you can use to either remove or limit this margin or padding.

Class Example
.no-margin This removes ALL margin on an element
.no-margin-top This removes all margin on the top
.no-margin-bottom This removes all margin on the bottom
.no-margin-left This removes all margin on the left
.no-margin-right This removes all margin on the right
.margin-top This adds (or changes) the margin on top to 15 pixels
.margin-bottom This adds (or changes) the margin bottom to 15 pixels
.margin-left This adds (or changes) the margin left to 15 pixels
.margin-right This adds (or changes) the margin right to 15 pixels
.no-padding This removes ALL padding on an element
.no-padding-top This removes all padding on the top
.no-padding-bottom This removes all padding on the bottom
.no-padding-left This removes all padding on the left
.no-padding-right This removes all padding on the right
.padding-top This adds (or changes) the padding on top to 15 pixels
.padding-bottom This adds (or changes) the padding bottom to 15 pixels
.padding-left This adds (or changes) the padding left to 15 pixels
.padding-right This adds (or changes) the padding right to 15 pixels

Widths

.full-width Gives the element the full width of the parent container
.half-width Gives the element 50% of the width of the parent container