Referencias CSS Class
Fluid Text
Fluid Text sk
Paragraph Text sk-content
Cross out cross-out
Capitalize capitalize
Uppercase Text uppercase
Lowercase Text lowercase
Letter Spacing letter-spacing
Italic italic
Align Left text-left
Align Right text-right
Align Center text-center
Justify text-justify
Custom Fluid Text
Extra Small Text text-xs
Small Text text-s
Medium Text text-m
Large Text text-l
XLarge Text text-xl
2XLarge Text text-2xl
3XLarge Text text-3xl
4XLarge Text text-4xl
Custom Fluid Headings
XXXXLarge Heading heading-4xl
XXXLarge Heading heading-3xl
XXLarge Heading heading-2xl
XLarge Heading heading-xl
Large Heading heading-l
Medium Heading heading-m
Small Heading heading-s
Font Weight
Ultra Light font-100
Thin font-200
Light font-300
Regular font-400
Medium font-500
Semi-Bold font-600
Bold font-700
Extra Bold font-800
Black font-900
Background Colors
Main Colors
Primary Background bg-primary
Primary Dark Background bg-primary-dark
Primary Light Background bg-primary-light
Primary Background bg bg-primary-bg
Accent Background bg-accent
Accent Dark Background bg-accent-dark
Accent Light Background bg-accent-light
Accent Background bg bg-accent-bg
White Background bg-white
Black Background bg-black
Neutral Colors
Background Gray 50 bg-gray-50
Background Gray 100 bg-gray-100
Background Gray 200 bg-gray-200
Background Gray 300 bg-gray-300
Background Gray 400 bg-gray-400
Background Gray 500 bg-gray-500
Background Gray 600 bg-gray-600
Background Gray 700 bg-gray-700
Background Gray 800 bg-gray-800
Background Gray 900 bg-gray-900
Notices
Notice notice
Warning warning
Success success
Error error
Hover
Darkens on hover hover-dark
Reduces opacity on hover hover-opacity
Adds border on hover hover-border
Scales up on hover hover-scale
Adds shadow on hover hover-shadow
Glow Hover hover-glow
Shadows
Small Shadow shadow-s
Medium Shadow shadow-m
Large Shadow shadow-l
XLarge Shadow shadow-xl
Inset Shadow shadow-inset
Shadow None shadow-none
Buttons
Button button
Primary button button-pri
Accent red button button-acc
Primary outline button button-outline-pri
Accent outline button button-outline-acc
Generic outline button button-outline
Generic outline Hover button button-outline:hover
Ghost button (minimal) button-ghost
Ghost Hover button (minimal) button-ghost:hover
Text-only button button-text
Text-only Hover button button-text:hover
Link-style button button-link
Link-style Hover button button-link:hover
Sections
Small Section sec-s
Medium Section sec-m
Large Section sec-l
Hero Section sec-hero
Full Section (100vh height) sec-full
Margins
Margin Top XSmall mt-xs
Margin Bottom Small mb-xs
Margin Top Small mt-s
Margin Bottom Small mb-s
Margin Top Medium mt-m
Margin Bottom Medium mb-m
Margin Top Large mt-l
Margin Bottom Large mb-l
Margin Top XLarge mt-xl
Margin Bottom XLarge mb-xl
Padding
No Padding no-padding
Padding Small pad-xs
Padding Small pad-s
Padding Medium pad-m
Padding Large pad-I
Padding xLarge pad-xl
Border Radius
Boarder Radius Small rad-xs
Boarder Radius Small rad-s
Boarder Radius Medium rad-m
Boarder Radius Large rad-l
Boarder Radius xLarge rad-xl
Boarder Radius rounded (circle) rad-full
Rows
Row Width
70ch max-width, centered (ideal reading width) row-narrow
Full width, no max-width row-full
Row Layouts
Auto-fit grid layout for row row-grid-auto
Centers content vertically and horizontally row-center
Row Padding
Extra small vertical padding row-pad-xs
Small vertical padding row-pad-s
Medium vertical padding row-pad-m
Large vertical padding row-pad-l
Extra large vertical padding row-pad-xl
Spacing (for Grid & Flexbox)
No Space gap-0
Spacing XSmall gap-xs
Spacing Small gap-s
Spacing Medium gap-m
Spacing Large gap-l
Spacing XLarge gap-xl
Flex
Display
Display flex flex
Auto Flexbox flexbox
Direction
Horizontal flex direction flex-row
Vertical flex direction flex-col
Alignment
Center justify content justify-center
Flex Wrap
Flex Wrap flex-wrap
Flex no Wrap flex-nowrap
Grid
Grid Container
Display grid grid
Grid Columns
Auto grid grid-auto
1 Column grid grid-cols-1
2 Column grid grid-cols-2
3 Column grid grid-cols-3
4 Column grid grid-cols-4
5 Column grid grid-cols-5
6 Column grid grid-cols-6
Column Spanning
2 Column Span col-span-2
3 Column Span col-span-3
4 Column Span col-span-4
5 Column Span col-span-5
6 Column Span col-span-6
Column Span Full col-span-full
Row Spanning
2 Row Span row-span-2
3 Row Span row-span-3
4 Row Span row-span-4
5 Row Span row-span-5
6 Row Span row-span-6
Row Span Full row-span-full
Bento Grid
Bento grid container grid-bento
Bento grid item bento-item
Rellenos Fluidos
Relleno fluido de ancho completo sk-block
Contenedor fluido centrado horizontalmente ancho completo sk-container
Relleno fluido solo vertical sk-section
Fila ancho completo relleno horizontal fluido sk-fluid-row
Utilidad flexible para centrar el contenido tanto vertical como horizontalmente sk-center
FLUID TEXT
Fluid Text sk
Paragraph Text sk-content
Cross out cross-out
Capitalize capitalize
Uppercase Text uppercase
Lowercase Text lowercase
Letter Spacing letter-spacing
Italic italic
Align Left text-left
Align Right text-right
Align Center text-center
Justify text-justify
CUSTOM FLUID TEXT
Extra Small Text text-xs
Small Text text-s
Medium Text text-m
Large Text text-l
XLarge Text text-xl
2XLarge Text text-2xl
3XLarge Text text-3xl
4XLarge Text text-4xl
CUSTOM FLUID HEADINGS
XXXXLarge Heading heading-4xl
XXXLarge Heading heading-3xl
XXLarge Heading heading-2xl
XLarge Heading heading-xl
Large Heading heading-l
Medium Heading heading-m
Small Heading heading-s
FONT WEIGHT
Ultra Light font-100
Thin font-200
Light font-300
Regular font-400
Medium font-500
Semi-Bold font-600
Bold font-700
Extra Bold font-800
Black font-900
BUTTONS
Text-only button button-text
Text-only Hover button button-text:hover
Link-style button button-link
Link-style Hover button button-link:hover
HOVER
Darkens on hover hover-dark
Reduces opacity on hover hover-opacity
Adds border on hover hover-border
Scales up on hover hover-scale
Adds shadow on hover hover-shadow
Glow Hover hover-glow
FLEX
Display
Display flex flex
Auto Flexbox flexbox
Direction
Horizontal flex direction flex-row
Vertical flex direction flex-col
Alignment
Center justify content justify-center
Flex Wrap
Flex Wrap flex-wrap
Flex no Wrap flex-nowrap
SECTIONS
Small Section sec-s
Medium Section sec-m
Large Section sec-l
Hero Section sec-hero
Full Section (100vh height) sec-full
MARGINS
Margin Top XSmall mt-xs
Margin Bottom Small mb-xs
Margin Top Small mt-s
Margin Bottom Small mb-s
Margin Top Medium mt-m
Margin Bottom Medium mb-m
Margin Top Large mt-l
Margin Bottom Large mb-l
Margin Top XLarge mt-xl
Margin Bottom XLarge mb-xl
PADDING
No Padding no-padding
Padding Small pad-xs
Padding Small pad-s
Padding Medium pad-m
Padding Large pad-I
Padding xLarge pad-xl
BORDER RADIUS
Boarder Radius Small rad-xs
Boarder Radius Small rad-s
Boarder Radius Medium rad-m
Boarder Radius Large rad-l
Boarder Radius xLarge rad-xl
Boarder Radius rounded (circle) rad-full
GRID
Grid Container
Display grid grid
Grid Columns
Auto grid grid-auto
1 Column grid grid-cols-1
2 Column grid grid-cols-2
3 Column grid grid-cols-3
4 Column grid grid-cols-4
5 Column grid grid-cols-5
6 Column grid grid-cols-6
Column Spanning
2 Column Span col-span-2
3 Column Span col-span-3
4 Column Span col-span-4
5 Column Span col-span-5
6 Column Span col-span-6
Column Span Full col-span-full
Row Spanning
2 Row Span row-span-2
3 Row Span row-span-3
4 Row Span row-span-4
5 Row Span row-span-5
6 Row Span row-span-6
Row Span Full row-span-full
SPACING (for Grid & Flexbox)
No Space gap-0
Spacing XSmall gap-xs
Spacing Small gap-s
Spacing Medium gap-m
Spacing Large gap-l
Spacing XLarge gap-xl
ROWS
Row Width
70ch max-width, centered (ideal reading width) row-narrow
Full width, no max-width row-full
Row Layouts
Auto-fit grid layout for row row-grid-auto
Centers content vertically and horizontally row-center
Row Padding
Extra small vertical padding row-pad-xs
Small vertical padding row-pad-s
Medium vertical padding row-pad-m
Large vertical padding row-pad-l
Extra large vertical padding row-pad-xl
RELLENOS FLUIDOS
Relleno fluido de ancho completo sk-block
Contenedor fluido centrado horizontalmente ancho completo sk-container
Relleno fluido solo vertical sk-section
Fila ancho completo relleno horizontal fluido sk-fluid-row
Utilidad flexible para centrar el contenido tanto vertical como horizontalmente sk-center
Animaciones CSS
Animaciones básicas
Aparece desde abajo reveal-up
Aparece desde abajo suave reveal-up-soft
Aparece desde abajo fuerte reveal-up-strong
Aparece desde arriba reveal-down
Aparece desde la derecha reveal-left
Aparece desde la izquierda reveal-right
Rotaciones Sutiles
Suave desde diferentes ángulos reveal-rotate
Suave desde izquierda reveal-rotate-left
Suave desde derecha reveal-rotate-right
Para Grupos de Elementos
Animación en secuencia reveal-cascade
Secuencia con zoom reveal-cascade-zoom
Efectos de Zoom
Zoom suave hacia adentro reveal-zoom-in
Zoom suave hacia afuera reveal-zoom-out
Zoom con movimiento hacia arriba reveal-zoom-up
Zoom con movimiento hacia abajo reveal-zoom-down
Zoom con rotación sutil reveal-zoom-rotate
FX Básicos
Simple desvanecimiento reveal-fade
Efecto de surgimiento reveal-emerge
Efecto flotante reveal-float
Entrada dramática reveal-dramatic
Aparición natural y suave reveal-natural
FX Avanzados
Efecto de despliegue reveal-unfold
Efecto de deslizamiento suave reveal-slide
Efecto de aparición natural reveal-natural