css - Space Ninja

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!

frontend

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?

frontend

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.

css

What is Modular CSS?

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

frontend

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

css

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’

css

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

css

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

css

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 A document may load up to 31 stylesheets A stylesheet

css

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

css

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