Components

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

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

.one

.tab-one

.mob-one

.two

.sixth

.tab-two
.tab-sixth

.mob-two
.mob-sixth

.three

.quarter

.tab-three
.tab-quarter

.mob-three
.mob-quarter

.four

.third

.tab-four
.tab-third

.mob-four
.mob-third

.five

.tab-five

.mob-five

.six

.half

.tab-six
.tab-half

.mob-six
.mob-half

.seven

.tab-seven

.mob-seven

.eight

.two-thirds

.tab-eight
.tab-two-thirds

.mob-eight
.mob-two-thirds

.nine

.three-quarters

.tab-nine
.tab-three-quarters

.mob-nine
.mob-three-quarters

.ten

.five-sixths

.tab-ten
.tab-five-sixths

.mob-ten
.mob-five-sixths

.eleven

.tab-eleven

.mob-eleven

.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

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

Lists.

Item
Item
Item

Item
Item
Item

Item
Item
Item

Item
Item
Item

Nav.

The navigation bar is one of, if not the most complex and feature rich component of the framework. Both horizontal and vertical navigation bars are potential options as well as sidebars that can be pulled out.

Within the .nav tags, .brand, .nav-options list(s), and/or .mob-nav can be specified.

brand

option
LOST
- 4 8 15 16 23 42

signed in as Desmond

brand

option
option
- dropdown option
- dropdown option
option

option
option
- dropdown option
- dropdown option

Hero.

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.

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.

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.

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.

Forms.

fontawesome

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

Slider.

Slide Title

❮❯

Masonry.

Overlay.

.slide-right

.slide-down

.fade

.slide-up

.slide-left

Video.

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.

Tabs.

OneTwoThree

Tab 1

Tab 2

Tab 3

Food & Drink

Sport

Music

Film

Game

Tab 1

Tab 2

Tab 3

Collapsible.

Section 1

Section 2

Section 3

Animations.

The spectacle before us was indeed sublime.

The spectacle before us was indeed sublime.

The spectacle before us was indeed sublime.

The spectacle before us was indeed sublime.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Hero.

hero

Modal

Ta-da!

Slide Title

.slide-right

.slide-down

.fade

.slide-up

.slide-left

Tab 1

Tab 2

Tab 3

Tab 1

Tab 2

Tab 3