Skip to content

Variables Cheatsheet

Índice de componentes

Componentes y derivadas de Holygrail2. Enlaces a cada sección de la guía.

Base y sistema

Botones y controles

Formularios y selección

Contenido y enlaces

  • Cards (box3, checkbox-radio)
  • md-link (line-top, line-bottom)
  • md-toggle / md-toggle-lines
  • Links (link-line, link-raw, link4, link-button-prev)
  • List (list-clear, list-disc, list-inline, list-inline-flex, list-box, list-button, list-state)
  • Tag (tag-warning, tag-info, tag-valid, tag-alert, tag-feel, tag-limited, tag-new)

Overlays y feedback

Navegación y MD

Datos y especiales

Layouts

Grid System

El grid de HolyGrail2 se ha reducido. El paquete sigue emitiendo las rejillas .grid-cols-{n} con sus variantes por breakpoint, .container-fluid, .row, .bleed-0 y el padding base de [class^=col-]. Los contenedores numerados, la matriz de columnas y los helpers de spacing salieron en 1.4.36 y 1.4.37 — ver Movido a HolyGrail5.

1
2
3
4
5
6
7
8
9
10
11
12

Movido a HolyGrail5

Las versiones 1.4.36 y 1.4.37 retiraron 232 clases de HolyGrail2 porque HolyGrail5 ya las emite. Si necesitas alguna, no la reintroduzcas aquí: instala holygrail5 y cárgalo junto a este paquete.

Spacing 120

.m-0, .m-112, .m-12, .m-120, .m-128, .m-16, .m-160, .m-2, .m-20, .m-24, .m-32, .m-4, .m-40, .m-48 … y 106 más

Columnas 74

.col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1 … y 60 más

Contenedores 20

.container, .container-10, .container-11, .container-12, .container-2, .container-3, .container-360, .container-4, .container-496, .container-5, .container-512, .container-6, .container-640, .container-7 … y 6 más

Rejillas sueltas 11

.grid-1, .grid-2, .grid-2-desktop, .grid-2-wide, .grid-3, .grid-3-6-8, .grid-auto, .grid-cols-6-center, .grid-gap-16, .grid-gap-8, .list-grid

Gaps 3

.colgap-16, .colgap-8, .gap-8

Fila y bleed 3

.bleed, .bleed-4, .bleed-8

Otros 1

.swiper-container

Lo que sigue emitiendo HolyGrail2

Layout: .container-fluid .bleed-0 .col-lg-4 y el padding base de [class^=col-]. Ojo: .row, .col, .grid-4 y .grid-8 ya no existen como clase suelta; solo sobreviven dentro de otros selectores (.bleed-0 > .row, .stories-grid .grid-4), que apuntan a clases que el paquete ya no emite.

Rejillas: .grid-cols-2|3|4|6|8|12 con variantes {bp}:grid-cols-{n}, más .sm:grid-1|2|3|4|8 y .sm:grid-gap-16.

Spacing por eje: .mx-* (41) y .px-* (40), más .mx-auto .ml-auto .mr-auto, y los gaps .gap-16 .column-gap-8|16 .row-gap-8|16.

Estos son los siguientes candidatos a salir, pero no es un movimiento equivalente: HolyGrail5 los llama con prefijo (.hg-mx-*, .hg-px-*, .hg-gap-16) y no tiene .container-fluid. Borrarlos de aquí obliga a renombrar en los proyectos que los usan.

Resoluciones

Tamaño de Pantalla
Número de Columnas
Tipo de Resolución
Ancho de Columnado
xs
1
Mobile
1px
sm
2
Tablet
768px
md
3
Desktop
992px
lg
4
Large Desktop
1280px
xl
5
Extra Large Desktop
1440px

Variables

  • $c-white
    #fff
  • $c-black
    #000
  • $c-light-grey
    #F9F9F9
  • $c-middle-grey
    #a9a9a9
  • $c-dark-grey
    #737373
  • $c-primary-3
    rgba(0, 0, 0, 0.3)
  • $c-primary-15
    rgba(0, 0, 0, 0.15)
  • $c-primary-30
    rgba(0, 0, 0, 0.3)
  • $c-primary-60
    rgba(0, 0, 0, 0.6)
  • $c-primary-97
    rgba(0, 0, 0, 0.97)
  • $c-secondary-3
    rgba(255, 255, 255, 0.3)
  • $c-secondary-15
    rgba(255, 255, 255, 0.15)
  • $c-secondary-30
    rgba(255, 255, 255, 0.3)
  • $c-secondary-60
    rgba(255, 255, 255, 0.6)
  • $c-secondary-97
    rgba(255, 255, 255, 0.97)
  • $c-primary
    #000
  • $c-secondary
    #000
  • $c-accent
    #B40016
  • $c-error
    #B40016
  • $c-sale
    #ffce4e
  • $c-info
    #1a32a4
  • $c-info-light
    #E5EAFF
  • $c-valid
    #12882c
  • $c-warning
    #ffce4e
  • $c-notice
    #e5740b
  • $c-orange
    #e5740b
  • $c-limited
    #000
  • $c-success
    #12882c
  • $c-alert
    #ffce4e
  • $c-facebook
    #186CF1
  • $c-google
    #4285f4
  • $c-naver
    #03cf5d
  • $c-wechat
    #2dc100
  • $c-feel
    #000000
  • $c-feel-light
    #f0f0f0
  • $c-feel-dark
    #a9a9a9
  • $c-tier-silver
    #87888d
  • $c-tier-platinum
    #5b7fa1
  • $c-tier-gold
    #a38a6b
  • $bg-light
    #f0f0f0
  • $bg-dark
    #000
  • $bg-black
    #000
  • $c-bg-light
    #000
  • $c-bg-dark
    #fff
  • $white-smoke
    #f0f0f0
  • $primary
    #000000
  • $primary-guide
    #363636
  • $secondary-guide
    #6759bb
  • $ternary-guide
    #6759bb
  • $list-disc-color
    #1a1a1a

Typography

h2
Aa
18px
24px
1.2
"bold"
title-l-b
Aa
14px
14px
1.4
"semibold"
title-s
Aa
12px
12px
1.4
"regular"
suisse-1
Aa
16px
20px
1.5
"regular3"
suisse-2
Aa
13px
14px
1.1
"regular3"
suisse-body
Aa
10px
12px
1.1
"regular3"
p-tag
Aa
8px
8px
1
"light"
semantic
Aa
13px
13px
1
"light"
title-l
Aa
14px
14px
1.4
"light"
title-m
Aa
12px
12px
1.4
"light"
text-m
Aa
12px
13px
1.5
"light"
text-l
Aa
12px
12px
1.5
"light"

Headers Fixers

12
12px
1.5
14
14px
1.5
16
16px
1.5
18
18px
1.5
20
20px
1.2
24
24px
1.2
32
32px
1.2
40
40px
1.2

Headers Fluids

1
60px
160px
0.8
2
40px
100px
0.9
3
20px
30px
0.9

UI Components

Buttons

La línea rosa indica la zona de click en botones transparentes.

Estado
Primary
Secondary
Tertiary
Label M
Badge
Default
Hover
Active
Disabled

Button sizes

Clases de tamaño: .btn--mini, .btn--small, .btn--medium, .btn--large, .btn--xlarge, .btn--mini-rd, .btn--full, .btn--round

.btn--mini
.btn--small
.btn--medium
.btn--large
.btn--xlarge
.btn--mini-rd
.btn--full
.btn--round

.btn-link-tab

Button link tab:btn-lines

Tipos

btn disabled

select

36 (EUR 46)
1

Button group

Tabs

Uno o otro

Radio Button

Debes seleccionar las colecciones que te interesan
Debes seleccionar las colecciones que te interesan

Si - no

checkbox

checkbox-card

Accesibilidad

Input

Debes rellenar este campo
Debes rellenar este campo

Cards

Normal

is-rtl

has icon-pre

has icon-pre, is-rtl

has light, has icon-pre

has light, has icon-pre, is-rtl

md-toggle

Normal

is-rtl

has light, has icon-pre

List

Listas. Derivadas: list-clear, list-disc, list-inline, list-inline-flex, list-inline-clear, list-mini, list-box, list-button, list-selection, list-state, list-breadcrumb, list-table, h-size-selector. Con flex-nowrap / text-nowrap para no salto de línea.

  • list-clear 1
  • list-clear 2
  • list-disc 1
  • list-disc 2

Tag

Etiquetas de estado. Derivadas: tag-warning, tag-info, tag-valid, tag-alert, tag-feel, tag-limited, tag-new.

tag-warning tag-info tag-valid tag-alert tag-feel tag-limited

Tooltip

Tooltips. Clases: tooltip-sm, tooltip-sm-temp, tooltip-sm-old, has-tooltip, has-tooltip-temp. Posiciones: tooltip-br, tooltip-tr, tooltip-tl, tooltip-bl-temp, tooltip-tl-temp. store-state para indicador de estado.

Contenido del tooltip

Progressbar

Barra de progreso. Contenedor .progressbar, barra de estado .progressbar-status (ancho en % o flex).

Toast

Notificación fija inferior. Clase .toast; añadir .appear para mostrar. Posición fija abajo (centrado en desktop).

Bottom-sheet

Panel deslizable desde abajo. Ver elements/_bottom-sheet.scss.

Drawer

Panel lateral. .drawer, .drawer-overlay. Tamaños: drawer-sm (424px), drawer-xl (720px). Partes: drawer-header, drawer-body, drawer-footer. Activar con body.open-drawer o body.body-sidebar-open.

Banners

Banners y mensajes. Derivadas: banner-warning, banner-info, banner-valid, banner-alert, banner-feel, banner-limited, banner-app. marketing-spot para bloque con borde.

md-accordion

Acordeón. .md-accordion, .md-accordion-panel, .md-accordion-content. Modificador .has-lines.

md-dialog

Diálogos. Ver elements/_md-dialog.scss.

md-drawer

Drawer Material Design. Ver elements/_md-drawer.scss.

md-buttons

Contenedor de botones MD. .md-button-wrapper. Ver elements/_md-buttons.scss.

Datalist

Listas de datos. Ver elements/_datalist.scss.

Color selector

Selector de color. Ver elements/_color_selector.scss.

Tabs specials

Variantes de tabs y listas: ico-round, ico-round-sm, checkbox-ico, checkbox-box, list-box, multiple-table, two-table.

Animated

Componentes animados. Ver elements/_animated.scss.

Runway

Layout runway. Ver layouts/_runway.scss.

Hgbread

Breadcrumb. Ver layouts/_hgbread.scss.

Header account

Cabecera de cuenta. Ver layouts/_header_account.scss.

Box3

Contenedor flexible en fila. Partes: box3-content, box3-middle, box3-top, box3-right, box3-img, box3-price. Usado en Cards con checkbox-radio (check-no, check-top, check-center).

box3-content
box3-middle

Card9

Card de producto. Partes: card9-image, card9-add, card9-sizes, card9-wrap-details, etc. Ver layouts/_card9.scss.