Hello, Tlux Framework!

Typografy

Typography includes various sizes of headers (h1-h6) and displays. The displays are big and bold, designed to stand out on the web page.

H1

H2

H3

H4

H5

H6

Display 1

Display 2

Display 3

Layout

Tlux's interesting feature is its grid system focused on CSS grid without adding extra classes to individual cells. Grids behave differently on desktop and mobile platforms. Example implementation is provided.

Desktop

To implement the desktop grid in Tlux, you must use the class "tl-grid" followed by "col-" to define the columns. If nothing additional is added, the grid will be desktop by default.

To create a gap, use "gap-{size}" class, but for smallest screens the grid changes to "block" & gap class won't work. Use "block-gap-{size}" instead, created to specifically cover this case.

.col

Mobile

If you are looking for a fully responsive website for the mobile version, use the "mobile" class after "tl-grid" to ensure that the grid is always grid. Also, the "gap-{size}" class is the only class needed to modify the gaps in the grid.

.col

Section

Sections in HTML are grouping elements that help organize the content of a web page. They can be used to divide content into blocks with uniform style for better readability and maintenance.

Section Small

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa illum omnis ex consequuntur enim dolor quos, harum blanditiis sed soluta temporibus eos iure et quibusdam, voluptate dicta rerum? Cupiditate, esse?

Section Medium

Section Large

Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis, aperiam iure. Molestias perferendis quibusdam consequuntur magni, odit eveniet commodi molestiae sunt laboriosam deleniti ea unde? Nobis labore accusamus adipisci natus!

Lorem ipsum dolor sit amet.

Forms

Buttons

Buttons are essential elements in a website's user interface, allowing users to perform actions with ease. TLux offers a wide selection of customizable button styles to meet the design and functionality needs of your project.

Hello, Tlux Framework!

Typografy

Typography includes various sizes of headers (h1-h6) and displays. The displays are big and bold, designed to stand out on the web page.

H1

H2

H3

H4

H5

H6

Tlux's interesting feature is its grid system focused on CSS grid without adding extra classes to individual cells. Grids behave differently on desktop and mobile platforms. Example implementation is provided.

Desktop

To implement the desktop grid in Tlux, you must use the class "tl-grid" followed by "col-" to define the columns. If nothing additional is added, the grid will be desktop by default.

To create a gap, use "gap-{size}" class, but for smallest screens the grid changes to "block" & gap class won't work. Use "block-gap-{size}" instead, created to specifically cover this case.

Mobile

If you are looking for a fully responsive website for the mobile version, use the "mobile" class after "tl-grid" to ensure that the grid is always grid. Also, the "gap-{size}" class is the only class needed to modify the gaps in the grid.

Section

Sections in HTML are grouping elements that help organize the content of a web page. They can be used to divide content into blocks with uniform style for better readability and maintenance.

Section Small

Section Medium

Section Large

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Clasic

Colors

Outline

Unline

Disabled

Sizes

Resonsive extended