Getting Started

Luxa CSS is simple and focused; its goal is to provide a lightweight solution easily implemented in any development context.

With simple class names like .lx-btn or .lx-row, and a simple modifier system, like .is-left, it is easy to learn and use.

Quick Start

By CDN

To quickly add Luxa CSS, use the jsDelivr CDN, a free and open-source CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/luxonauta/luxa@latest/dist/expanded/luxa.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/luxonauta/luxa@latest/dist/compressed/luxa.css">

By Download

Download the files the files from the dist/ folder and include them in your HTML with a link.

There are two folders inside:

  1. Compressed - A minified version.

  2. Expanded - A standard CSS file.


Customize, Rewrite or Change

Want to customize, rewrite or change something, to suit your needs better?

Start by cloning the repository:

git clone https://github.com/luxonauta/luxa.git

This project needs Node, as the project uses Gulp.

Make sure it is installed, with the following commands:

node --version
npm --version
npx --version

If not, follow the instructions here.

After, install the Gulp command line utility;

Install it following the Gulp installation tutorial, or run the command on the terminal:

npm i

Verify your Gulp versions

gulp --version

Then test it!

Now all you have to do is initialize it:

npm run gulp

And you're ready!


Reset

Luxa has a small file, which provides consistency between browsers in the standard style of HTML elements.

If there is any inconsistency in any browser, the "Luxa CSS reset" will attempt to correct the browser's style that has the difference.


Table

Tables are an excellent way to organize many data, and with a striped modifier, your table will be more beautiful.

See the Pen Table by Lucas de França (@luxonauta) on CodePen.

Striped Table

Add .is-striped for a striped table.


Avatar

Avatars are ordinarily used to identify users or teams quickly.

In Luxa this component size by default is 6.5x7rem. However, you can still override it in a stylesheet.

See the Pen Avatar by Lucas de França (@luxonauta) on CodePen.


Badge

Badges can notify that there are new or unread messages or notifications.

They can be labels used for flags, earned achievements, and much more.

See the Pen Badge by Lucas de França (@luxonauta) on CodePen.


Card

Cards are generally used to group similar concepts together to facilitate reading and user action.

See the Pen Card by Lucas de França (@luxonauta) on CodePen.

Muted

When a card is deactivated or considered complete, apply the mute modifier to darken the card visually.


Pagination

Pagination divides content into pages, Luxa is a framework focused only on css, he offers only style.

In future updates, I hope to bring examples of how to do it with Javascript.

See the Pen Pagination by Lucas de França (@luxonauta) on CodePen.


Button

Buttons are essential user interface elements, and they allow users to perform actions throughout the project.

The button comes in 3 different sizes:

  1. Small (no need to declare, the default size is the Small one.)

  2. Medium

  3. Large

See the Pen Button by Lucas de França (@luxonauta) on CodePen.


Small / Help text

The HTML <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation.

Luxa applies a style to the tag and also to a class if you don't want to use the tag for some reason.

See the Pen Small / Help text by Lucas de França (@luxonauta) on CodePen.


Box-Shadow

With the correct use of box-shadow, everything can acquire a specific depth z that determines how high or close to the page the element is.

Luxa has some classes for you to change or add the box-shadow to an element quickly.

See the Pen Box-Shadow by Lucas de França (@luxonauta) on CodePen.


FlexBox

Luxa has some classes to customize or add flexbox to the elements of your layout.

Below, the table shows the classes and what each of them does.

ClassOutput
.has-dflex

display:flex;

.has-dflex-center

display: flex;

align-items: center;

justify-content: center;

.align-center

align-items: center;

.align-end

align-items: flex-end;

.align-start

align-items: flex-start;

.align-stretch

align-items: stretch !important;

.justify-around

justify-content: space-around;

.justify-between

justify-content: space-between;

.justify-evenly

justify-content: space-evenly;

.justify-center

justify-content: center;

.justify-end

justify-content: flex-end;

.justify-start

justify-content: flex-start;


Generic classes

Some classes with specific purposes and very useful in some situations.

Below, the table shows the classes and what each of them does.

ClassOutput
.is-hidden

visibility: hidden;

.is-visible

visibility: visible;

.is-marginless

margin: 0 !important;

.is-paddingless

padding: 0 !important;

.is-float-left

float: left;

.is-float-right

float: right;


Visibility

This visibility classes allow you to change an element's visibility quickly.

Below, the table shows the classes and what each of them does.

ClassOutput
.hide

display: none;

visibility: hidden;

.hide-on-desk

These properties will only be applied on large screens (Desktop)

display: none;

visibility: hidden;

.hide-on-mb

These properties will only be applied on small screens (Mobile)

display: none;

visibility: hidden;


Positioning classes

Some classes with types of placements.

Below, the table shows the classes and what each of them does.

ClassOutput
.ps-absoluteposition: absolute;
.ps-fixedposition: fixed;
.ps-relativeposition: relative;
.ps-staticposition: static;
.ps-stickyposition: sticky;

Transitions

Luxa has some atomic transition classes to allow you to apply transitions properties to an element quickly.

Below, the table shows the classes and what each of them does.

ClassOutput
.has-transition

transition-duration: 0.3s;

transition-property: all;

transition-delay: 0s;

.has-transition-slow

transition-duration: 1s;

transition-property: all;

transition-delay: 0s;

.has-transition-fast

transition-duration: 0.3s;

transition-property: all;

transition-delay: 0s;


Typography

Change typographic alignment with these atomic classes.

Below, the table shows the classes and what each of them does.

ClassOutput
.is-text-left

text-align: left;

.is-text-centered

text-align: center;

.is-text-right

text-align: right;

.is-text-justified

text-align: justify;


Container

Luxa containers are essential in building the layout! They are used to contain, pad, and centralize the content within them.

Although containers can be nested, most layouts do not require a nested container.

To use it, just set the size from 50% to 100%.

See the Pen Container by Lucas de França (@luxonauta) on CodePen.


Columns

Building layout with container, rows and columns should be simple.

In Luxa, all columns must be contained in one row and you must add the .lx-column class to your internal divs to make them columns.

Each column will have equal width, regardless of the number of columns if the parent element is FlexBox.

See the Pen Columns by Lucas de França (@luxonauta) on CodePen.

See the Pen Solutions to build your layouts by Lucas de França (@luxonauta) on CodePen.

12 Columns

The standard grid has 12 columns. No matter the size of the browser, each of these columns will always have equal width.


Row

Rows are simple elements that will almost always have children as columns.

Rows have flexbox properties. By default, if a modifier is not added it will align the children to the center (vertically and horizontally).

If you want to change this you can use the following modifiers:

  • .is-gapless - To remove the gap of the child elements.