Módulo 3: Estilos y Clases

Styles panel

Layout

Layout

Cuando agregas un elemento al lienzo, su opción de visualización predeterminada determina su apariencia:
Block, Flex, Grid, Inline-block, Inline, None

Spacing

Spacing

Permite definir el espaciado de un elemento: hacia dentro (padding) y hacia fuera (margin).

Size

Size

Por defecto, un elemento se expande para llenar el ancho de su elemento padre o toma el tamaño del contenido dentro de él. En este panel se puede configurar.

Position

Position

Establece la posición de los distintos elementos:
Static, Relative, Absolute, Fixed, o Sticky.

Typography

Typography

Determina exactamente cómo se verán los textos de tu web.

Backgrounds

 Backgrounds

Puedes agregar una imagen de fondo, un degradado o un color a cualquier elemento, excepto a los elementos multimedia.

También Puedes cambiar el tamaño, la posición, ajustar el clipping, etc.

Borders

Borders

Los bordes definen el radio de los bordes de un elemento o crean contornos en uno o más lados del límite de un elemento.

Effects

Effects

Puedes ajustar efectos como Blending, Opacity, Box shadows, 2D & 3D transforms, Transitions, Filters, Backdrop filters, y Cursor.

Clases

Selector

El lugar donde crear, inspeccionar, renombrar, duplicar o eliminar clases.

Crear, renombrar, duplicar, eliminar, limpiar

Edita tus clases rápidamente.

Herencia

Cuando no se ha especificado ningún valor para una propiedad heredada en un elemento, el elemento obtiene el valor calculado de esa propiedad en su elemento padre.

Global Classes

Puedes usar clases globales para traer un estilo específico a cualquier clase en su sitio web.

Orange

Los estilos heredados se indican en naranja.

Blue

Nuevos estilos o estilos sobreescritos se indican en azul.

Pink

Utiliza etiquetas de elementos HTML para controlar el estilo predeterminado para un tipo de elemento en particular.

States

Añade interactividad a los elementos cambiando su apariencia y comportamiento en diferentes estados.

Styleguide: El ejemplo de finsweet

Client-first Version 1.0

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading classes

heading-xxlarge
heading-xlarge
heading-large
heading-medium
heading-small
heading-xsmall

Text size

text-size-xxlarge
text-size-xlarge
text-size-large
text-size-medium
text-size-normal
text-size-small
text-size-tiny

Text style

text-style-italic
text-style-allcaps
text-style-quote
text-style-strikethrough
text-style-muted
text-color-black
text-color-white
text-style-nowrap
text-style-2lines
text-style-3lines

Text weight

text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light

Text alignment

text-align-left
text-align-center
text-align-right

Rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is a link inside of a rich text

  • List item
  • List item
  • List item
Placeholder graphic
Image inside of a richtext

Colors

Black
#24292e
Grey
#f6f8fa
Whitesmoke
#fafbfc
Border
#e1e4e8
Blue
#0366d6
Blue hover
#1158c7
Success green
#28a745
Error red
#d73a49

Background classes

background-grey
background-whitesmoke

Forms

Awesome, you subscribed!
Error! Please try again.

Icon classes

Finsweet fs logo iconFinsweet fs logo iconFinsweet fs logo iconFinsweet fs logo icon

Icons 1x1

Finsweet fs logo iconFinsweet fs logo iconFinsweet fs logo iconFinsweet fs logo icon

Social icons

Container

container-large
container-medium
container-small

Max width

max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full
max-width-full-tablet
max-width-full-mobile-wide
max-width-full-mobile

Margins

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
margin-top
margin-right
margin-bottom
margin-left
margin-horizontal
margin-vertical
margin-0-all

Paddings

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
padding-top
padding-right
padding-bottom
padding-left
padding-horizontal
padding-vertical
padding-0-all