holygrail Css & more
Angular widgets built from the ground up using only
Holygrail CSS
No dependencies on 3rd party JavaScript.
npm install holygrailcss
This page is an overview of the Holygrail documentation and related resources.
Holygrail is a CSS and html library for building user interfaces. Learn what Holygrail is all about on our homepage .
Antes de nada, crearemos un custom.scss donde personalizaremos nuestro holygrail antes de importarlo
// Importamos fuentes
$font-family-primary: 'Fuente-Regular-Pro';
$font-family-light: 'Fuente-Light-Pro';
$font-family-regular: 'Fuente-Regular-Pro';
$font-family-medium: 'Fuente-Medium-Pro';
$font-family-bold: 'Fuente-Bold-Pro';
$font-family-primary: 'Fuente-Regular-Pro';
//si cada fuente tiene diferente peso y ya la importamos
$font-weight-light: inherit;
$font-weight-regular: inherit;
$font-weight-medium: inherit;
$font-weight-bold: inherit;
$font-family-secondary:"Times new roman"!default;
// Importamos tantas font face como necesitemos
@font-face {
font-family: $font-family-bold;
src: url('../fuente.eot');
src: url('../fuente.eot?#iefix') format('embedded-opentype'),
url('../fuente.woff2') format('woff2'),
url('../fuente..woff') format('woff'),
url('../fuente.ttf') format('truetype'),
}
// Importamos fuentes
@import url('https://fonts.googleapis.com/...');
$font-family-primary: 'google-font-family';
$font-family-light: 'google-font-family';
$font-family-regular: 'google-font-family';
$font-family-medium: 'google-font-family';
$font-family-bold: 'google-font-family';
$font-family-primary: 'google-font-family';
//si cargamos por ejemplo con google fonts
$font-weight-light: 300;
$font-weight-regular: 500;
$font-weight-medium: 700;
$font-weight-bold: 900;
$font-family-secondary:"Times new roman"!default;
Antes de nada, crearemos un custom.scss donde personalizaremos nuestro holygrail antes de importarlo
$primary-guide:#00bfcb;
$error-primary: #FD675E ;
$link: rgb(207, 236, 240) ;
$linkHover: #999 ;
$black: rgb(3, 2, 2) ;
$primary: #000 ;
//Actualizamos las variables globales
$totalCols :12;
$padding-global: 8px;
$padding-button: 8px;
$padding-btn: 16px;
$height-inputs: 48px;
//Modificamos los tamaños de containers
$container: 800px;
$container-2: 700px;
$container-3: 900px;
$container-4: 350px;
$transition:278ms;
$height-xs:80px;
$height-sm:100px;
$height-md:350px;
$height-lg:400px;
$height-xl:450px;
$height-full:100vh;
$height-home:calc(100vh - 80px);
Customización de headers, margenes y paddings
$headers:
/* name : xs, sm, md, lg, xl,line-height,font-weight */
(h1: (32px, 32px, 32px, 32px, 40px, 1.2, "medium" ),
h2: (24px, 24px, 24px, 24px, 32px, 1.2, "medium" ),
h3: (18px, 18px, 18px, 18px, 24px, 1.2, "medium" ),
h4: (16px, 16px, 16px, 16px, 18px, 1.2, "medium" ),
h5: (14px, 14px, 14px, 14px, 16px, 1.2, "medium" ),
h6: (12px, 12px, 12px, 12px, 14px, 1.2, "medium" ),
h7: (10px, 10px, 10px, 10px, 12px, 1.2, "medium" ),
h8: ( 8px, 8px, 8px, 8px, 10px, 1.2, "medium" ),
display1: (32px, 32px, 32px, 32px, 48px, 1.2, "bold" ),
display2: (20px, 20px, 20px, 20px, 40px, 1.2, "bold" ),
display3: (16px, 16px, 16px, 16px, 24px, 1.5, "medium" ),
display4: (14px, 14px, 14px, 14px, 24px, 1.5, "medium" ),
display5: (14px, 14px, 14px, 14px, 18px, 1.5, "regular"),
display6: (12px, 12px, 12px, 12px, 18px, 1.5, "regular"),
display7: (14px, 14px, 14px, 14px, 18px, 1.5, "medium" ),
p1: (12px, 12px, 12px, 12px, 14px, 1.4, "regular"),
p2: (14px, 14px, 16px, 16px, 18px, 1.4, "regular"),
p4: (14px, 14px, 16px, 16px, 18px, 1.4, "medium" ));
Antes de nada, crearemos un custom.scss donde personalizaremos nuestro holygrail antes de importarlo
// Importamos el resto de Holygrail CSS
@import "../path/to/holygrailcss";