Variables nativas CSS, Front-End con superpoderes para tu WordPress

VARIABLES NATIVAS CSS
FRONT-END CON SUPERPODERES

https://www.wptarragona.com/
https://www.meetup.com/es-ES/wordpresstarragona/

var me = {
name: Aleix Martí Carmona
age: 33
job: {
company: Interactius
web: https://interactius.com
position: front-end
technologies: [
HTML,
CSS,
JS,
WordPress
]
since: 2014
}
twitter: @Nemesis_XIII
codepen: https://codepen.io/Aleix/
}

Icons made by Freepik from www.flaticon.com
Esta presentación contiene fragmentos de código
No todo el código está completo. Es funcional pero
es a título de ejemplo
Para cualquier duda consulte con su programador

ÍNDICE
1. INTRODUCCIÓN A LAS VARIABLES CSS
2. CÓMO SE USAN
3. ¡VAMOS AL LÍO!
4. EJEMPLOS DE USO
5. INTEGRACIÓN CON WORDPRESS

01
INTRODUCCIÓN A LAS VARIABLES CSS
CUSTOM PROPERTIES

Características
● Similares a las variables de los preprocesadores (LESS, SCSS …)
● No necesitan ser compiladas
● No hace falta refrescar la página para ver los cambios
● Código semántico
● Evitan código duplicado
● Facilitan cambios
● Integración con preprocesadores
● Compatibles con la mayoría de navegadores
INTRODUCCIÓN A LAS VARIABLES CSS

Similares a las variables de los preprocesadores
CARACTERÍSTICAS
$card-padding: 2em;
$main-color: #BADA55;
.card {
padding: $card-padding;
background-color: $main-color;
}
.title {
color: $main-color;
}
:root {
--main-color: #BADA55;
--card-padding: 2em;
}
.card {
padding: var(--card-padding);
background-color:var(--main-color);
}
.title {
color: var(--main-color);
}
Variables CSS
Permiten guardar valores para poder usarlos múltiples veces
SCSS

No necesita compilación
CARACTERÍSTICAS
$card-padding: 2em;
$main-color: #BADA55;
.card {
padding: $card-padding;
background-color: $main-color;
}
.title {
color: $main-color;
}
.card {
padding: 2em;
background-color: #BADA55;
}
.title {
color: #BADA55;
}
Una vez compiladas, las variables de los preprocesadores mantienen su valor
SCSS compiladoSCSS sin compilar
:root {
}
.card {
background-color:var(--main-color);
}
.title {
}
Variables CSS

Código semántico
CARACTERÍSTICAS
.card {
padding: 2em;
background: linear-gradient(
to bottom,
rgba(0,0,255,1),
rgba(0,0,255,0.2));
color: #BADA55;
}
:root {
--blue-gradient: linear-gradient(
to bottom,
rgba(0,0,255,1),
rgba(0,0,255,0.2));
--brand-color: #BADA55;
}
.card {
background: var(--blue-gradient);
color: var(--brand-color);
}
Si las variables están bien definidas, el código es más legible
CSS usando variablesCSS sin usar variables

Integración con preprocesadores
CARACTERÍSTICAS
:root {
--main-color: red;
}
$main-color: var(--main-color);
.card {
color: $main-color;
}
:root {
--main-color: red;
}
.card {
}
Se pueden integrar con preprocesadores para conseguir el máximo potencial de ambos
SCSS compilado usando variablesSCSS sin compilar usando variables

Compatibilidad con la mayoría de navegadores
CARACTERÍSTICAS
https://caniuse.com/#feat=css-variables

02
CÓMO SE USAN
DECLARACIÓN, SINTAXIS Y SCOPE

DECLARACIÓN
CÓMO SE USAN
--padding: 20px;
--Shadow: 0 0 10px 5px cyan;
--gradient: linear-gradient (to left, blue, red);
--color: var(--main-color);
Se declaran con un doble
guión seguido del nombre
de la variable.
Permiten guiones y
mayúsculas.
Pueden contener cualquier
valor válido de propiedades
CSS, incluso valores
complejos.
Se puede asignar otra
variable como valor.

color: var(--main-color, yellow);
color: var(--main-color, var(--fallback-color, #FF0))
color: red;
USO
CÓMO SE USAN
Para llamarlas, se usa la
función: var().
Se puede añadir un valor
como fallback, para que se
use en caso que la variable
no esté definida.
Se puede usar otra variable
como fallback.
Para evitar
incompatibilidad con
navegadores, se puede
definir la propiedad sin
variable.

SCOPE
CÓMO SE USAN
// Global scope
:root {
--color: red;
}
// Local scope
.card {
--card-color: blue;
}
div {
color: var(--color);
background-color: var(--card-color);
}
Se puede delimitar el scope
o ámbito de uso.
Si se declaran en el scope
:root serán accesibles
desde todo el documento.
Si se declaran en un ámbito
limitado, sólo de podrán
usar dentro de ése
elemento.
div.card {
background-color: var(--card-color);
}

SCOPE
CÓMO SE USAN
:root {
--color: blue;
}
#foo {
--color: orange;
}
.card {
--color: red;
}
* {
}
<p>some text</p>
<div id=”foo”>
<p>some text</p>
<div class="card">
<p>more text</p>
</div>
</div>
Dado el siguiente código, ¿de qué color serán los textos?
<p>some text</p>
<div id="foo">
<p>some text</p>
<div class="card">
<p>more text</p>
</div>
</div>

03
¡VAMOS AL LÍO!
EL PODER DE JAVASCRIPT

Skype permite elegir la configuración del tema entre claro y oscuro
¡VAMOS AL LÍO!
THEMES PERSONALIZADOS

<article class=”bright”>
<header> Another Brick in the Wall
</header>
<main>
<p>
We don't need no education….
</p>
</main>
<footer> © Pink Floyd </footer>
</article>
<article class=”dark”>
</header>
<main>
<p>
</p>
</main>
</article>
article.bright header,
article.bright footer {
color: #222;
background: hsl(0,0%,80%);
}
article.bright main {
background-color: hsl(0,0%,95%);
color: #222;
}
article.dark header,
article.dark footer {
color: #fff;
}
article.dark main {
color: #fff;
}
article.bright header,
article.bright footer {
color: #222;
}
article.bright main {
color: #222;
}
article.dark header,
article.dark footer {
color: #fff;
}
article.dark main {
color: #fff;
}
¡VAMOS AL LÍO!
THEME DINÁMICO - CLASS

<article>
</header>
<main>
<p>
</p>
</main>
</article>
¡VAMOS AL LÍO!
THEME DINÁMICO - VARIABLES
article {
--text-color: #222;
--bg-color: hsl(0,0%,80%);
--bg-color-main: hsl(0,0%,95%);
}
header,
footer {
color: var(--text-color);
background: var(--bg-color);
}
article {
background-color: var(--bg-color-main);
}
article {
--text-color: #fff;
--bg-color: hsl(0,0%,20%);
}
header,
footer {
}
main {
}

¡VAMOS AL LÍO!
THEME DINÁMICO
Fuente: imgflip.com

1. Controlar el elemento “root”:
const root = document.documentElement;
¡VAMOS AL LÍO!
THEME DINÁMICO
Los 4 pasos de JavaScript
4. Modificar el valor de la variable:
function changeVar() {
root.style.setProperty(‘--variable’, ‘valor’);
}
2. Controlar el “disparador” de la acción:
const btn = document.getElementById(‘boton’);
3. Capturar el evento o acción:
boton.addEventListener( ‘click’, changeVar);

¡VAMOS AL LÍO!
<button value="dark">Dark</button>
<button value="bright">Bright</button>
/* Definimos por defecto el tema claro */
:root {
--text-color: #222;
--bg-color: hsl(0,0%,80%);
}
header,footer {
}
main {
}
// Al hacer click en el botón cambiamos los estilos
const themes = document.querySelectorAll('button');
themes.forEach((theme) => {
theme.addEventListener('click', changeTheme)
})
function changeTheme(ev) {
switch (ev.target.value) {
case 'bright':
root.style.setProperty('--text-color', '#222');
root.style.setProperty('--bg-color', 'hsl(0,0%,80%)');
root.style.setProperty('--bg-color-main', 'hsl(0,0%,95%)');
break;
case 'dark':
root.style.setProperty('--text-color', '#fff');
root.style.setProperty('--bg-color', 'hsl(0,0%,20%)');
root.style.setProperty('--bg-color-main', 'hsl(0,0%,40%)');
break;
}
}
THEME DINÁMICO

¡VAMOS AL LÍO!
THEME DINÁMICO

¡VAMOS AL LÍO!
THEME DINÁMICO
Fuente: reactiongifs.com

28 / 0
04
EJEMPLOS DE USO
FRONT-END CON SUPERPODERES

Hue: ángulo de la rueda de color
Saturation: vívido o gris
Lightness: añadirle blanco o negro
Color puro: hsl( (0-360), 100%, 50%)
Fuente: sarasoueidan.com
hsl( 240, 100%, 50%)
#0000ff, rgb( 0, 0, 255 )
EJEMPLOS DE USO
HSL = Hue, Saturation, Lightness
hsl( 240, 100%, 30%)
#000099, rgb( 0, 0, 153 )
hsl( 240, 100%, 80%)
#9999ff, rgb( 153, 153, 255 )

EJEMPLOS DE USO
2. INPUT TYPE: RANGE

EJEMPLOS DE USO
<input type="range"
id="color-range" min="10" max="90"
value="0" step="1">
/* El color del main es el mismo que el
header/footer pero con más brillo */
:root {
--text-color: #fff;
--bg-color: hsl(0, 0%, 20%);
--bg-color-main: hsl(0, 0%, 40%);
}
header,footer {
}
main {
background-color:var(--bg-color-main);
}
const range = document.querySelector('#color-range');
range.addEventListener("input", changeTheme);
// El color de background se obtiene directamente del valor del input
// El color del texto es el inverso del valor del input
function changeTheme(e) {
let value = e.target.value;
let v = Number(value) + Number(20);
let bg = 'hsl(0,0%,'+ value +'%)';
let text = 'hsl(0,0%,'+ (100-value) +'%)';
let main = 'hsl(0,0%,'+ v +'%)';
root.style.setProperty("--bg-color", bg);
root.style.setProperty("--bg-color-main", main);
root.style.setProperty("--text-color", text);
}
2. INPUT TYPE: RANGE

EJEMPLOS DE USO
3. INPUT TYPE: COLOR

<input type="color" id="inputColor">
<input type="color" id="inputMainColor">
<input type="color" id="inputTextColor">
:root {
--text-color: #fff;
--bg-color: hsl(0,0%,20%);
}
header,footer {
}
main {
}
const inputColor = document.getElementById("inputColor");
const inputMainColor = document.getElementById("inputMainColor");
const inputTextColor = document.getElementById("inputTextColor");
// Cada input asigna el color a una parte distinta:
// header/footer, main, text
inputColor.addEventListener("input", function () {
root.style.setProperty("--bg-color", inputColor.value);
}, false);
inputMainColor.addEventListener("input", function() {
root.style.setProperty("--bg-color-main", inputMainColor.value);
}, false);
inputTextColor.addEventListener("input", function() {
root.style.setProperty("--text-color", inputTextColor.value);
}, false);
EJEMPLOS DE USO

“UN GRAN PODER CONLLEVA
UNA GRAN RESPONSABILIDAD”
Fuente: pixabay.com
EJEMPLOS DE USO

Fuente: imgur.com
EJEMPLOS DE USO

EJEMPLOS DE USO
4. PREVIEW (MOUSEOVER / MOUSEOUT)

<button id="batman"
value="batman">Batman</button>
/* Se usan las variables principales y se
definen otras para cada tema */
:root {
--batman-color-hue: ...
--batman-bg: …
--superman-color-hue: ...
--superman-bg: ...
--color-hue: 0;
--bg: 0;
}
main {
color: hsl(var(--color-hue), 100%, 50%);
background-color: var(--bg);
}
// Al pasar el cursor por encima del botón cambian los estilos
// A la variable principal se le asigna el valor de otra variable
const batman = document.getElementById('batman');
batman.addEventListener("mouseover", function(){
root.style.setProperty( '--color-hue', 'var(--batman-color-hue)' );
...
});
EJEMPLOS DE USO
4. PREVIEW (MOUSEOVER / MOUSEOUT)

data-status=”closed” data-status=”open”
EJEMPLOS DE USO
5. DATA-ATTRIBUTE

<div id="options" data-status="closed">
<button id="btn"></button>
<div id="panel">...</div>
</div>
const btn = document.getElementById("btn");
const options = document.getElementById("options");
// Al hacer click sobre el botón de menú
// cambia el estado “data-status” para abrir/cerrar la caja*
btn.addEventListener( "click", function() {
if ( options.getAttribute( 'data-status' ) == 'closed' ){
options.setAttribute('data-status', 'open');
} else {
options.setAttribute('data-status', 'closed');
}
});
[data-status="open"]{
--status-opacity: 1;
--status-height: auto;
--status-icon: "f00d";
}
[data-status="closed"]{
--status-opacity: 0;
--status-height: 0;
--status-icon: "f013";
}
[data-status] #btn:before {
content: var(--status-icon);
}
[data-status] #panel {
opacity: var(--status-opacity);
height: var(--status-height);
}
EJEMPLOS DE USO
5. DATA-ATTRIBUTE

EJEMPLOS DE USO
6. DATA-ATTRIBUTE

<body data-theme="sith">
<header>...</header>
<main>
<p>A long time ago in a galaxy far far away...</p>
<article class="card">
<div class="card__bottom">
<h2></h2>
<button class="card__button">
JOIN US!
</button>
</div>
</article>
</main>
<footer>...</footer>
</body>
/* Se definen variables para cada tema y se usan de
forma genérica */
[data-theme="yoda"] {
--bg-img: url('yoda.jpg');
--cite: 'May WordPress be with you';
}
[data-theme="vader"] {
--bg-img: url('vader.jpg');
--cite: 'Join the WordPress side';
}
.card {
background-image: var(--bg-img);
}
.card h2:before {
content: var(--cite);
}
EJEMPLOS DE USO
6. DATA-ATTRIBUTE

EJEMPLOS DE USO
7. INPUT TYPE: RADIO, DATA-ATTRIBUTE

<article id="theme" data-theme="red">
…
<input id="green" type="radio" name="color"
value="green">
[data-theme="red"]{
--h: 0;
--text-color: hsl(0,100%,100%); // blanco
}
[data-theme="green"]{
--h: 120;
--text-color: hsl(0,100%,0%); // negro
}
[data-theme="blue"]{
--h: 240;
--text-color: hsl(0,100%,100%); // blanco
}
header, footer {
background-color: hsl( var(--h), 100%, 50% );
}
const colors = document.querySelectorAll('input');
const theme = document.getElementById("theme");
colors.forEach((color) => {
color.addEventListener('click', setTheme)
})
function setTheme(ev) {
case 'red':
theme.setAttribute('data-theme', 'red');
break;
case 'green':
theme.setAttribute('data-theme', 'green');
break;
case 'blue':
theme.setAttribute('data-theme', 'blue');
break;
}
}
EJEMPLOS DE USO
7. INPUT TYPE: RADIO, DATA-ATTRIBUTE

Fuente: sarasoueidan..com
EJEMPLOS DE USO
COLOR HARMONIES

EJEMPLOS DE USO
8. INPUT TYPE: RANGE, HSL COMPLEMENTARIO

<input type="range"
name="color" id="color" min="0" max="360"
value="0" step="1">
/* Se calcula el color complementario */
:root {
--h: 0;
--comp-h: calc( var(--h) - 180);
}
/* El color del main es el mismo que el
header/footer pero con más brillo: 50% - 80% */
header, footer {
color: hsl( var(--comp-h), 100%, 50% );
}
main {
color: hsl( var(--comp-h), 100%, 80% );
}
const values = document.getElementById("values");
cost color = document.getElementById("color");
color.addEventListener('input', function(){
root.style.setProperty("--h", color.value);
}, false);
EJEMPLOS DE USO
8. INPUT TYPE: RANGE, HSL COMPLEMENTARIO

https://www.opendyslexic.org/
EJEMPLOS DE USO
OPEN DYSLEXIC

EJEMPLOS DE USO
9. INPUT TYPE: RADIO, FONT-FAMILY

<input type="radio" name="font"
value=”dancing”>
<input type="radio" name="font"
value=”dyslexic”>
/* Se aplica la fuente a todos los
elementos */
:root {
--font-family: 'Dancing Script';
}
* {
font-family: var(--font-family);
}
const fonts = document.querySelectorAll( 'input[name="font"]' );
fonts.forEach( ( font ) => {
font.addEventListener( 'click', changeTheme )
})
function changeTheme(ev) {
case 'dyslexic':
root.style.setProperty('--font-family', 'opendyslexic');
break;
case 'dancing':
root.style.setProperty('--font-family', 'Dancing Script');
break;
}
}
EJEMPLOS DE USO
9. INPUT TYPE: RADIO, FONT-FAMILY

Guardar un valor:
localStorage.setItem('key', 'value');
Recuperar un valor:
localStorage.getItem('key');
EJEMPLOS DE USO
BONUS TRACK: LOCAL STORAGE

const save = document.getElementById( 'save' );
save.addEventListener( 'click', function() {
localStorage.setItem( 'color', 'blue' );
}, false);
document.addEventListener( 'DOMContentLoaded', function(){
color = localStorage.getItem( 'preferences' );
root.style.setProperty('--main-color', color);
})
GUARDAR:
CARGAR:
EJEMPLOS DE USO

let preferences = [];
save.addEventListener( 'click', function() {
preferences[0] = inputColor.value;
preferences[1] = inputMainColor.value;
preferences[2] = inputTextColor.value;
localStorage.setItem( 'preferences', JSON.stringify(preferences) );
}, false);
if( localStorage.getItem( 'preferences' ) ){
preferences = JSON.parse( localStorage.getItem( 'preferences' ) );
root.style.setProperty('--bg-color', preferences[0]);
root.style.setProperty('--bg-color-main', preferences[1]);
root.style.setProperty('--text-color', preferences[2]);
}
EJEMPLOS DE USO

Fuente: knowyourmeme.com
https://codepen.io/Aleix
Collection: CSS Variables

05
INTEGRACIÓN CON WORDPRESS
YA QUE ESTAMOS EN UN MEETUP DE WORDPRESS...

FORMAS DE INTEGRACIÓN
● Child theme
● Theme propio
● Plugin

CHILD THEME: TWENTY-SEVENTEEN
functions.php

style.css

script.js

THEME PROPIO: UNDERSCORES
https://underscores.me/

footer.php

style.css

theme.js

functions.php

PLUGIN + TWENTY-FIFTEEN
custom-theme.php

custom-theme.js

custom-theme.css

Fuente: kisspng.com
JS
root.style.setProperty('--main-color', '#666');
CSS
:root {
}
div {
}
POST-ITS

Variables nativas CSS, Front-End con superpoderes para tu WordPress

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Similar a Variables nativas CSS, Front-End con superpoderes para tu WordPress

Similar a Variables nativas CSS, Front-End con superpoderes para tu WordPress (20)

Más de WordPress Tarragona

Más de WordPress Tarragona (7)

Variables nativas CSS, Front-End con superpoderes para tu WordPress