Stratox tailwind

Stratox Tailwind is a lightweight design system that makes programming in CSS and HTML enjoyable while optimizing both. It keeps the code minimal by loading only the necessary Tailwind styles. The system includes normalizations, typography, wrappers, forms, cards, spacing classes, and more, all tied to media queries for a seamless, responsive design across all devices.

The Stratox Tailwind design system uses rem units in CSS, just like Tailwind, for scalability. However, it simplifies their usage by converting rem units to an intuitive scale: 2.5 rem equals 25 pixels, and .mb-40 represents 40 pixels. This makes achieving pixel-perfect designs effortless for developers without the need for calculations, ensuring consistency for both developers and designers.

# Typography

.display-1

p: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.display-2

p: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.headline-1

.headline-2

.headline-3

.headline-4

.headline-5
.headline-6

.headline-2.title

.ingress p, .ingress: The .title is the same as .mt-0 class, will remove margin top.

p: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.small: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.legend: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

# Normalization

Inline elements

STRONG-tag EM-Tag A-Tag
blockquote: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lists

  • Lorem ipsum 1
  • Lorem ipsum 2
  • Lorem ipsum 3
  • Lorem ipsum 4
  1. Lorem ipsum 1
  2. Lorem ipsum 2
  3. Lorem ipsum 3
  4. Lorem ipsum 4

Table

Head Head Head
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum

# Componets

Text colors

Primary Secondary Light Approve Error

# Forms field

Form

# Layouting

.card-1

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.card-2
.card-3
.card-4
.wrapper
.wrapper.xl
.wrapper.lg
.wrapper.md
.wrapper.sm
.container
.container.xl
.container.lg
.container.md
.container.sm