Holygrail2 Update
c-primary
c-secondary
c-accent
c-white
c-black
c-dark-grey
c-middle-grey
c-light-grey
c-sale
c-error
c-info
c-success
c-warning
c-notice
Espaciados Fijos
Margin m- mt- mr- mb- ml-
2
4
8
16
20
24
32
40
56
64
72
80
96
112
160
Padding p- pt- pr- pb- pl-
MB-
MT-
MX-
MY-
MR-
ML-
PB-
PT-
PX-
PY-
PR-
PL-
Name
768px
992px
LINE HEIGHT
WEIGHT
Clase
Font size min
Font size max
line-height
Font light (100)
Font regular (400)
Font medium (500)
Font semibold (600)
Font bold (700)
Clase
ALTURA SM
ALTURA MD
Visible
.hidden
display none important
.only-mobile
inline-block en mobile
.only-mobile-flex
Visible Sólo a partir de sm
.only-desktop
Flex en desktop a partir de sm
.only-desktop-flex
Flex en desktop a partir de sm
.sm:hidden
display :hidden max width sm
Textuales
.text-center
Centrado de texto
.text-left
Alineación izquierda
.text-right
Alineación derecha
.text-justify
Texto justificado
.font-l
font-light
.font-r
font-regular
.font-b
font-bold
.font-sb
font-semibold
.has-ellipsis
elipsis básica
Helpers Background
.bg-cover
background cover
.bg-line
Linea
.reverse
.sm: .md: .lg:reverse
.smmax:reverse
reverse hasta sm
.video-cover
centrado con absolutes 50%
Scroll
.ov-scroll
scroll con touch
.scrollbar
cambiamos el background
.ov-custom
scroll personalizable
Helpers varios
.cursor-pointer
Un cursor
.p-wrap
position relative al 100%
.w-max
max-content
Border
.hr
línea normal
.border-1
1px solid $c-middle-grey
.border-t
top 1px $c-middle-grey
.border-b
bottom 1px $c-middle-grey;
.border-l
left 1px $c-middle-grey
.border-r
right 1px $c-middle-grey;
.border-b2
bottom 1px $c-primary
.border-t2
top 1px $c-primary
Flex
.d-inline
inline-block
.svg-iflex
descripcion
.flex-vcenter
centrado verticall forced
.flex-1
flex: 1 1 0%
.flex-auto
flex: 1 1 auto
.flex-auto
flex: 0 1 auto
.flex-none
flex: none
Especiales
.sm:mb-16
sm 16px desde sm
.smmax:mb-16
sm 16px hasta sm
.sm:order-last
order: 3;
.reverse (.sm:reverse)
wrap-reverse
.absolute-middle
centrado con absolute
.is-invert
inversion
.p-stick
position sticky top0
desde 0 col-xs
desde 768px col-sm
desde 992px col-md
desde 1280px col-lg
desde 1440px col-xl
col-xs-1
col-xs-2
col-xs-3
col-xs-4
col-xs-5
col-xs-6
col-xs-7
col-xs-12
col-xs-9
col-xs-10
col-xs-11
col-xs-12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1
col-xl-2
col-xl-3
col-xl-4
col-xl-5
col-xl-6
col-xl-7
col-xl-8
col-xl-9
col-xl-10
col-xl-11
col-xl-12
col-xl-24
@include ratio(16, 9);
.rat-main pt: 133.25%
.rat-2-3 pt: 150% --real , pero ahora falso
.rat-3-4 pt: 133.33333%%
.rat-1-1 pt: 100%
.rat-4-3 pt: 75%%
.rat-3-2 pt: 66.66667%
.rat-16-9pt: 56.25%
.rat-2-1 pt: 50%
.rat-21-9 pt:42.85714%
NORMAL
HOVER
DISABLED
NORMAL
HOVER
DISABLED
En algunos casos los botones pueden ir acompañados de un icono.
Buttons Social
normal
Hover
disabled
btn--mini
btn--xlarge
btn--full
btn--mini-rd
ico-post
ico-post
ico-post
Action
Action
Inputs con prefijo
Ej: Tus comentarios aquí
list-clear
list-inline
list-breadcrumb
.select
.select.select-label
.select.select-size
.select.select-flat-no-icon
tooltip-sm
tooltip-sm tooltip-tl
tooltip-sm tooltip-tr
tooltip-sm tooltip-br
banner warning .marketing-spot, Lorem ipsum dolor
banner warning .bg-warning , Lorem ipsum dolor
banner info .bg-info , Lorem ipsum dolor
banner valid .bg-success , Lorem ipsum dolor
banner alert .bg-alert , Lorem ipsum dolor
banner feel .bg-feel , Lorem ipsum dolor
Zapato tacón piel negro pulsera
Ref. 1412/950/800
Negro
89,95 €
59,95 €
89,95 €
Cantidad
Talla
Ver disponibilidad en tienda