Getting Started

Welcome to the demo page!

This fake documentation page, is meant to showcase how Semanticus CSS can be used in a real case scenario, without any custom CSS, and JavaScript.

Well that's not entirely true! The form inside the authentication modal, triggered by the "Log In" button, does have a onsubmit handler, to showcase a success toast after submission.

Install

Quick CDN installation

Include these lines directly from a CDN in your HTML <head>:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.3/dist/semanticus.css">

  <!-- customize it with a palette or size variation if needed -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.3/dist/semanticus.palette.blue.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.3/dist/semanticus.size.pico.css">

Manual installation

Download the distribution files, move the ones you need to your stylesheets folder and include them in your HTML <head>:

  <link rel="stylesheet" href="/css/semanticus.css">

  <!-- customize it with a palette or size variation if needed -->
  <link rel="stylesheet" href="/css/semanticus.palette.blue.css">
  <link rel="stylesheet" href="/css/semanticus.size.pico.css">

Node import

Install the package via npm:

npm install semanticus-css

Then import the styles in your JavaScript entry file:

  import 'semanticus-css';

  // Or import only the semantic layer
  import 'semanticus-css/semantics';

  // Or add a palette / size on top
  import 'semanticus-css/palettes/blue';
  import 'semanticus-css/sizes/pico';

Looking for alternative color palettes or sizing options? Check out the Palettes or Sizes guides.

Usage

Beautiful default styles for plain ARIA-centric HTML — simply write plain HTML and Semantic Styling will make it look great by default.

Hello World

Look at me, I'm bold and stylish!

  <article>
    <hgroup>
      <h1>Hello World</h1>
      <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
    </hgroup>
    <button>Click me</button>
  </article>

Semanticus CSS is built on four complementary layers:

Semantic Styling
Components
Variants
Utility Classes

Check more at Semanticus CSS documentation