Cigale NPM | npm.io

Install

npm install cigale

Usage

CSS

@import "../node_modules/cigale/css/cigale.css";

SCSS

@import "../node_modules/cigale/scss/cigale.scss";

Syntax

Cigale is designed to have almost nothing to add. See the test directory to have examples.

Layout

<div class="layout">
  <section class="header">
    <header>
      <a href="index.html">
        <img src="assets/cigale.svg" alt="Logo" />
        <span>Cigale</span>
      </a>
      <button>Help</button>
    </header>
  </section>
  <section class="main">
    <main class="centered">
      <div class="tagline">
        <p>Cigale song is "csscsscss"</p>
        <a href="form.html">
          <button class="primary" autofocus>Get started</button>
        </a>
      </div>
    </main>
  </section>
  <section class="footer">
    <footer>
      <a href="legal.html">Legal stuff</a>
    </footer>
  </section>
</div>

Button

Button have been decorated in flat design. They can have primary class.

Forms

Form should be a list of labels ending with a submit button.

Each label is composed of a div for the label text and input, textarea or select for the field, and optionaly a div.error box for error messaging.

Tables

Just add a parent wrapper with class table. Table is composed of a navigation with buttons and the table itself.

<div class="table">
  <nav>
    <button>...</button>
    ...
  </nav>
  <table>
    ...
  </table>
</div>

Why Cigale?

Cigale, in english Cicada. It is an kind of insect that lives in the south of France, and who does 'ksssksssksss'... or 'csscsscss'... yes this play on word sucks... :smiley: