Ligne CSS

Ligne CSS es una hoja de estilo ligera basada en necesidades comunes para facilitar la manera de dar estilo a los elementos de un sitio web.
  • Normalización de elementos HTML (Hace que tus elementos se muestren igual en todos los navegadores modernos)
  • Formularios
  • Botones que sobre salen ante todo el contenido
  • Tablas con algunas variaciones
  • Sistemas de cuadriculas basado en flexbox
  • Contenedores o paneles
Para comenzar a utilizar esta hoja de estilos solo debes agregar la misma en tu encabezado HTML.
En el repositorio de GitHub en el directorio src

Contenido ✌
👓Botones 📝Formularios 📦Contenedores o paneles 🧱Tablas y formatos de tablas
📱Grid basado en Flexbox ✍Tipografía 🚤Barra de navegación (Menu) 🦄Paleta de colores
⚓Enlaces (Hipervinculos)

➤Buttons

Estilos de botones

Se puede crear un botón básico con un mínimo de marcado. Debido a que los botones se pueden usar para muchos propósitos, es importante usar la etiqueta correcta.

Tamaños

Se pueden agregar clases extras para cambiar el tamaño de tus botones

Expanded

Estilo Hueco

Agrega la clase hollowclase a un botón para darle un estilo hueco.

Estilos de botones desactivados

El atributo disabled dará a los botones una apariencia descolorida.
➲Volver al inicio

Estilos de formularios y accesibilidad

El formulario nunca ha sido muy divertido, y puede ser absolutamente fustrante en un dispositivo móvil con su teclado en pantalla.

Contact Form

Login form

Formulario de contacto
Un simple formulario de login jamas fue tan simple de darle estilo
➲Volver al inicio

Paneles o contenedores

A veces es posible que necesite colocar su contenido en un cuadro para una mejor presentación. En la forma más básica, los paneles se les aplica un poco redondeo en los bordes y padding alrededor del contenido. 



   
panel head

   

      panel body
También es posible indicar el color del encabezado con las clases primary, secondary y danger. Al igual que el tamaño del panel con las clases small y medium, por defecto el panel viene de un tamaño del 100%.

Small Panel

Small panel primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet harum minima modi, obcaecati perferendis porro repudiandae temporibus velit voluptatibus voluptatum? A delectus eius et eveniet exercitationem fugiat neque repellat reprehenderit.

Medium panel

Medium Panel and danger
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet harum minima modi, obcaecati perferendis porro repudiandae temporibus velit voluptatibus voluptatum? A delectus eius et eveniet exercitationem fugiat neque repellat reprehenderit.

Full panel

Full panel and success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet harum minima modi, obcaecati perferendis porro repudiandae temporibus velit voluptatibus voluptatum? A delectus eius et eveniet exercitationem fugiat neque repellat reprehenderit.
➲Volver al inicio

Estilos de tablas

El elemento Tabla representa datos en dos dimensiones o más. Fomentamos el uso de un formato adecuado con thead y tbody para crear un formato de tabla. El código se vuelve más limpio. 



   
      

         #
         Name
         City
      

   
   
      

         1
         Albert
         Santiago
      

      

         2
         Giant
         San Francisco
      

      

         3
         Fulano
         La Vega

Normal table

# Name City
1 Albert Santiago
2 Giant San Francisco
3 Fulano La Vega

Striped table

Tablas rayadas o zebras
Es posible crear tablas rayas o de zebra con solo agregar la clase striped como una clase extra en tu tabla
# Name City
1 Albert Santiago
2 Giant San Francisco
3 Fulano La Vega

Bordered table

Tablas con bordes
Es posible crear tablas con bordes agregando la clase bordered esta se puede utilizar en conjunto con striped
# Name City
1 Albert Santiago
2 Giant San Francisco
3 Fulano La Vega

Hover table success

Tablas con bordes
Si quieres agregar un efecto cuando el usuario pase el puntero por encima de una fila, con solo agregar la clase hover puedes lograr esto, como un plus puedes agregarle colores a los encabezados utilizando las clases primary, success y danger
# Name City
1 Albert Santiago
2 Giant San Francisco
3 Fulano La Vega

Small table primary

# Name City
1 Albert Santiago
2 Giant San Francisco
3 Fulano La Vega

Medium table secondary

# Name City
1 Albert Santiago
2 Giant San Francisco
3 Fulano La Vega
➲Volver al inicio

Sistema de cuadriculas basado en FlexBox

Tienes a tu disposición un sistema de cuadriculas totalmente responsive y felxible para cualquier ambiente. Si te fijas todo lo anteriormente esta construido con este sistema. Puedes ver un ejemplo de layout en el siguiente enlace Templates

Tipografía

La elección de una tipografía, su tamaño, color, interlineado y otras características pueden cambiar, de forma consciente o inconsciente, la forma en la que una persona interpreta o capta los contenidos de una página web.
Texto small
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam consectetur delectus dolore doloribus hic illum ipsum laboriosam, magnam magni minima modi officia porro quod rem repudiandae soluta! Id, libero?
Texto medium
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam consectetur delectus dolore doloribus hic illum ipsum laboriosam, magnam magni minima modi officia porro quod rem repudiandae soluta! Id, libero?
Texto large
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam consectetur delectus dolore doloribus hic illum ipsum laboriosam, magnam magni minima modi officia porro quod rem repudiandae soluta! Id, libero?

Tenemos varias clases mas disponible para el texto con las que puedes experimentar

  • Alinear
    • center
    • right
    • justify
  • Tamaño
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large

Hipervinculos

Los hipervínculo se pueden personalizar con Ligne, puedes agregar unas cuantas clases para darle un estilo único a cada uno; 

            
Link 1
Link 2
Link 3
Link 4
Link 5

Albert E. Hidalgo Taveras on GitHub