css - Space Ninja

css

A collection of 12 posts

Resetting Inherited CSS with “Revert”

Resetting Inherited CSS with “Revert”

For a recent project, we needed to take a small web application and embed it inside a client’s existing site. Typically, this means inheriting the site’s styles. However, in this case, the client wanted this app to follow a new design system that hadn’t been applied to

Modern CSS in a Nutshell

Modern CSS in a Nutshell

A friend recently shared his frustration with CSS development. I responded to him with a high-level overview of the current state of CSS. If you’re feeling a bit out of touch with modern CSS development, I hope this helps. You’d be surprised how much you can do with vanilla CSS nowadays!

Code Linting for Web Designers

Code Linting for Web Designers

You may have heard that you should be “linting” your code. What does that mean? Why would you want to do it?

Friday Front-End’s Top Links in 2018

Friday Front-End’s Top Links in 2018

In 2018, Friday Front-End shared a curated list of five articles and one video every week. Here are the links that were most popular.

What is Modular CSS?

What is Modular CSS?

Modular CSS is a collection of principles for writing code that is performant and maintainable at scale.

Front-End Newsletters

Front-End Newsletters

A friend recently asked me how I keep up-to-date on what's happening in the front-end community. It's a great question. It used to be that RSS feeds were the way to go. I'd subscribe to the feeds from my favorite developers, and get their updates. Sadly, many people don't post

How to Define CSS Standards for a Team

How to Define CSS Standards for a Team

> “We’re going through a major redesign of our app and every page is given to one person on the team to complete from end-to-end, including creating the HTML structure and styling, and everyone is doing everything their own way. Do you have tips/tricks/blog posts/books that you’

Code Verbosity

Recently I was refactoring some CSS, and I found something like this code snippet: body { font-family: sans-serif; font-size: 14px; line-height: 1.4; } h1 { font-family: serif; font-size: 36px; font-weight: bold; } Ugh, I thought, why so many lines? Let's use the shorthand syntax! So I refactored many instances of this code through

What IS Flexbox?

What IS Flexbox?

An elegant layout method for a more civilized age. Flexbox is a new layout mode in CSS3. The previous version of CSS defined four layout modes: * block layout for laying out documents * inline layout for laying out text * table layout for laying 2D tabular data * positioned layout for explicit positioning

The Many Exciting CSS Limits of Internet Explorer

The Many Exciting CSS Limits of Internet Explorer

Internet Explorer has a number of limits in the way it loads CSS, which can cause some of your styles not to be applied if you unknowingly exceed them. IE9 and lower: * A stylesheet may contain up to 4095 selectors [http://codepen.io/spaceninja/full/gbyMLv/] * A document may load

How to use @font-face to avoid faux-italic and bold browser styles

How to use @font-face to avoid faux-italic and bold browser styles

Did you know that if you declare a custom font using @font-face, the browser will try to fake the bold and italic styles if it can't find them? This is a clever little feature that avoids a scenario where a designer specifies a font and is then confused that bold

How to avoid paragraph gaps when using superscript and subscript

How to avoid paragraph gaps when using superscript and subscript

Frequently, when I see a webpage with superscript or subscript text, I see associated gaps in the paragraph. This is caused because the default way browsers render super and subscript text is to add enough vertical space in the paragraph to show them. The result is ugly, but as you