​Sponsor: ​LightCMS  

LightCMS is the fastest growing white-label Content Management System on the market. Their Developer Program gives you all the tools you’ll need to build your web design business on a top-tier, cloud-based platform and your customers don’t ever have to know it’s not your CMS. They’ll even invoice your customers on your behalf. You’ll of course have full access to the HTML and CSS of your sites and you’ll even get a free website for your business.

If you're sick of patch updates and security vulnerabilities, LightCMS may be a good option. You can try it free for 14 days. No credit card required.

Considerations for styling the `pre` tag  

I wrote about a bunch of design things you should think about if you use the <pre> tag in your content. Things like:

  1. Do you use the <code> tag inside?
  2. Choosing a font stack
  3. To wrap or not to wrap?
  4. How you can (easily) make code blocks auto-expanding
  5. Dangers if it is headed to email
  6. Syntax highlighting
  7. Language labeling
  8. White-space control
  9. Alternatives

Sticky Footer, Five Ways

A brief history, if you will.

The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.

(more…)

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.

#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.