You can use CSS for that! Co-founder Perch CMS / CSS WG Invited - PowerPoint PPT Presentation

Initial Letter Make the initial letter four lines tall, h1+p::first-letter { one line above the content and 3 into initial-letter: 4 3; } the content.

http://codepen.io/rachelandrew/full/WobvQq/

http://codepen.io/rachelandrew/full/WobvQq/

Currently Safari 9+ only.

Initial Letter h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; Adding additional styling to the margin: 0 5px 0 0; initial letter. color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; }

http://codepen.io/rachelandrew/pen/LbEpPX

Initial Letter @supports (initial-letter: 3) or (- webkit-initial-letter: 3) { h1+p::first-letter { font-weight: bold; initial-letter: 7 ; Using feature queries to test for background-color: rgb(114,110,151); padding: 2em .5em; support before adding rules that margin: 0 5px 0 0; style the fi rst letter. color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } }

http://codepen.io/rachelandrew/pen/LbEpPX

Upside down and back to front with Writing modes

http://codepen.io/rachelandrew/pen/LbVQNW

Writing Modes .wrapper { display: grid; grid-template-columns: auto 1fr; grid-gap: 40px; } Using vertical-rl then fl ipping the text h1 { writing-mode: vertical-rl; with a transform. transform: rotate(180deg); text-align: right; grid-column: 1; align-self: start; justify-self: start; }

http://codepen.io/rachelandrew/pen/LbVQNW

http://caniuse.com/#feat=css-writing-mode

Variables in CSS with Custom properties

CSS CUSTOM PROPERTIES (CSS VARIABLES) This module introduces a family of custom author-de fi ned 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. https://drafts.csswg.org/css-variables/

Custom Properties :root { --primary: blue; --secondary: orange; De fi ne variables then use them in } CSS h1 { color: var(--primary); }

Custom Properties :root { --primary: blue; --secondary: orange; } @supports (--primary: blue) { Can be tested for using feature h1 { color: var(--primary); queries } h2 { color: var(--secondary); } }

http://codepen.io/rachelandrew/pen/mErpZA

http://caniuse.com/#feat=css-variables

Adding things up with calc()

Basic mathematics in CSS

calc() <div class="wrapper"> <div class="box box1"> <p>…</p> <div>height is defined by the flex container.</div> </div> Three boxes, each with a div nested <div class="box box2"> inside. <div>height is 140px</div> </div> <div class="box box3"> <div>height is 14em</div> </div> </div>

calc() .box2 { height: 140px; Two of the outer boxes have a height, } box1 is the height of the content .box3 { inside. height: 14em; transition: height 0.5s ease; } Box3 will grow on hover. .box3:hover { height: 30em; }

calc() .box > div { color: #fff; border-radius: 5px; position: absolute; In the CSS for the inner box, we bottom: 20px; calculate the height as 50% - 20px. right: 20px; width: 30%; height: calc(50% - 20px); }

http://codepen.io/rachelandrew/full/VmYYqM/

http://caniuse.com/#feat=calc

Staying put with position: sticky

POSITION: STICKY A stickily positioned box is positioned similarly to a relatively positioned box, but the o ff set is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box. https://drafts.csswg.org/css-position/#sticky-pos

position: sticky <dl class="authors"> <dt>A</dt> <dd>John Allsopp</dd> A dl with dt elements followed by <dd>Rachel Andrew</dd> multiple dd elements. <dt>B</dt> <dd>. . .</dd> </dl>

position: sticky .authors dt { position: sticky; Applying position: sticky to the dt top: 0; }

http://codepen.io/rachelandrew/pen/NbPamG

http://caniuse.com/#feat=css-sticky

Snap to it with Scroll snapping

https://drafts.csswg.org/css-scroll-snap-1/

http://caniuse.com/#feat=css-snappoints