Getting started

You only need 1 CSS file to use Elenore

There are several ways to get started with Elenore. You can either:

  1. use npm to install the Elenore package
  2. use the GitHub repository to get the latest development version

1

Use NPM (recommended): 

npm install elenore
Font Awesome icons

If you want to use icons with Elenore, don't forget to include Font Awesome:

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

Code requirements #

For Elenore to work correctly, you need to make your webpage responsive.

1

Use the HTML5 doctype 


<!DOCTYPE html>

2

Add the responsive viewport meta tag 


<meta name="viewport" content="width=device-width, initial-scale=1">

Starter template #

If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Elenore!</title>
    <link rel="stylesheet" href="../css/elenore.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Elenore</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Examples #

Build on the basic template above with Elenore many components. We encourage you to customize and adapt Elenore to suit your individual project's needs.

Blog

Simple two-column blog layout with custom navigation, header, and type.

Login page

A one-page template for building simple custom form layout and design for a simple login in form.

Dashboard

Basic structure for an admin dashboard with fixed sidebar and navbar.

This page is open source. View on GitHub