En este repositorio se separan los utilitarios de la librería bodystyle para disponer unicamente del apartado de utilitarios de la librería.
Podemos agregar el CDN de los utilitarios directamente en la cabecera del html para disponer de las funcionalidades.
<!DOCTYPE html>
<head>
<!-- META obligatorio para poder utilizar la libreria -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link con el CDN de los estilos css -->
<link rel="stylesheet" href="https://rawcdn.githack.com/FedericoManzano/utility-bodystyle/5776691724b2bbbd985af06c57bab9541780aa60/dist/css/utulitarios.min.css">
</head>O podemos añadir a los utilitarios como una dependencia de nuestr proyecto a través de los gestores de paquetes.
npm i body-utility
yarn add body-utilitySi lo que queremos es el código fuente de este repositorio lo podemos hacer con el comando
git clone https://github.com/FedericoManzano/utility-bodystyleLas clases CSS correspondientes a los bordes comienzan con .bor- y luego definimos si queremos bordes con radio o bordes pintados de algún color.
.box-ej {
width: 300px;
height: 300px;
background-color: black;
}<!-- Bordes en (PX) -->
<div class="box-ej bor-rad-10"></div>
<!-- Bordes en (%) -->
<div class="box-ej bor-rad-por-10"></div> <!-- 1 A 50 %-->
<!-- Figura redonda -->
<div class="box-ej bor-rad-por-50"></div>
<!-- Figura redonda a los lados -->
<div class="box-ej bor-pill"></div><!-- Bordes en (PX) -->
<div class="box-ej bor-10"></div>
<div class="box-ej bor-10"></div>
<div class="box-ej bor-50"></div>Para más información ver la documentación: https://bodystyle.000webhostapp.com/inicio/#/documentacion/bordes
El resto de los elementos podemos acceder desde contenido a la documentación oficial.
MIT (c) 2020 Bodystyle Info