0.0.1 • Published 6 years ago
laboratoria-style-guide v0.0.1
< L > styleguide
Esta guia de estilos está diseñada con el uso componentes React que pueden combinarse para ayudar a los desarrolladores a crear los diferentes productos digitales de Laboratoria.
Instalación
Ejecute el siguiente comando usando npm:
npm install laboratoria-style-guide
Uso
- Incluya en su proyecto cualquiera de los componentes proporcionados por esta guía de estilos:
import {Button, Typography, Link} from 'laboratoria-style-guide';
- Renderizar el elemento en el DOM con React:
ReactDOM.render(
<div>
<Typography h1 bitter> Título 1 </Typography>
<Button primary small> Botón primario </Button>
<Link p colorSB bold> Link secundario B </Link>
</div>,
document.querySelector('#app')
);
Ejemplos
1. Botones
ReactDOM.render(
<div>
<Button primary small> Botón primario </Button>
<Button secondaryA medium> Botón secundario </Button>
<Button secondaryB large> Botón secundario </Button>
</div>,
document.querySelector('#app')
);
Estilos | Opciones |
---|---|
Tamaño botón | small, medium, large |
Tipo botón | primary, secondaryA, secondaryB |
2. Links
ReactDOM.render(
<div>
<Link h3 colorSA> Link secundario A </Link>
<Link p colorSB bold> Link secundario B </Link>
</div>,
document.querySelector('#app')
);
Estilos | Opciones |
---|---|
Tipo link | colorSA, colorSB |
Tamaño fuente | h1, h2, h3, h4, paragraph |
Grosor fuente | bold |
3. Tipografía
ReactDOM.render(
<div>
<Typography h1 bitter> Título 1 </Typography>
<Typography h2 bold colorSA> Título 2 </Typography>
<Typography h3 bold colorSB> Título 3 </Typography>
<Typography h4 bold> Título 4 </Typography>
<Typography paragraph> Párrafo </Typography>
</div>,
document.querySelector('#app')
);
Estilos | Opciones |
---|---|
Tipo fuente | bitter, (por defecto: 'Open Sans', sans-serif) |
Tamaño fuente | h1, h2, h3, h4, paragraph |
Color fuente | colorP, colorSA, colorSB |
Grosor fuente | bold |
0.0.1
6 years ago