confoo: you can use css for that!
TRANSCRIPT
You can use CSS for that!@rachelandrew @confooca
Box Alignment level 3Lining things up with
This is the vertical-centering module.
.box { display: flex; align-items: center; justify-content: center; }
<div class="box"> <img alt="balloon" src="square-balloon.jpg"> </div>
Flexbox
Centre the content of .box.
.wrapper { display: flex; } .wrapper li { min-width: 1%; flex: 1 0 25%; } .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: flex-start; } .wrapper li:nth-child(4) { align-self: flex-end; }
Flexbox
Aligning items within the flex
container
Box Alignment defines how these properties work in other layout methods.
The box alignment properties in CSS are a set of 6 properties that control alignment of boxes within other boxes.
CSS BOX ALIGNMENT LEVEL 3
https://drafts.csswg.org/css-align/
CSS BOX ALIGNMENT LEVEL 3
▸ justify-content
▸ align-content
▸ justify-self
▸ align-self
▸ justify-items
▸ align-items
CSS Grid LayoutA proper layout system with
.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); } .wrapper li { min-width: 1%; } .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: start; } .wrapper li:nth-child(4) { align-self: end; }
CSS Grid Layout
Aligning grid items with the Box
Alignment properties.
“Unlike Flexbox, however, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.”
CSS GRID LAYOUT
https://drafts.csswg.org/css-grid/
.cards { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }
CSS Grid Layout
Defining a 3 column grid
.cards { display:flex; flex-wrap: wrap; }
.card { flex: 1 1 250px; margin: 5px; }
Flexbox
Flexbox can wrap flex items onto
multiple rows.
A new row becomes a new flex
container for the purposes of
distributing space.
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-gap: 10px; }
CSS Grid Layout
Create as many columns as will fit
into the container with a minimum
width of 200px, and a maximum of
1fr.
minmax()
.home-hero { display: grid; grid-gap: 1px; grid-auto-rows: minmax(150px, auto); }
minmax()
Rows should be a minimum of 150px
and a maximum of auto
CSS Grid auto-placement
<ul class="colors">
<li style="background-color:#FFFFFF;color:black" class="white">FFF FFF </li> <li style="background-color:#CCCCCC;color:black">CCC CCC </li> <li style="background-color:#999999;color:black" class="span3">999 999 </li>
</ul>
Grid auto-placement
I have a list with all ye olde web safe
colours in it.
.colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px, 1fr)); grid-gap: 2px; grid-auto-rows: minmax(80px, auto);
}
Grid auto-placement
I auto-fill columns and rows with
minmax()
.white { grid-column: 1 / -1; grid-row: 3; } .black { grid-column: 1 / -1; grid-row: 6; } .span2 { grid-column-end: span 2; grid-row-end: span 2; } .span3 { grid-column-end: span 3; grid-row-end: span 3; } .tall4 { grid-row-end: span 4; }
Grid auto-placement
Adding classes to some elements, by
setting the value of grid-column-end
and grid-row-end to span.
.colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px, 1fr)); grid-gap: 2px; grid-auto-rows: minmax(80px, auto); grid-auto-flow: dense; }
Grid auto-placement
grid-auto-flow with a value of dense
display: contentsVanishing boxes with
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.
DISPLAY: CONTENTS
https://drafts.csswg.org/css-display/#box-generation
allow indirect children to become flex or grid items
<div class="wrapper"> <h1></h1> <p></p> <blockquote class="inset"></blockquote> <p></p> <ul class="images"> <li></li> <li></li> </ul> <p></p> </div>
display: contents
All elements are direct children of
‘wrapper’ except for the li elements.
.wrapper { max-width: 700px; margin: 40px auto; display: grid; grid-column-gap: 30px; grid-template-columns:1fr 1fr; }
.wrapper h1, .wrapper p { grid-column: 1 / -1; }
.inset { grid-column: 1 ; font: 1.4em/1.3 'Lora', serif; padding: 0; margin: 0; }
.inset + p { grid-column: 2; }
display: contents
A two column grid. The h1, p and
blockquote with a class of inset are
all direct children.
.images { display: contents; }
display: contents
The ul has a class of images. By
applying display: contents the ul is
removed and the li elements become
direct children.
https://www.chromestatus.com/feature/5663606012116992
CSS ShapesGetting curvy with
CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box.
CSS SHAPES
https://drafts.csswg.org/css-shapes/
.balloon { float: left; width: 429px; shape-outside: circle(50%); }
<div class="box"> <img class="balloon" src="round-balloon.png" alt="balloon"> <p>...</p> </div>
CSS Shapes
A simple shape using the shape-outside property
.box::before { content: ""; display: block; float: left; width: 429px; height: 409px; shape-outside: circle(50%); }
CSS Shapes
Floating generated content to create
a shape
.balloon { float: right; width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px); -webkit-clip-path: ellipse(28% 50% at 460px); clip-path: ellipse(28% 50% at 460px); }
CSS Shapes
Using clip-path to cut away part of an
image
Feature QueriesCan I Use this with
The ‘@supports’ rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs.
FEATURE QUERIES
https://www.w3.org/TR/css3-conditional/#at-supports
Anything new in CSS you can use feature queries to detect support.
@supports (display: grid) { .has-grid { /* CSS for grid browsers here */
} }
Feature Queries
Checking for support of Grid Layout
@supports ((display: grid) and (shape-outside: circle())) { .has-grid-shapes { /* CSS for these excellent browsers here */
} }
Feature Queries
Test for more than one thing
Using Feature Queries
▸ Write CSS for browsers without support
▸ Override those properties inside the feature queries
▸ See https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
.balloon { border: 1px solid #999; padding: 2px; }
@supports ((shape-outside: ellipse()) and ((clip-path: ellipse()) or (-webkit-clip-path:ellipse()))) { .balloon { border: none; padding: 0; float: right; width: 640px; min-width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px); -webkit-clip-path: ellipse(28% 50% at 460px); clip-path: ellipse(28% 50% at 460px); } }
Feature Queries
Write CSS for browsers without
support, override that and add new
CSS inside the feature query.
Websites that enhance themselves as the platform improves.
Initial LetterFancy introductions with
Large, decorative letters have been used to start new sections of text since before the invention of printing. In fact, their use predates lowercase letters entirely.
This [initial-letter] property specifies styling for dropped, raised, and sunken initial letters.
INITIAL LETTER
https://drafts.csswg.org/css-inline/#initial-letter-styling
h1+p::first-letter { initial-letter: 4 3; }
Initial Letter
Make the initial letter four lines tall,
one line above the content and 3 into
the content.
Currently Safari 9+ only.
h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; margin: 0 5px 0 0; color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; }
Initial Letter
Adding additional styling to the
initial letter.
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) { h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; margin: 0 5px 0 0; color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } }
Initial Letter
Using feature queries to test for
support before adding rules that
style the first letter.
Writing modesUpside down and back to front with
.wrapper { display: grid; grid-template-columns: auto 1fr; grid-gap: 40px; }
h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; grid-column: 1; align-self: start; justify-self: start; }
Writing Modes
Using vertical-rl then flipping the text
with a transform.
Custom propertiesVariables in CSS with
This module introduces a family of custom author-defined properties known collectively as custom properties, which allow an author to assign arbitrary values to a property with an author-chosen name, and the var() function, which allow an author to then use those values in other properties elsewhere in the document.
CSS CUSTOM PROPERTIES (CSS VARIABLES)
https://drafts.csswg.org/css-variables/
:root { --primary: blue; --secondary: orange; }
h1 { color: var(--primary); }
Custom Properties
Define variables then use them in
CSS
:root { --primary: blue; --secondary: orange; }
@supports (--primary: blue) { h1 { color: var(--primary); } h2 { color: var(--secondary); } }
Custom Properties
Can be tested for using feature
queries
calc()Adding things up with
Basic mathematics in CSS
<div class="wrapper"> <div class="box box1"> <p>…</p> <div>height is defined by the flex container.</div> </div>
<div class="box box2"> <div>height is 140px</div> </div>
<div class="box box3"> <div>height is 14em</div> </div> </div>
calc()
Three boxes, each with a div nested
inside.
.box2 { height: 140px; }
.box3 { height: 14em; transition: height 0.5s ease; }
.box3:hover { height: 30em; }
calc()
Two of the outer boxes have a height,
box1 is the height of the content
inside.
Box3 will grow on hover.
.box > div { color: #fff; border-radius: 5px; position: absolute; bottom: 20px; right: 20px; width: 30%; height: calc(50% - 20px); }
calc()
In the CSS for the inner box, we
calculate the height as 50% - 20px.
position: stickyStaying put with
A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.
POSITION: STICKY
https://drafts.csswg.org/css-position/#sticky-pos
<dl class="authors"> <dt>A</dt> <dd>John Allsopp</dd> <dd>Rachel Andrew</dd> <dt>B</dt> <dd>. . .</dd> </dl>
position: sticky
A dl with dt elements followed by
multiple dd elements.
.authors dt { position: sticky; top: 0; }
position: sticky
Applying position: sticky to the dt
Scroll snappingSnap to it with
.gallery { scroll-snap-type: mandatory; scroll-snap-destination: 0 100% ; scroll-snap-points-x: repeat(100%); }
Scroll Snapping
Current Firefox implementation -
spec has since changed!
.gallery { scroll-snap-type: mandatory; scroll-snap-destination: 0 100% ; scroll-snap-points-y: repeat(100%); }
Scroll Snapping
Current Firefox implementation -
spec has since changed!
Getting our hands on all the new shiny
Tell browser vendors you want these features
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shapes/?q=shapes
Please comment on emerging specifications
Thank you
https://rachelandrew.co.uk/speaking/event/confoo-vancouver-2016