Presentamos la guía de estilos, la cual te ayudará con el desarrollo de los diferentes productos digitales propios de la marca Laboratoria, dónde podrás realizar piezas de manera rápida con todos los elementos del branding actual.

Soporte de Stylelab

Stylelab es un proyecto de Laboratoria open source. Es un proyecto desarrollado como parte del Bootcamp 2017-II, un trabajo colaborativo entre desarrolladoras Front-End y UX Designers.

Tabla de contenido

• Instalación

Documentación

• Uso de componente
• Componente Button
• Componente Typography
• Componente Card

Instalación

stylelab está disponible en npm package.

npm install stylelab

Uso de componente

import React from "react";
import { Button } from "stylelab";

function App() {
  return (
    <Button yellow bold>
      Hello World
    </Button>
  );
}

render(<App />, document.querySelector("#app"));

Importando varios componentes

import { Button, Typography, Card } from 'stylelab';

}

Componente Button

Opciones: Se modifica el estilo del botón agregando los siguientes atributos:
Colores de fondo: yellow, green o pink.
Tamaño: big, medium o small.
Color de Fuente: white.
*El color negro de la fuente ya esta predetermiando.
Grosor de fuente: bold.

Ejemplo

import React from "react";
import { Button } from "stylelab";

function App() {
  return (
    <div>
      <Button yellow small>
        Laboratoria
      </Button>
      <Button pink medium bold>
        Laboratoria
      </Button>
      <Button green big white>
        Laboratoria
      </Button>
    </div>
  );
}

render(<App />, document.querySelector("#app"));

Componente Typography

Demasiados estilos/tamaños de letras pueden arruinar cualquier diseño. Stylelab cuenta con una escala tipográfica, tiene un conjunto limitado de tamaños.

Opciones: Se modifica el estilo agregando los siguientes atributos: Atributos de tamaño title1: Título principal.
title2: Título secundario.
title3: Título terciario.
phrase: Usado en frases. body body2
Atributo de colores
yellow, green o pink
Atributo para subrayado
under
Atributo grosor de fuente
bold

Ejemplo

import React from "react";
import { Typography } from "stylelab";

function App() {
  return (
    <div>
      <Typography title1 bold>
        Laboratoria LABORATORIA
      </Typography>

      <Typography title2 green>
        Laboratoria LABORATORIA
      </Typography>

      <Typography title3 pink>
        Laboratoria LABORATORIA
      </Typography>

      <Typography phrase yellow under>
        Laboratoria LABORATORIA
      </Typography>

      <Typography body bold green>
        Laboratoria LABORATORIA
      </Typography>

      <Typography body2 pink under>
        Laboratoria LABORATORIA
      </Typography>
    </div>
  );
}

render(<App />, document.querySelector("#app"));

Componente Card

Opciones: Se modifica el estilo agregando los siguientes atributos: Atributos de tamaño
big small
Atributo de fondo de color
yellow, green o pink

Ejemplo

import React from "react";
import { Card } from "stylelab";

function App() {
  return (
    <div>
      <Card pink big>
        <span>720</span>
        <p>HORAS DE RENDIMIENTO</p>
      </Card>
      <Card green small>
        <span>720</span>
        <p>HORAS DE RENDIMIENTO</p>
      </Card>
      <Card yellow big>
        <span>720</span>
        <p>HORAS DE RENDIMIENTO</p>
      </Card>
    </div>
  );
}

render(<App />, document.querySelector("#app"));