Utilitats
Classes CSS
Color de fons
-
.bg-color
-
.bg-white
-
.bg-black
-
.bg-primary
-
.bg-muted
-
.bg-supermuted
-
.bg-gradient
Colors de text
-
.text-color
-
.text-muted
-
.text-white
-
.text-black
-
.text-primary
-
.text-red
-
.text-green
-
.text-gradient
Color de degradat
-
.gradient-primary .bg-gradient
-
.gradient-secondary .bg-gradient
-
.gradient-feminism .bg-gradient
-
.gradient-primary .text-gradient
-
.gradient-secondary .text-gradient
-
.gradient-feminism .text-gradient
També pots definit un degradat personalitzat amb --gradient-start i --gradient-end
-
.bg-gradient
--gradient-start: var(--indigo) --gradient-end: var(--cyan) -
.text-gradient
--gradient-start: var(--indigo) --gradient-end: var(--cyan)
Tamanys de text
| .text-xs | font-size: 0.75rem |
| .text-sm | font-size: 0.875rem |
| .text-md | font-size: 1rem |
| .text-lg | font-size: 1.125rem |
| .text-xl | font-size: 1.25rem |
| .text-2xl | font-size: 1.666rem |
| .text-3xl | font-size: 2.369rem |
| .text-4xl | font-size: 3.157rem |
| .text-5xl | font-size: 4.209rem |
| .text-6xl | font-size: 5.653rem |
Pesos de text
|
.text-bold
| font-weight: 900 |
|
.text-regular
| font-weight: 500 |
Vores
| .border | border: 1px solid --border-color |
| .border-top | border-top: 1px solid --border-color |
| .border-bottom | border-bottom: 1px solid --border-color |
| .border-right | border-right: 1px solid --border-color |
| .border-left | border-left: 1px solid --border-color |
Color de les vores
| --border-color | Color de la vora, p.e.: --border-color: red |
| .border-white | Fa --border-color blanc |
| .border-black | Fa --border-color negre |
| .border-outline | Fa --border-color gris |
Radi de les vores
| .rounded-xs | border-radius: .5rem |
| .rounded-sm | border-radius: .75rem |
| .rounded-md | border-radius: 1rem |
| .rounded-lg | border-radius: 1.5rem |
| .rounded-xl | border-radius: 2rem |
Ombres
| .shadow | Afegeix ombra |
| .shadow-rises | Afegeix ombra en l'estat :hover |
Enllaços
Enllaços en estat :hover
Estats :focus
| .focus-primary | :focus taronja |
| .focus-primary-within | :focus-within taronja |
| .focus-dark | :focus negre |
| .focus-dark-within | :focus-within negre |
Llistes
| .list-reset | Elimina les propietats CSS per defecte de ul |
| .list-horizontal | Fa les llistes ul horitzontals |
Utilitats per a grid
| .span-1 | grid-column: span 1 |
| .span-2 | grid-column: span 2 |
| .span-3 | grid-column: span 3 |
| .span-4 | grid-column: span 4 |
| .md-span-1 | grid-column: span 1 (només en dispositius md) |
| .md-span-2 | grid-column: span 2 (només en dispositius md) |
| .md-span-3 | grid-column: span 3 (només en dispositius md) |
| .md-span-4 | grid-column: span 4 (només en dispositius md) |
| .sm-span-1 | grid-column: span 1 (només en dispositius sm) |
| .sm-span-2 | grid-column: span 2 (només en dispositius sm) |
| .sm-span-3 | grid-column: span 3 (només en dispositius sm) |
| .sm-span-4 | grid-column: span 4 (només en dispositius sm) |
Utilitats de bootstrap
A banda d'aquestes, el paquet Blobby hereta les utilitats de Bootstrap, consultables a la seua documentació.
.
Variables
Colors de la marca
--primary | $primary | #ff6720 |
--black | $black | #353949 |
--white | $white | #fff |
--gradient-primary-start | $gradient-primary-start | #d23517 |
--gradient-primary-end | $gradient-primary-end | #f39128 |
--gradient-secondary-start | $gradient-secondary-start | #38b34a |
--gradient-secondary-end | $gradient-secondary-end | #8cc949 |
--gradient-feminism-start | $gradient-feminism-start | #7d3a81 |
--gradient-feminism-end | $gradient-feminism-end | #c54687 |
--mes | $mes | #f95a32 |
--iniciativa | $iniciativa | #ad283f |
--verds | $verds | #5ab552 |
Escala de grisos
--gray-50 | $gray-50 | #f8faff |
--gray-100 | $gray-100 | #eef0f6 |
--gray-200 | $gray-200 | #e5e7ed |
--gray-300 | $gray-300 | #d1d3db |
--gray-400 | $gray-400 | #bec0c8 |
--gray-500 | $gray-500 | #aaadb6 |
--gray-600 | $gray-600 | #979aa4 |
--gray-700 | $gray-700 | #707380 |
--gray-800 | $gray-800 | #414554 |
--gray-900 | $gray-900 | #353949 |
--gray-1000 | $gray-1000 | #262934 |
Arc de Sant Martí
--yellow | $yellow | #ffd10f |
--orange | $orange | #f79226 |
--red | $red | #ef404d |
--purple | $purple | #a14a9c |
--blue | $blue | #55a4db |
--green | $green | #7fc347 |
--indigo | $indigo | #6610f2 |
--pink | $pink | #d63384 |
--teal | $teal | #20c997 |
--cyan | $cyan | #2dc7e6 |
Xarxes Socials
--facebook | $facebook | #3b5998 |
--twitter | $twitter | #00acee |
--instagram | $instagram | #e1306c |
--youtube | $youtube | #ff0800 |
--telegram | $telegram | #08c |
--tiktok | $tiktok | #000 |
--twitch | $twitch | #772ce8 |
--whatsapp | $whatsapp | #25d366 |
Interfície d'usuari
$body-bg | $gray-50 |
$text-color | $black |
$text-muted | $gray-700 |
$link-color | $primary |
$link-color-hover | $primary |
$link-decoration | none |
$link-decoration-hover | underline |
Tipografia
$font-family-sans-serif | 'Manrope', sans-serif; |
Tamanys de lletra
$text-xs | font-size: 0.75rem |
$text-sm | font-size: 0.875rem |
$text-md | font-size: 1rem |
$text-lg | font-size: 1.125rem |
$text-xl | font-size: 1.25rem |
$text-2xl | font-size: 1.666rem |
$text-3xl | font-size: 2.369rem |
$text-4xl | font-size: 3.157rem |
$text-5xl | font-size: 4.209rem |
$text-6xl | font-size: 5.653rem |
Ombres
$shadow-default | 0 0.8rem 1.7rem -0.3rem rgba($gray-900, 0.15),
0 0.5rem 1rem -0.5rem rgba($gray-900, 0.2),
0 -0.4rem 1rem -0.4rem rgba($gray-900, 0.015); |
$shadow-raised | 0 1.25rem 2.1rem -0.3rem rgba($gray-900, 0.15),
0 0.9rem 1.4rem -0.5rem rgba($gray-900, 0.2),
0 -0.75rem 1.4rem -0.4rem rgba($gray-900, 0.015); |
$box-shadow | $shadow-default |
Radi de les vores
$border-radius-xs | 0.5rem |
$border-radius-sm | 0.75rem |
$border-radius-md | 1rem |
$border-radius-lg | 1.5rem |
$border-radius-xl | 2rem |
$border-radius-pill | 50rem |
$border-radius | $border-radius-md |
$blob-radius | 10rem |