GitHub logo
logo Ellegant CSS microframework

It just works!

Ellegant is a CSS framework that aims to provide user interaction with very little or no Javascript at all.
With inputs and labels, Ellegant targets elements providing a fast and clean user experience even on low-end mobile devices.

See some components
How to use

How? 🤯

By using inputs and labels we can take advantage of selectors like + and ~ to target the elements after the right input:checked. This is why the HTML may look just a little verbose, while the page remains fast and clean even when running on low-end mobile devices.
You already use CSS to change how elements are shown inside your JS code. Ellegant goes one step further and removes the JS code.

Why? 🙄

We've been using many Javascript codes that we could replace with clever CSS selectors to replicate its function.
With this kind of no-JS component, you may use your Javascript code to do more complex interactions with less fear of jamming your user experience.
That is what we are talking about.

🧩 General Components

General Components react to user interaction in a way you can apply them for different purposes.

  1. The javascript portion is only needed if you want ARIA roles;
  2. The ID properties must be unique to avoid conflicts;
  3. The elle-* classes and for attributes are needed.
  4. elle-animated-* classes on target activate fade in animations from the top, right, bottom, or left directions.

🔛 Toggler:

Toggler allows the hiding and showing of an element based on user interaction using a checkbox and a label.
The target element must have the checkbox preceding it, while the label can be placed anywhere. The Toggler does not require a surrounding element, making it a versatile and flexible component.

  • Everyday people like you and me,
  • Just want to live, naturally.
  • If you see someone you could help,
  • God is talking to you as He talks to me.

View sample code

🔄 Switcher:

The Switcher allows for the switching between elements based on user interaction using radio inputs and labels.
Each Switcher must be enclosed within a .elle-switcher container. It is important to note that the default implementation of the Switcher limits each instance to 10 options.

From time to time life will crumble
Those days your soul will make you mumble
But you should not focus on your sorrow
Because you might be Found tomorrow.

View sample code

🍰 Single Components

Single components are seen on the web, commonly requiring Javascript.

  1. The javascript portion is only needed if you want ARIA roles;
  2. The ID properties must be unique to avoid conflicts;
  3. The elle-* classes and for attributes are needed.

🍔 Menu:

The mobile hamburger menu is a common navigation design pattern that is used in many mobile applications and websites. When users tap on the hamburger icon, a menu panel slides in from the left-hand side of the screen, revealing a list of navigation links or other options.
But take note, if you need anchor links inside it, you'll need a little click event included in the snippet below.

Tip: To make it open from the right, add .elle-right to the ul tag.

View sample code

🟦 Modal:

Modal is a type of element that is displayed on top of the current window and requires the user to interact with it before continuing.
The target element must have the checkbox preceding it, while the label can be placed anywhere. The Modal does not require a surrounding element, making it a versatile and flexible component.

Warning

Hey, you!

Some surprises are more unexpected than others, which doesn't mean you shouldn't pay attention to them all. This Modal's neither that big nor too small.

It is important to note that the section part of a Modal can also include .elle-animated-* and be .elle-big or .elle-small

View sample code

✅ On/Off (checkbox):

A checkbox element is a type of input element that allows users to select one or more options from a predefined set of choices.
When a checkbox is checked, it indicates that the user has selected that option, and when it is unchecked, it indicates that the user has not selected it.



View sample code

🔥 How to use

You may include Ellegant's CSS and optional JS file using those public CDN URL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.min.css">
<script src="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.js"></script>

💻 How to contribute

Help develop Ellegant by writing code!

It is important to note that we use Dart Sass to transform SCSS into CSS so we only write SCSS and JS. This can be achieved with the vscode-dartsass extension.

  1. Fork our GitHub repository here;
  2. Make your changes to ellegant.scss and/or ellegant.js and push them to your repo;
  3. Submit your pull request; Instructions on how to do that are here
  4. Be respectful and explain what you meant to fix, implement or improve in your pull request. The better you explain what you did, the better we can together explain it to the world.