- Some requirements: Title may be one or more lines long.
- Title overlaps the image but teaser aligns to it.
- Text keeps the layout if there is no image.
- Image is content, not background.
- The height of this hero depends on its content lenght: may be dictated by the image or the texts.
- And this is just the desktop layout…
What's new in CSS?
Introduction to
CSS Grid and
CSS Custom Properties
by Tamás Hajas
DrupalCon Vienna 2017
A complicated hero
A complicated hero
- How to do it?
- Absolute positioning and
- z-index and
- margin / padding tricks and
-
width declaration (using) calc(). - OR…
CSS Grid
Tamás Hajas
Drupal / Web Project Manager &
Front-end Developer @
Integral Vision Ltd
Slides
A complicated hero:
simplified with CSS Grid!
An ordinary page
Page title
Main content
Define grid container
.container {
display: grid;
}
Define columns
.container {
display: grid;
grid-template-columns: 2fr 1fr;
}
Place items by columns
.container {
display: grid;
grid-template-columns: 2fr 1fr;
}
.page-main {
grid-column: 1/2;
}
Place items by rows
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 3fr 1fr;
}
.page-main {
grid-column: 1/2;
grid-row: 2/4;
}
.page-aside {
grid-row: 1/3;
}
Set grid gap
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 3fr 1fr;
grid-gap: 10px 20px;
}
.page-main {
grid-column: 1/2;
grid-row: 2/4;
}
.page-aside {
grid-row: 1/3;
}
Responsive "gallery" with CSS Grid
A
B
C
D
E
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 30px;
}
CSS Grid and…
:root {
--gutter: 10px;
}
@media (min-width: 800px) {
:root {
--gutter: 60px;
}
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: var(--gutter);
}
CSS Custom Properties for Cascading Variables
Syntax
:root {
--main-color: #055;
}
.box {
color: var(--main-color);
}
Syntax
--foo:; /* Invalid! (No value.) */
--foo: ; /* Valid. (Value is an empty space.) */
--foo: var(--bar) /* Valid. (Value is another CP.) */
--foo != --FOO /* Case sensitive. */
Fallbacks
var(--main-color, green);
var(--main-color, var(--sec-color, green));
var(--main-color, var(--sec-color, var(--third-color, green)));
etc… Don't go crazy! :)
Set just what you want…
* {
--box-shadow-x: initial;
/* y, blur, spread, color, inset */
box-shadow:
var(--box-shadow-x, 0)
/* y, blur, spread, color, inset */;
}
.box {
--box-shadow-blur: 5em;
--box-shadow-color: #ee7600;
--box-shadow-inset: inset;
}
.box:hover {
--box-shadow-color: black;
}
CP and JavaScript: follow!
const eyesList = document.getElementsByClassName('eyes');
const root = eyesList[0];
document.addEventListener("mousemove", evt=> {
let x = evt.clientX / innerWidth;
let y = evt.clientY / innerHeight;
root.style.setProperty('--mouse-x', x);
root.style.setProperty('--mouse-y', y);
});
.iris {
position: absolute;
top: calc(2px + 100px * var(--mouse-y) );
left: calc(2px + 130px * var(--mouse-x));
}
Performance
Do not use just because it's "modern"!
https://codepen.io/stowball/post/css-variables-are-a-sometimes-food
Credits
- Rachel Andrew: presentations, articles, gridbyexample.com
- Lea Verou: CSS Variables: var(--subtitle);
Join us for contribution sprint!
-
Mentored Core Sprint
9:00–18:00
Room: Stolz 2 -
First Time Sprinter Workshop
9:00–12:00
Room: Lehar 1 – Lehar 2 -
General Sprint
9:00–18:00
Room: Mall
#drupalsprints
What did you think?
Locate this session at the DrupalCon Vienna website:
https://vienna2017.drupal.org/sessions/whats-new-css-introduction-css-grid-and-css-custom-properties
Take the survey!
https://www.surveymonkey.com/r/drupalconvienna
Thank you!
Thanks for your attention!
Tamás Hajas
Browser support of CSS Grid
Screenshot made on
Browser support of CP
Screenshot made on