Getting Started

Getting started with Fresh is easy. Once you link Fresh to your project, and learn about all the components, you can start making an amazing website with ease!

Setting Up Fresh

Setting up Fresh is simple. There are two steps you can take to start using Fresh, depending on what you want.

Option 1: Using JSDelivr

If you don't mind using a CDN for Fresh, you can copy the code below to link the Fresh CSS and JS files. JSDelivr automatically minifies the files and serves over cache when it can, so you don't have to deal with constand loading errors.

<link type = "text/css" rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/HazelBall/Fresh/fresh.min.css">
<script src = "https://cdn.jsdelivr.net/gh/HazelBall/Fresh/fresh.min.js"></script>

Option 2: Downloading Fresh

If speed is key for you, or if you would like to customize Fresh locally, you can download Fresh via Github and add them to your website's directory as you wish.

This works great for people with large projects that want to customize colors and theming for many pages without having to manually input it in each page.

Setting up your Fresh Website

There are a few simple html elements you need to create a website using fresh. You can copy the code below for the bare requirements, and look below for more advanced options.


				  	<html>

				  	  <head>

				  	    <link type = "text/css" rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/HazelBall/Fresh/fresh.min.css">

				  	    <script src = "https://cdn.jsdelivr.net/gh/HazelBall/Fresh/fresh.min.js"></script>

				  	  </head>

				  	  <body>

				  	    <div class = "main">

				  	      <!--Add Components Here-->

				  	    </div>

				  	  </body>

				  	</html>

Basic Components

Fresh offers styling to many components, both in basic and advanced forms, allowing you to create the perfect website. All elements can be styled differently per element or as a whole.

Navigation

Top Navigation

Nav Title Item 1 Item 2 Item 3

Fresh has two top navigation styles: fixed and sticky. You can use either of these in order to create a functional top navigation.


						<div class = "nav top"></div><!-- Fixed Top Nav -->

The default top navigation is fixed, and it doesn't matter where it is placed in the DOM.


						<div class = "nav sticky"></div><!-- Sticky Top Nav -->

The sticky navigation will stay within the DOM until it reaches the top, and should be placed accordingly.

Side Navigation

Side navigation, which also doubles as part of the mobile navigation, can be used as your default navigation or as a sub-navigation, when combined with a top nav


						<div class = "nav side"></div> <!-- Fixed Side Navigation -->

You can also add the mobile-only class to use the side navigation solely as a mobile navigation, or the no-mobile class to create different nav designs for mobile and desktop experiences.

Navigation Components


						<div class = "nav">

							  <img class = "icon" src = "example.png"/>

	  					  <a class = "title">Nav Title</a>

	  					  <a class = "item">Item 1</a>

	  					  <a class = "item disabled">Item 2</a>

	  					  <a class = "item">Item 3</a>

	  					  <div class = "dropdown">

  							    <a class = "title">Dropdown</a>

  							    <div class = "items">

  								      <a class = "item">Item 1</a>

  								      <a class = "item">Item 2</a>

  								      <a class = "item">Item 3</a>

  							    </div>

  						  </div>

						</div>

Nav Titles - Just add a paragraph or anchor tag with the title class to use
Nav Icons - Used instead of or with titles with the icon class
Nav Items - All links, except the title, use the item class
Disabled Nav Items - You can use the disabled class with nav items to use
Dropdowns - Dropdowns work in both top and side navigation. Just follow the design of them in the preview to create them
Dividers - On side navigations, you can use the <hr> tag to divide the nav into sections

Containers

Main Component

The main component is used to contain elements in relation to navigation and modals. You can add the nav-top and nav-side classees to create margins for the respective navigations, and the m-nav-top class for websites with mobile navigation but no default top navigation.

<div class = "main"></div>

Container Component

The container component is used for most items, to divide them into sections. This makes editing and design look good. The container also keeps the padding for all elements, instead of the main, so that items you want to span the entire main content area can and everything else keeps the normal padding.

<div class = "container"></div>

Header

The header component can be used for most headers, and is easy to implement.

<div class = "header primary"></div>

Hero

The hero component can be used for larger headers and banners, preferable with large text headings inside.

<div class = "hero primary">
  <h1>Hero Example</h1>
</div>

Hero Example

Columns

Columned Items

Any element can be placed into responsive columns. Each column distributes width evenly among each item.


						<div class = "columns"><!--column parent element-->

							  <div class = "column"><!--responsive column-->

								    <!--Insert Whatever you want here-->

							  </div>

						</div>

Just add the column element for each column you want. Fresh will do the rest!

Utility-based Columns

Along with flex-based columns, you can used utility-based columns for floated objects, using the provided utility classes

Cards

Cards can be used in many different ways. Using the four main components, you can create any type of card you want.

Add Content Here.

Add Content Here

Lots of content here. Just type whatever you want, really. Cards will change height depending on the content inside. Pretty standard stuff, if we're being honest. Lorem ipsum text is boring.

The header and footer are optional, and you can use any combination of the four components to create a nice card, profile, or more.


						<div class = "card"><!--Card Container-->

							  <div class = "header">

								    <!--Add some Heading Stuff Here-->

							  </div>

							  <div class = "content">

								    <!--Insert Content Here-->

							  </div>

							  <div class = "footer">

								    <!--Add some footer stuff here-->

							  </div>

						</div>

Buttons

Buttons are fundamental to any website or web app, and Fresh has a lot of them. There are also many different utility classes for buttons to help style them exactly how you want!

Button Disabled Button Colored Button
Default Button Rounded Button Pill Button

Sizing classes also work with buttons.

Small Button Normal Button Large Button

Buttons can work with both flex- and utility- columned buttons.

Flex-columned Button Flex-columned Button

Utility-based Button Utility-based Button Utility-based Button

<a class = "button" href = "#">Example Button</a>

See the utilities section for more information on some of the classes you can add to customize your buttons.

Tethers

Tethers are combinations of trigger elements and togglable elements, such as alerts, modals, and more. These elements are automatically "tethered" by fresh's JavaScript and a pair of attributes and id's, so you don't have to code anything to connect them.

Tether Basics

To create a tether, all you need is two specific attributes. Add a custom id to the togglable element (modal, alert, etc.) and a data-tether attribute to any object you want to open it with. The example below creates a modal with a button both inside and outside to toggle the model.


					<a class = "button" data-tether = "modalExample">Open Me!</a>


					<div class = "modal" id = "modalExample">

						  <!-- Add whatever content you want here -->

						  <a class = "button" data-tether = "modalExample">Close Me!</a>
					</div><!-- Use the ID for opening and closing specific modals -->

Modals

Modals are a necessity for web apps, whether to log in, show information, or just look at cat pictures with more details. Good thing they're easy to create and set up in Fresh!

Open Small Modal Open Normal Modal Open Large Modal


						<a class = "button" data-tether = "modalExample">Open Me!</a>


						<div class = "modal" id = "modalExample">

							  <!-- Add whatever content you want here -->

							  <a class = "button" data-tether = "modalExample">Close Me!</a>
						</div><!-- Use the ID for opening and closing specific modals -->

You can also add a specific trigger anchor inside of the modal to add text in the top right of the modal to close it. You can use × to create a perfect cross to close it.

<a class = "modal-trigger" data-tether = "modalExample">×</a>

Alerts

Default Alert Warning alert


						<a class = "button" data-tether = "alertExample">Open Me!</a>


						<div class = "modal" id = "modalExample">

							  <!-- Add whatever content you want here -->

							  <a class = "button" data-tether = "modalExample">Close Me!</a>
						</div><!-- Use the ID for opening and closing specific modals -->

You can also add the Warning class to alerts to change the color to red.

Accordions

Accordions, like the ones used for this section, are comprised of two elements, the accordion and the optional accordion-header. These two can be seperated, and the accordion can be used without it entirely to create expanding pages or information.


						<a class = "accordion-header" data-tether = "accordionExample">Open Me!</a>

						<div class = "accordion" id = "accordionExample">

							  <!-- Add whatever content you want here -->

						</div>

Custom Tethers

The best part about tethering is it supports custom elements. Any element with the data-tether attribute can activate an element with the same ID. All you have to do is style the element and a state for it's activated state.


						.example {

							  /*Normal inactive styling*/

						}

						.example.activated {

							  /*Active styling*/

						}

Forms

Inputs (excluding radio and checkboxes), textareas, selection menus, and buttons can all be styled using Fresh.


						<input  placeholder = "Input Element">

						<textarea  placeholder = "Textarea Element"></textarea>

						<select id = "country" name = "country">

							  <option value = "au">Australia</option>

							  <option value = "ca">Canada</option>

							  <option value = "usa">USA</option>

						<select>
						<div class = "columns">

							  <button class = "column" type = "submit">Submit</button>

							  <button class = "column" type = "submit">Submit</button>

						</div>

Footers

Footers are designed the same way as columns, just with special stylings to headings and links to make them look good.


						<div class = "footer">

							  <div class = "column">

								    <h1>Footer Title</h1>

								    <a class = "item">Link 1</a>

								    <a class = "item">Link 2</a>

								    <a class = "item">Link 3</a>

							  </div>

							  <div class = "column">

								    <h3>Footer Subtitle</h3>

								    <a class = "item">Link 4</a>

								    <a class = "item">Link 5</a>

								    <a class = "item">Link 6</a>

							  </div>

						</div><!-- Footer Container -->

You can also add empty columns before and after to push columns to the left and right. This website uses three columns, two filled and one blank.

You can add as many columns as you want, and the styling for the footer can allow both normal footers as well as fat footers.

Utilities

Spacing and Sizing

.flush: removes padding on boths sides
.flush-left: removes padding on left side
.flush-right: removes padding on right side

.small: decreases size of certain items
.large: increases size of certain items

.full: utility full width
.half: utility half width
.third: utility third width
.two-thirds: utility two-thirds width
.fourth: utility fourth width
.three-fourths: utility three-fourths width

Text Modifications

.text-small: decreases text size for element and all children
.text-large: increases text size for element and all children

.text-weight-300: changes font-weight to 300, or light
.text-weight-400: changes font-weight to 400, or normal/book
.text-weight-700: changes font-weight to 700, or bold
.text-weight-800: changes font-weight to 800, or extra bold

.text-primary: colors text in relation to primary text color
.text-secondary: colors text in relation to secondary text color
.text-accent: colors text in relation to accent text color
.text-inv-primary: colors text in relation to background primary color
.text-inv-secondary: colors text in relation to background secondary color
.text-inv-accent: colors text in relation to background accent color

Other

.square: removes all border-radius
.rounded: sets border radius on all sides to 10px
.pill: creates equal border radius' on sides

.spacer: creates a space within the dom, can be controlled with .small and .large

Alignment Utilities

.left: floats element to the left
.right: floats element to the right
.clear: clears left and right
.clear-left: clears to the left
.clear-right: clears to the right

text-left: aligns text to left
text-right: aligns text to right
text-center: aligns text in center
text-just: justifies text

Coloring

.primary: colors text and background in relation to primary color
.secondary: colors text and background in relation to secondary color
.accent: colors text and background in relation to accent color
.inv-primary: colors text and background with opposing primary colors
.inv-secondary: colors text and background with opposing secondary colors
.inv-accent: colors text and background with opposing accent colors

.color-primary: colors background in relation to primary color
.color-secondary: colors background in relation to secondary color
.color-accent: colors background in relation to accent color
.color-inv-primary: colors background in relation to primary text color
.color-inv-secondary: colors background in relation to secondary text color
.color-inv-accent: colors in relation to accent text color

Customization

Almost every color can be customized within Fresh to make your website more unique. And it's easier than customizing colors in other frameworks like bootstrap, too.


					<head>

						  <!-- Add whatever content you need here -->

						  <style>

						    :root {

						      /*Add whatever color changes you want here*/

						      --color-accent: black;

						    }

						  </style>

					</head>

Change Theme Reset Theme

There are currently 6 main colors and 24 minor colors to customize.

Major Colors

--color-primary

--text-primary

--color-secondary

--text-secondary

--color-accent

--text-accent

Minor Colors

--nav-color

--nav-text

--button-color

--button-text

--blockquote-border

--blockquote-color

--blockquote-text

--card-header-color

--card-header-text

--card-color

--card-text

--card-footer-color

--card-footer-text

--form-color

--form-text

--accordian-header-color

--accordian-header-text

--modal-color

--modal-text

--alert-color

--alert-text

--table-text

--footer-color

--footer-text

Advanced Features

Popup Modals/Alerts

Popup Modals

As shown on one of the demos for Fresh, you can easily create popups based on time or mouse positions easily with JavaScript or JQuery and the tether functions.


			var mouseX = 0;

			var mouseY = 0;

			var popupCounter = 0;


			document.addEventListener("mousemove", function(e) {

			  mouseX = e.clientX;

			  mouseY = e.clientY;

			});


			$(document).mouseleave(function () {

			  if (mouseY < 100) {

			    if (popupCounter < 1) {

			      document.getElementById("modalPopup").classList.add("activated");

			    }

			    popupCounter ++;

			  }

			});

Dark Mode

As dark mode becomes more and more popular, browsers and devices are starting to use the Prefers-color-scheme variable with CSS for custom styling in dark mode. Fresh also uses this. However, not all devices use this variable, so having your own version can help make it easier for those users.

Below is a snippet of JavaScript you can add to buttons to change the color scheme to dark mode.


						var dark = false;

						document.getElementById('dark-mode').addEventListener('click', function()

						  {

						  if(!dark) {

						    document.documentElement.style.setProperty("--color-primary", "#202020");

						    document.documentElement.style.setProperty("--text-primary", "#d0d0d0");

						    dark = true;

						  }

						});

						document.getElementById('light-mode').addEventListener('click', function()

						  {

						  if(dark) {

						    document.documentElement.style.setProperty("--color-primary", "white");

						    document.documentElement.style.setProperty("--color-accent", "#43d859");

						    dark = false;

						  }

						});

Multiple Navs

When using two or more navigations, or using different styles for mobile and desktop, it can be confusing to understand how to go about these. However, we have made simple navigation systems for you to use.

Using the Side and Top Navigations

Using two navigations, especially side and top navs, is easy with fresh. Just add one of three nav utility classes in order to make sure everything works as intended.

Overlay Side and Top Navs

If you want to overlay one nav over the other, you can use the nav-priority class to make sure one stays on top.


						<div class = "nav top nav-priority">

						  <!--Insert Top Nav Content-->

						</div>

						<div class = "nav side">

						  <!--Insert Side Nav Content-->

						</div>

Offset Side or Top Navs

If you want to offset one navigation from the other, you can use the nav-top or nav-side classes to acheive this, depending on which nav you are offsetting.

If you want to offset the top navigation, use this code:


						<div class = "nav top nav-side">

						  <!--Insert Offset Top Nav Content-->

						</div>

						<div class = "nav side">

						  <!--Insert Normal Side Nav Content-->

						</div>

Likewise, if you want to offset the side navigation, use the following:


						<div class = "nav top">

						  <!--Insert Normal Top Nav Content-->

						</div>

						<div class = "nav side nav-top">

						  <!--Insert Offset Side Nav Content-->

						</div>

Accounts

When building web apps, users and accounts are a must. Fresh offers basic account styling for side navigation, to help you create that perfect web app.