Eden.

Icons.

Font Awesome are Eden's chosen icon set. They provide a scalable set of vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Just download the directoty and install by referencing their CSS file within the <head> of your document.

Font.

Source Sans Pro is Eden's choice of default font. It was designed by Paul D. Hunt as Adobe’s first open source typeface family. Source Sans Pro draws inspiration from the clarity and legibility of twentieth-century American gothic typeface designs.

Honourable mentions go to Lato, Raleway & PLayfair Display.

font-weight: 100;

The spectacle before us was indeed sublime.

font-weight: 400;

The spectacle before us was indeed sublime.

font-weight: 600;

The spectacle before us was indeed sublime.

font-weight: 800;

The spectacle before us was indeed sublime.

Colours.

Eden comes with 4 core built in themes, .dark, .light, .transparent and .eden. Most components by default will have the eden colour scheme but this can be easily overwitten by giving the component you want to change the appropriate class. In some cases you may be required to append !important to your CSS style to hard ovveride the property.

.light

background-color: #ececec;

color: #2f2f2f;

.dark

background-color: #2f2f2f;

color: #ececec;

.transparent

background-color: transparent;

color: #2f2f2f;

.eden

background-color: #52ae76;

color: #ececec;

Find below a selection of handpicked swatches to use witin a website along with each colours HEX value. These colours provide a nice blend to complement each other, where each swatch being suitable in a different situations.

#e8d1a5

#dda185

#ab3334

#33191a

#c0b283

#ddd1c1

#f4f4f4

#383838

#d8cdc7

#565656

#76323f

#c1a081

#161220

#233239

#984b45

#e9c87b

#bfd8d2

#fedcd2

#de744c

#deb13a

#e44e3f

#e9b000

#eb6e80

#018e97

#aab8c1

#c7d8c8

#eedac1

#cccbc6

#7ddcd4

#f63341

#f9be02

#02c8a7

#cda34f

#e8e9db

#646b49

#393e27

#4a4f6c

#98878f

#985d6f

#1a2133

#424242

#cde0cc

#ff695b

#056571

#20b58f

#eab028

#f24c4e

#1a7b34

#e1455a

#22252c

#3f324e

#c0b3a0

#f7ef6a

#93c178

#465c8b

#dfdce3

#1abc9c

#2ecc71

#3498db

#9b59b6

#34495e

#f1c40f

#e67e22

#e74c3c

#ecf0f1

#95a5a6

#16a085

#27ae60

#2980b9

#8e44ad

#2c3e50

#f39c12

#d35400

#c0392b

#bdc3c7

#7f8c8d

Sizes.

Another set of common CSS properties found in Eden are those representing size. By adding one of the appropriate classes, .tall, .short, .fat or .skinny to one of the elements listed below, it will alter the size/padding of the element in the way just specified.

  • .nav
  • .hero
  • button, .button
  • input, textarea, select, .toggle
  • .slider (only tall & short)
  • .footer (only tall & short)

Container.

The Eden container is used to hold elements for which you want to give some space to aorund the edegs. By housing these elements within a .container class, a large padding is given to the top and bottom with a repsonive margin that adjusts on either side in response to the window width. If no space is needed, a .wrapper class can be used.

.wrapper
.container
<!-- Provides a margin of either side as well as padding above and below -->
<div class="container">
...
</div>
<!-- No spacing, padding or margin -->
<div class="wrapper">
...
</div>
view raw container.html hosted with ❤ by GitHub

Grid.

The grid is a vital component in developing mobile responsive websites. We provide a 12 column fluid grid that shrinks as the viewport shrinks. The Eden grid system uses .row & .col classes. The size (how many columns they occupy) of each column can then be specified by giving it a class of that number. e.g. a column spanning 7 columns would have the class .seven.

Eden also allows users to specify common fractions indicating the amount of it's parent it spans. e.g. If you want a column to span a third of the width, give it a class of .third or if you want it to occupy five sixths, make it .five-sixths. Simple isn't it?

To alter the column layout resposnively at mobile or tablet size, just add a class of .tab-* or .mob-* respectively where * is the column size. You can also switch the orientation from .row to .col or .col to .row at tablet or mobile by using row or col in replace of the *.

Column Span
Class
Fraction Class
Tablet
Mobile
1
.one
.tab-one
.mob-one
2
.two
.sixth
  • .tab-two
  • .tab-sixth
  • .mob-two
  • .mob-sixth
3
.three
.quarter
  • .tab-three
  • .tab-quarter
  • .mob-three
  • .mob-quarter
4
.four
.third
  • .tab-four
  • .tab-third
  • .mob-four
  • .mob-third
5
.five
.tab-five
.mob-five
6
.six
.half
  • .tab-six
  • .tab-half
  • .mob-six
  • .mob-half
7
.seven
.tab-seven
.mob-seven
8
.eight
.two-thirds
  • .tab-eight
  • .tab-two-thirds
  • .mob-eight
  • .mob-two-thirds
9
.nine
.three-quarters
  • .tab-nine
  • .tab-three-quarters
  • .mob-nine
  • .mob-three-quarters
10
.ten
.five-sixths
  • .tab-ten
  • .tab-five-sixths
  • .mob-ten
  • .mob-five-sixths
11
.eleven
.tab-eleven
.mob-eleven
12
.twelve
.full
  • .tab-twelve
  • .tab-full
  • .mob-twelve
  • .mob-full
 
.col.one
 
.col.eleven
 
.col.two, .col.sixth
 
.col.ten, .col.five-sixths
 
.col.three, .col.quarter
 
.col.nine, .col.three-quarters
 
.col.four, .col.third
 
.col.eight, .col.two-thirds
 
.col.five
 
.col.seven
 
.col.six, .col.half
 
.col.six, .col.half
<div class="row">
<!-- .row immediately followed by .col -->
<!-- column will span 5/12 of width -->
<div class="col five">
...
</div>
<!-- column will span 7/12 of width -->
<div class="col seven">
...
</div>
</div>
<!-- row format on devices larger than mobile width and then column format for deviced below -->
<div class="row mob-col">
<!-- fractional width specified -->
<!-- col will span a 1/4 of its parent's width on desktop, 1/2 on tablet and all on mobile -->
<div class="col quarter tab-half mob-full">
...
</div>
<!-- col will span 3/1 of its parent's width on desktop, 1/2 on tablet and all on mobile -->
<div class="col three-quarters tab-half mob-full">
...
</div>
</div>
view raw grid.html hosted with ❤ by GitHub

Typography.

Eden comes with Source Sans Pro as its default font family but can easily be overwritten by changing it for the .body class. All types have been set using rem and em units where the default :root size is 12pt.

Other basic type styles such as .uppercase, .lowercase as well as different forms of alignemnt are all available.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Uppercase & Spaced

Centrally aligned text

Right aligned text

<!-- Headings -->
<h1>Heading 1.</h1>
<h2>Heading 2.</h2>
<h3>Heading 3.</h3>
<h4>Heading 4.</h4>
<h5>Heading 5.</h5>
<h6>Heading 6.</h6>
<!-- Other basic styles -->
<p>Standard font size set at 12pt(1rem)</p>
<p class="uppercase">upeprcase</p>
<p class="lowercase">lowercase</p>
<p class="space">space</p>
<p class="uppercase space">uppercase and space</p>
<!-- Alignment -->
<p class="text-left">Left Aligned</p>
<p class="text-center">Centrally Aligned</p>
<p class="text-right">Right Aligned</p>
<p class="text-justify">Justified Text</p>
view raw typography.html hosted with ❤ by GitHub

Lists.

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  1. Item
  2. Item
  3. Item
  • Item
  • Item
  • Item
<!-- default <ul> removes bullet -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- with bullet points -->
<ul class="bullet">
<li></li>
<li></li>
<li></li>
</ul>
<!-- inline list -->
<ul class="inline">
<li></li>
<li></li>
<li></li>
</ul>
view raw list.html hosted with ❤ by GitHub

Hero.

js

Hero images are a very popular and modern trend of web design. They are generally the first thing you see on a webpage and are used to grab your attention.

The Eden hero comes in all the sizes. The deafult will take up the entire height of your viewport and the entire width of the parent element.

Hero.

<div class="hero">
<div class="col content center-center">
<h1>Hero.</h1>
</div>
</div>
view raw hero.html hosted with ❤ by GitHub

Parallax scrolling is a very new and modern technique used in web design and with Eden we now make it so easy to achieve this by just including the following in your js file! Check out an example here.

$('.hero').parallax();
view raw parallax.js hosted with ❤ by GitHub

Eden heroes also support colour overlays which are great when you are looking to match your brand's theme or even to cover up a pixelated image. Adding a .overlay class to your .hero will automatically apply the effect. You can then choose your own colour by overriding the .overlay:after property in your CSS or you can apply Eden's .dark or .light theme.

<!-- Overlay with default colour eden-green -->
<div class="hero short fat overlay">
<!-- immediate child of .content so content appears above overlay -->
<div class="content col fill-y top-right">
<h1 class="space">hero</h1>
</div>
</div>
view raw hero-overlay.html hosted with ❤ by GitHub

hero

Buttons.

Buttons come in two forms in Eden. They can either be the standard button tags or attached to a tags with the .button class.

<!-- Themed Buttons -->
<button class="light" type="button">Light Button</button>
<button class="dark" type="button">Dark Button</button>
<button class="transparent" type="button">Transparent Button</button>
<!-- bordered button -->
<button class="border transparent" type="button">Transparent Button w/ border</button>
<!-- rounded button -->
<button class="rounded" type="button">Transparent Button w/ rounded corners</button>
<!-- button w/ shadow -->
<button class="dark shadow" type="button">Dark Button w/ shadow</button>
<!-- pill shaped button -->
<button class="transparent border pill" type="button">Transparent pill shaped button</button>
<!-- a tagged button -->
<a class="button border transparent" type="button">Button via a tag</a>
view raw button.html hosted with ❤ by GitHub

Forms.

fontawesome
js

Forms play a key role in web developement and especially in the development of sites requiring a back-end.

<form>
<input class="transparent border" type="text" placeholder="Text">
<input class="transparent border" type="email" placeholder="Email">
<input class="transparent border" type="number" placeholder="Number">
<textarea class="transparent border" placeholder="Text goes here.."></textarea>
<div class="row form-controls">
<input class="light uppercase-and-space" type="submit" value="Submit">
<input class="dark uppercase-and-space" type="reset" value="Reset">
</div>
</form>
view raw form.html hosted with ❤ by GitHub

Slider.

js

Slide Title

❮❯
<!-- Slider is all conatined within, well, a .slider class -->
<div class="slider">
<!-- immediate child of .slides which conatines all the .slide elements -->
<div class="slides">
<!-- starting slide to be given a class of .is-active -->
<div class="slide is-active"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<!-- optional controls for the slider -->
<!-- left & right arrows children of .slider -->
<span class="slider-control slide-left">❮</span>
<span class="slider-control slide-right">❯</span>
<!-- optional dots at bottom of slider to highlight active slide -->
<div class="dots">
<!-- starting dot to be given a class of .is-active -->
<!-- number of .dot == number of .slide -->
<div class="dot is-active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
view raw slider.html hosted with ❤ by GitHub
$('.slider').slide({
quantity : 3, // default: 1
timer : false, // default: true
delay : 5000,
transition : true,
controls : true,
controlColor: '#fff'
});
view raw slider.js hosted with ❤ by GitHub

Masonry.

<!-- col-* specifies number of columns -->
<!-- tab-col-* specifies number of columns at tablet size -->
<!-- mob-col-* specifies number of columns at mobile size -->
<div class="masonry col-3 tab-col-2">
<!-- each img needs class .item -->
<img class="item" alt="" src=""/>
<img class="item" alt="" src=""/>
<img class="item" alt="" src=""/>
<img class="item" alt="" src=""/>
<img class="item" alt="" src=""/>
<img class="item" alt="" src=""/>
</div>
view raw masonry.html hosted with ❤ by GitHub

Overlay.

.slide-right
.slide-down
.fade
.slide-up
.slide-left
<!-- divs can be given an overlay -->
<div class="img overlay dark"></div>
<!-- img can be given overlays -->
<img class="overlay" alt="" src=""/>
<!-- overlay animations with content -->
<div class="img overlay slide-down on-hover">
<!-- need .content as immediate child to appear on top of .overlay -->
<div class="content col center-center">
<h6>Slider right overlay on hover</h6>
</div>
</div>
view raw overlay.html hosted with ❤ by GitHub

Video.

js
<!-- <video> tag goes with a .video class with .overlay if wanted -->
<div class="video overlay">
<video>
<source type="video/mp4" src="">
<source type="video/ogg" src="">
<source type="video/webm" src="">
</video>
<!-- Play/Pause elements inside .content being immediate child of .video -->
<div class="content row center-center">
<!-- elements to play and pause must be given .play and .pause classes -->
<i class="fa fa-play-circle-o transition play" aria-hidden="true"></i>
<i class="fa fa-pause-circle-o transition pause" aria-hidden="true"></i>
</div>
</div>
view raw video.html hosted with ❤ by GitHub

Responsive Media.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!-- Youtube link -->
<div class="responsive-media">
<iframe width="560" height="315" src="https://www.youtube.com/embed/t9qxT8wI-0I" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Vimeo link -->
<div class="responsive-media">
<iframe src="https://player.vimeo.com/video/191710919" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
view raw responsive-media.html hosted with ❤ by GitHub

Tabs.

js
OneTwoThree
Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Food & Drink
Sport
Music
Film
Game
Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!-- tab given an outline style with default eden theme -->
<div class="tab outline">
<!-- immediate child of .tab-headings -->
<!-- row class specifies tabs will be in a horizontal format -->
<div class="tab-headings row">
<!-- number of .tab-heading == number of .tab-content -->
<!-- default open .tab-heading given class .active -->
<span class="tab-heading transition is-active">Title</span>
<span class="tab-heading transition">Title</span>
<span class="tab-heading transition">Title</span>
</div>
<!-- immediate child of .tab-contents -->
<div class="tab-contents">
<!-- number of .tab-content == number of .tab-heading -->
<!-- default open .tab-content given class .is-open -->
<div class="tab-content is-open">
...
</div>
<div class="tab-content">
...
</div>
<div class="tab-content">
...
</div>
</div>
</div>
view raw tabs.html hosted with ❤ by GitHub

Collapsible.

js
Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="collapsible">
<!-- .panel immediate child of .collapsible -->
<div class="panel">
<!-- clickable element to open .content given class .show-class -->
<!-- .show-content and .content both immediate children of .panel -->
<div class="show-content light border transition">
...
</div>
<div class="content">
...
</div>
</div>
<div class="panel">
<div class="show-content light border transition">
...
</div>
<div class="content">
...
</div>
</div>
</div>
view raw collapsible.html hosted with ❤ by GitHub
// expandable allows for multiple panels to be open at the same time
// accordion only allows one panel to be open at any given time
$('collapsible').collapsible({
type: 'accordion' // default: 'expandable'
});
view raw collapsible.js hosted with ❤ by GitHub

Animations.

js
<div class="animation slide-in-right"></div>
<!-- when element has been scrolled into view -->
<div class="animation fade-in-up on-scroll"></div>
<!-- when you want to anaimate a sequence of elements one after the other -->
<div class="animation fade-in-left on-scroll on-delay"></div>
<div class="animation fade-in-left on-scroll on-delay"></div>
<div class="animation fade-in-left on-scroll on-delay"></div>
<div class="animation fade-in-left on-scroll on-delay"></div>
view raw animation.html hosted with ❤ by GitHub
$('.animation').animation();
view raw animation.js hosted with ❤ by GitHub