Home

CSS3 based

Hathor is deployed in love with CSS3 and without JS.

Modern Design Standards

Hathor based on Googles Material Design and on Microsofts Fluent Design standards.

Simple Extendable

Hathor can easy expand with new Tools, Features or Modules.

Combineable modules

It is simple to include only parts of the Hathor libary.

Very small

Complete minifyed size < 50KB.

Color Theming

Switch the color theme by setting one attribute in HTML source code.

Documentation

Getting started!

To use Hathor in your own project, you can easily use the latest css release file.

https://github.com/NowhereLTD/Hathor/releases/tag/release


Understand Hathor

Hathor is build from Developers for Developers. Our intention is to bring all material design features to projects without using overloaded frameworks or script languages like scss. To include a section in your HTML code to Hathor working area, simple add the class "htr" to it. After this, all base settings like fonts, paddings etc. would be initialized for this section.

<body class="htr">
  <!-- Insert your code -->
</body>

Code design

We recommend to use HTML5 elements to write comprehensible and modern code.
Please note, that Hathor is not a class based css framework. To optimize the ussability we using attributes for building styled objects.

<body class="htr">
  <!-- A grid example with sidebar navigation -->
  <aside fs="d0" fe="d2" depth="4">
  </aside>
  <main fs="d2" fe="d12">
  </main>
</body>

Modules

Core

The core module includes:
  • Flexbox
  • Perspectives
  • Utils
  • Themes

Forms

The forms module includes:
  • Buttons
  • Inputs

Navigation

The navigation module includes:
  • Sidebar
  • Links

Animations

The animation module includes:
  • Timing
  • Fade animations
  • Delay

Data

The data module includes:
  • Tables
  • Charts

Utils

The utils module includes:
  • Alerts

Theming

Include a theme

A theme can be simple include by using the "theme" attribute.

<body class="htr" theme="green">
  <!-- A grid example with sidebar navigation -->
  <aside fs="d0" fe="d2" depth="4" theme="red">
  </aside>
  <main fs="d2" fe="d12">
  </main>
</body>