Injecting a Line Break

I had a little situation where I head a header with a span in it, and I wanted to make sure to put a line break before the span. For the record, there really isn't anything wrong with just chucking a <br /> tag before it (and in fact the ability to show/hide that is very useful). But... it always feels a little weird to have to use HTML to achieve a layout thing.

So let's take a journey. A journey in which we say "But..." a lot.

(more…)

CSS Modules and React

In this final post of our series on CSS Modules, I’ll be taking a look at how to make a static React site with the thanks of Webpack. This static site will have two templates: a homepage and an about page with a couple of React components to explain how it works in practice.

(more…)

HEAD  

Josh Buchea has collected "A list of everything that goes in the <head> of your document". Over 100 <meta> tags alone!

Sponsor: Enterprise WordPress on Media Temple  

Media Temple is the host we both use and recommend here on CSS-Tricks.

Hot off the presses: Media Temple has launched Enterprise WordPress Hosting. This is for large-scale WordPress sites that need the scaling and high-availability of AWS, all managed by the crack engineers at Media Temple.

A little behind the scenes: everything is built on Docker containers. When a high traffic event happens that requires scaling up, that happens in seconds. Media is uploaded and stored on S3, then delivered through CloudFront CDN.

This is some hardcore WordPress hosting, with all the support you need. Remember to use code CSSTRICKS to save 20% for the first year.

All or Nothing  

Jonathan Snook takes a look at the all property which can be used like this:

.element {
  all: initial;
}

The idea is that it should set all properties of an element to initial, removing all custom styling thus far applied. Essentially resetting the styles of any element so you can build up from scratch.

Unfortunately the inconsistencies between each browser make it difficult to recommend. If you could count on it being consistent, this is a powerful one-liner, alleviating some of motivation behind things like iframes, web components, or css modules.

ease-out, in; ease-in, out

We got to talking about easing in a recent episode of ShopTalk with Val Head and Sarah Drasner. Easing is important stuff when it comes to animations and transitions. Combined with the duration, it has a huge effect on the feel of change. If you're taking animation seriously as part of the brand on a project, you should define and consistently use easings.

That said, it's a balance between:

  • Crafting/using easings that match your brand
  • Adhering to soft "rules" about what type of easings are appropriate when

(more…)

#148: Laying Things Out (HTML & Flexbox) with Dee Gill

In this pairing screencast, I hang out with Dee Gill. We take a look at some layout stuff for a new app she's working on: Tinge. She had a design mockup she was working from, so we peak at that and try and build it out in HTML and CSS. We start at the top and focus on the navigation, using flexbox heavily to do what we need to do. …

Watch Video →

We have a pretty good* newsletter.