What is it?

It's a mix of several other ideas combined in one, trying to retain the best of each one

The usage of the framework consists of 3 keys points: Sematinc HTML, ARIA Usage and CSS variables.

Displays

There's a bunch of displays to use going to the most simple and dynamic to real occasional use cases.

Fixed Grid

It's a grid display but with fixed columns.

Grid Dynamic

It's a grid with undefined columns, that can be any value(It depends in the child size).

Grid Reel

Works as content "carousel". Hiding some content to be scrolled.

Flex Row

A ordinary flex row with no styling by default.(There's a gap just for demonstrative purposes).

Flex Col

A ordinary flex column with no styling by default.(There's a gap just for demonstrative purposes).

Flex Cluster

A flex container that wraps it's children as it fits on the row.

The Children don't grow. It keeps the same size not matter what.

Flex Col

Same as the .flex-cluster but with flex: 1 on its children(They're able to take all available space).

Components

I've built some components, the structure must follow as you can see below. They use semantic tags, ARIA and some classes to stylinhg

Forms

In the forms section, the form has 2 states: valid or invalid. With that in mind, I developed a "return to user" with the colors, being the destructive a signal of something is wrong.

To achieve this, you only need to create a input inside the form tag and put some required or any demand on it.

As you can see below, everything that is not ok will be red bordered and the submit button is gonna look like is disabled.

Buttons

Cards

With the palette provided, I've created these colors to complement the basic needs in a website.

It's just the "beta" for now, but you can achieve a pretty standard result.

Obs: It might not look so good in Light Themes... working on it.

image card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quas blanditiis.

Colors

Family Hierarquy

Its a abstract way to think about CSS inheritance. You have several types of relations that you're problably used to, like first child, last child and etc...

However, I think this way is easier to understand and apply, you just need to apply the .parent class in the tag that is really the parent.

After this, you just need to pass the Heritage that the children will inherit in fact. Like: colors, spacing and font related stuff.

If you don't want a specific tag to inherit from the parent, just do like in Game of Thrones, call it a .bastard and the job is done.

Modals

There's some extras with image related

Like this one, a image gallery with a cool design

Accordion Gallery

Scroll Gallery

Bentos

A new trend at the time LOL

Normal Bento(6)

Normal Bento(6)

Big Bento(10)