Getting Started

Link to the ProtonSite Frontend CSS Stylesheet in your web page file, then create the elements you want with the classes below.

<link rel="stylesheet" type="text/css" href="https://www.protonsite.com/Frontend/ProtonSite-Frontend.css">

Typography

Paragraph

Headings

psf-h6

psf-h5

psf-h4

psf-h3

psf-h2

psf-h1

Text Sizes

Available text size classes are blow in the size they represent...

psf-xxsmall

psf-xsmall

psf-small

psf-normal

psf-large

psf-xlarge

psf-xxlarge

psf-xxxlarge

psf-jumbo

Available Colours

Prefix the below CSS class names with psf- for background colours, psf-text- for text colours, psf-hover- for background hover colours, or psf-hover-text- for text hover colours.

dark-grey
grey
light-grey
dark-blue
blue
light-blue
dark-green
green
light-green
dark-red
red
light-red
black
white

More colours will be added soon. Want to suggest a colour? Send it to [email protected] and receive a mention as a comment alongside the colour in the stylesheet itself!

Navigation Bars

Navigation bars are a collection of links displayed alongside each other to form a horozontal bar of links like a menu.

The most basic navigation bar you can make with ProtonSite Frontend goes like this. You create a navbar using a relevant tag (e.g. <div> or <nav>), apply the psf-bar class, then add links using the <a> tag with psf-bar-item class.

Basic Navbar Example

Basic Navbar Code Example

<nav class="psf-bar">
	<a href="#" class="psf-bar-item">One</a>
	<a href="#" class="psf-bar-item">Two</a>
	<a href="#" class="psf-bar-item">Three</a>
</nav>

You can change the colour using any of the colour classes provided or use your own colour classes.

Responsive Navigation Bars

Navigation bars that collapse on small screens and become a dropdown menu when hovered over (or tapped on for mobile devices). The responsive behaviour requires no JavaScript unlike other popular CSS frameworks, and is controlled by the psf-respond class.

When collapsed, you will see the ☰ icon.

Let's look at examples of what you can do with Navbars and ProtonSite Frontend. Resize your browser window on a computer to see it in action.

Dark Themed Navbar

<nav class="psf-bar psf-respond psf-dark-grey psf-text-light-grey">
	<a href="#" class="psf-bar-label psf-b psf-text-light-grey">Site Name</a>
	<a href="#" class="psf-bar-item psf-text-grey psf-hover-text-light-grey">One</a>
	<a href="#" class="psf-bar-item psf-text-grey psf-hover-text-light-grey">Two</a>
	<a href="#" class="psf-bar-item psf-text-grey psf-hover-text-light-grey">Three</a>
</nav>

Light Themed Navbar

<nav class="psf-bar psf-respond psf-light-grey psf-text-dark-grey">
	<a href="#" class="psf-bar-label psf-b psf-text-dark-grey">Site Name</a>
	<a href="#" class="psf-bar-item psf-text-grey psf-hover-text-dark-grey">One</a>
	<a href="#" class="psf-bar-item psf-text-grey psf-hover-text-dark-grey">Two</a>
	<a href="#" class="psf-bar-item psf-text-grey psf-hover-text-dark-grey">Three</a>
</nav>

Back to Top

Let me know your thoughts, send them to [email protected]!
Copyright © ProtonSite.com