Article Archives

Instant Loading: Building Offline-First Progressive Web Apps

There was a lot of great talks from Google’s I/O event this year, and Jake Archibald’s talk on building offline-first is certainly one of them. The DevTools in 2016 talk is great too.

Or, decide for yourself! There is a playlist of all of them and Robert Nyman rounded up everything as well.

Also, if you're interested in hearing more about this "Progressive Web Apps" stuff and the debate around it...

Ways You Need To Tell The Browser How To Optimize

In the past few years, there has been a number of front end features in which the performance onus has shifted from browser to developer. Rather than the presumed "browsers will get faster at running my code", there is a little more "I need to change the way I code for browsers to get faster."

(more…)

Vanilla List

Vanilla List is a repository of JavaScript libraries; datepickers, form validation and push notifications are just some of the libraries available if you can’t (or don’t want) to a library dependency.

inStyle (Modifying the Current Selector `&` in Sass)

The following is a guest post by Filip Naumovic from Salsita Software. Filip has built a Sass tool to help with an issue I know I've experienced many times. You're happily nesting in Sass. You're maybe a level or two deep, and you need to style a variation based on some parent selector. You need to either break out of the nesting and start a new nesting context, or go nuclear with @at-root. I'll let Filip tell the story of his new tool that changes that.

(more…)

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

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…)

Reducing JPG File size

There’s lots of neat tricks for reducing the size of JPGs in this article by Colt McAnlis:

With the Average webpage size now larger than the original DOOM game, you have to start asking where all the bytes are coming from, and how you can do more to toss those things out.

While JPG compression is impressive in its’ own right, how you use it in your application can influence the size of these files significantly. As such I’ve assembled a handy collection of things that can help you squeeze out those last bits, and make a better experience for your users.

Sponsor: ​Become an Industry-Ready Developer at Galvanize

​At Galvanize, you'll learn the programming skills and problem-solving techniques companies seek when hiring developers. Our full-time immersive web development course six months long and designed to prepare you as a full-stack developer on a software team. Our graduates pursue roles with some of the most exciting and innovative tech companies as full-stack software developers, quality assurance engineers, front-end developers, and product managers. Scholarships and financial aid are available for qualified students. Start your future career, today.

Flexbox and Truncated Text

Situation: you have a single line of text in a flex child element. You don't want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!

Fortunately, there is a (standardized) solution. You just need to use a non-flexbox property/value to do it.

(more…)

Buttons in Design Systems

I really like this post by Nathan Curtis where he discusses how buttons can be applied to a design system:

I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life.

That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later.

Borders, colors, text styles, icons; there’s so much to consider! But what I really wanted to make a quick note of here is the idea of resilience in a design, particularly where Nathan talks about adding components inside a button, like an icon:

When you add an element, even a simple icon, a button layout shouldn’t break down. Coping with less predictable elements reveals pesky issues of spacing and alignment inside.

So whenever you remove a component from inside a button then the button itself should still work. But this isn’t just important for buttons really, it’s important for any component that we’re building. In short: asking questions about how a certain element might break visually, or in terms of interaction, is vital to the process of building an effective design system.

Optimizing for Large-Scale Displays

The following is a guest post by Jon Yablonski. Jon told me he recently worked on a project where there was a lot of emphasis placed on giant screens. Jon is going to show us that just like RWD work of any kind, it requires planning. Extra media queries are useful for targeting the huge displays, and typography can take you far.

(more…)

CSS from the Future

Zeke Sikelianos:

So. We have variables in CSS now. That's pretty neat, but it doesn't get us all the way to CSS heaven. What we really need is a way to write little bits of reusable CSS. These features have long existed in Sass, Less, and Stylus, but there's no way to do it in regular CSS.

There’s plans for adding a new spec for what’s currently being called the @apply rule. It looks like a Sass mixin, but it's really more like extending a placeholder selector, but because it's native, without the selector insanity that extend can cause.

Blink is already shipping it behind a runtime flag.

Updating Our Prefixing Policy

WebKit will no longer release experimental features with prefixes (i.e. -webkit-font-smoothing) as many have found that this can actually quite harmful:

Over time this strategy has turned out not to work so well. Many websites came to depend on prefixed properties. They often used every prefixed variant of a feature, which makes CSS less maintainable and JavaScript programs trickier to write. Sites frequently used just the prefixed version of a feature, which made it hard for browsers to drop support for the prefixed variant when adding support for the unprefixed, standard version. Ultimately, browsers felt pressured by compatibility concerns to implement each other’s prefixes.

Instead, experimental features will be shipped behind a runtime flag. Meaning the new features will be available, unprefixed, in development versions of the browser (i.e. "Technology Preview versions" or "Nightlies").

WebKit is the last to jump on this wagon. Perhaps a few years from now, we'll hardly use or think about prefixes at all.

The Advice For Going Freelance Is Very Consistent

I caught wind of a friend making the transition from in-house designer to freelancer or proprietor of a small design studio and looking for advice. I've never truly done the freelance thing, so I outsourced the advice thing to y'all on Twitter. It's surprising how consistent the advice is, when distilled.

(more…)

Web Fonts for President 2016

Zach Leatherman digs under the cover of the presidential candidates’ websites and reveals that font loading is a nuanced and complicated business:

Using a web font service doesn’t necessarily mean that your web site will use best practices. We must be knowledgeable about the internals of the tools we use in order to best utilize them to our advantage. At the end of the day if you don’t want to put any effort into it, it’s safer to use TypeKit.

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.

If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to use and how to use it.

(more…)

Icons and Teams

Say you're working on a website that uses an icon system. Lots of people who work on the site interact with the icon system. Designers create new icons, they tweak existing ones, they have ideas on what they want the icons to do. Developers building out the pages of the site use the system.

Say you're the front-end developer. You're implementing this system. You're the middle man. You're the creator and consumer of this system.

What do you ask of the designers?

(more…)

Working with Images in Stylesheets with PostCSS

The following is a guest post by Aleks Hudochenkov. Aleks does a great job here of showcasing what PostCSS is good at and the role it has grown into in the front end stack. That is: doing little useful jobs within CSS. You're about to see a variety of PostCSS plugins at work that are all related to working with images. By the end, I bet you'll be able to imagine how PostCSS can be useful for other niches within working with CSS.

(more…)

CodePen Embedded Pen Upgrades

They now:

  1. Have an all-new design that allows for a split-view (code on the left, preview on the right) when the responsive design allows.
  2. Can be editable.

Along with all the same great features they have always had like themes (total design control! change all your embeds at once!) and optional click-to-play (for increased performance).

Visual Regression Testing with CSS Blend Modes

Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.

I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out we can.

(more…)

A Quick Look at the Runner Sketch Plugin

Runner is a plugin for the design tool Sketch. It lets you use your keyboard to run commands and order about other plugins. For example, by typing “vertical” into Runner then you can vertically align text much faster than moving your mouse to the button and clicking it.

I’ve seen some folks describe Runner as if it’s Sketch’s version of Spotlight or Alfred, as effectively their goals are one and the same: to speed up and organize your workflow. In the video below I briefly go over how Runner might speed up the design process:

Once you've downloaded it, you can start Runner inside Sketch by hitting cmd + ' and then tab to move through each section, like Export or Run.

If you’re interested in finding more plugins to tie into Runner, there’s an official list of all the Sketch plugins available.

Lingo

Lingo is an app from the Noun Project team that groups images, icons, SVGs, and illustrations into a single place. It lets you browse them quickly, and then you can drop them into another application without any hassle.

I work a ton with SVGs and icons, so I'm always trying to find ways to reduce friction between different software and editing processes. One might think that the answer to this couldn't be more software, but I'm really enjoying Lingo. In fact, there was a funny quote from someone a few years ago on Twitter, (my memory is too spotty to remember who said it) "Fun Fact! The average designer spends 10% of their life looking for the right icon."

Popper.js

Speaking of tricky things to get right: tooltips!

Tooltips need to be particularly self-aware, so they don't stick out someplace where they can't be read. Then continue to be smart as the page state changes, like is resized or scrolled. Popper.js looks like it handles all this stuff nicely.

The project page doesn't say this, but creator Federico Zivolo showed me how it's also friendly with React, because you can render the tooltip element itself within the component and it just stays where it is. This is unlike most tooltip implementations that move the tooltip element around the DOM (probably making it a direct descendant of the <body>, to make positioning easier), which could easily be problematic in a React environment.

Modaal

Modaal is a WCAG 2.0 Level AA accessible modal window plugin.

Modals seem so hard to get right from an accessibility perspective, I'm not proud to say I've never tried. Something like moving focus to the modal when it opens and moving focus back to where it was when the modal closes seems like a particularly tricky thing to get right.

Creating Wavescroll

The following is a guest post by Nikolay Talanov. Nikolay wrote in to show me this demo and wanting to write about it (his first post in English, ever!). It's an awesome demo, so of course I'm happy to pass it off to him now to take you through it. And make sure to check him out on CodePen too, he makes all kinds of other incredible demos.

(more…)

The Ever-Evolving Spectrum of the Web

I wrote a post last summer where I identified myself as a web designer in light of my experience in front-end web development. The response was pretty overwhelming and has stuck with me ever since.

What stuck with me most is how relative job descriptions are in web development. I might be a web designer standing next to one person, but a web developer standing next to someone else. Creating exact labels (and job descriptions, for that matter) is an inexact science. When it comes to designing, building, and maintaining websites, it's hard to pin down labels, despite all our best efforts to do it.

What if we were able to properly categorize and label what we do into neat buckets?

(more…)

An Interview with Håkon Wium Lie

Håkon Wium Lie is one of the co-inventors of the original CSS specification. This interview digs into the past and future of CSS:

If CSS hadn’t been developed, designers might have gone elsewhere, explains Lie. HTML could have turned into more of a page description language, akin to PDF. Indeed, designers had already started making pictures out of their documents. “Because that meant you could control every pixel in there. So you could get the fonts, colours, you needed. You still see some of them around. If that had become the norm, we could have ended up with the web being a giant fax machine.”

Introducing the new Framer

Framer, the design and code tool from Motif Tools BV, has been updated with lots of new features.

I guess it's Framer "js", because the designs you create are formed from a code syntax that is JavaScript-like. Kinda looks like JSON in CoffeeScript. It's CoffeeScript. But you're actually working in a native app.

It's a wild time for design tooling. Sketch had become a dominant player for screen design. Adobe knows designers don't turn to Photoshop like they used to and is making things from the ground up like Adobe XD and trying to figure out mobile. Webflow is getting it done in the browser and producing production-ready sites. InVision is also happening in the browser and focusing on teams and workflow. There are very niche tools like Lingo popping up.

The design tooling landscape in years to come will probably be as splintered as the web development tooling is now.

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag