Conférence Paris Web

Shoelace.css is a lightweight, forward-thinking CSS library built with future CSS syntax. It’s easy to use and highly customizable. Bootstrap users will find it familiar, yet refreshing.

You can use Shoelace with just about any browser. The CDN version is great for prototyping, but to take advantage of all its features you should build Shoelace from source.

CSS Grid Layout is a game-changer for web developers. Learn more about CSS Grid and the CSS Grid Layout panel in Firefox.

The CSS box-shadow property is deceptively awesome. When used “traditionally”, it’s a simple way to add a shadow effect to an element. I use this for images in my blog. It’s nice. But get saucier with it and you can pull off some really interesting things. I’ve already talked about the pixel art hack. This time I’m going to share how to create colorful glow effects.

The lack of good ways to vertically center elements in CSS has been a dark blemish on its reputation for pretty much its entire existence.

What makes matters worse is the techniques that do work for vertical centering are obscure and unintuitive, while the obvious choices (like vertical-align:middle) never seem to work when you need them.

The current landscape of vertical centering options ranges from negative margins to display:table-cell to ridiculous hacks involving full-height pseudo-elements. Yet even though these techniques sometimes get the job done, they don’t work in every situation. What if the thing you want to center is of unknown dimensions and isn’t the only child of its parent? What if you could use the pseudo-element hack, but you need those pseudo-elements for something else?

With Flexbox, you can stop worrying. You can align anything (vertically or horizontally) quite painlessly with the align-items, align-self, and justify-content properties.