A List Apart

Menu

Topic: CSS

Controlling layout and typography. Responsive and multi-device design. Separating presentation from structure and behavior. Media queries and beyond. Types of web layouts. CSS3 animations. Replacing JavaScript with CSS3. Crafting a print style sheet. CSS support: browser bugs and workarounds. CSS in networked devices, mobile and otherwise. Showing and hiding elements, replacing text with images. Sass and Less and more.

  • Instant Web

    by Mark Llobrera ·

    For some, Facebook’s Instant Articles is a sign that the traditional web stack is incapable of giving users a first-class reading experience. But the sluggish performance of the web isn’t due to an inherent flaw in the technology. That particular problem originates between the seat and the keyboard, where builders make choices that bloat their sites. For Mark Llobrera, Instant Articles is a sign that we need to prioritize performance like we actually mean it.

  • Let Links Be Links

    by Ross Penman · Issue 417 ·

    The notion of the web as an application platform has never been more popular. Single-page frameworks like Ember and Angular make it easy to create complex applications that offer richer, more robust experiences than traditional websites can. But this benefit comes at a cost. Ross Penman tells us what we can do about it.

  • Readable Wearables

    by Matt Griffin ·

    Displays that are more tiny than our lowest-size breakpoints require a more condensed range of type sizes. If you don't already have in place a typographic system that can absorb the demands of this new context (watches, wearables, digital sticky notes, whatever), now might be the time to consider it. Matt Griffin was ready for anything because his site was simple and built to be future friendly.

  • Quantity Queries for CSS

    by Heydon Pickering · Issue 415 ·

    In responsive design, we think a lot about space, especially in the context of screen sizes. But the amount of content or the number of elements is bound to affect space, too, just as unpredictably—and if we don’t want our designs to dictate our content, we need new ways to make our design aware of changing content quantities. Heydon Pickering walks us through a new idea for creating style breakpoints for quantities of HTML elements.

  • What Will Save Us from the Dark Side of CSS Pre-Processors?

    by Lyza Danger Gardner ·

    To spare ourselves the complexity and tedium of writing CSS, we’ve embraced CSS pre-processors. But we must use them wisely or risk outputting CSS that is weirdly convoluted and just so wrong. Could post-processors save us from the pitfalls of pre-processors? Lyza D. Gardner is cautiously optimistic about their future, but also has a solution we can implement right now to save ourselves from both unchecked pre-processors and unseasoned post-processors.

  • A Vision for Our Sass

    by Felicity Evans · Issue 412 ·

    Sass is a powerful tool in helping us wrangle complex stylesheets. Yet it has its headaches—including troublesome nesting of CSS selectors, code duplication, and tight coupling—that result in messy outputted CSS. Universal standards aren’t a viable answer, as the Sass spec continues to quickly change and grow. Felicity Evans holds that the problem isn’t Sass itself, but the way we use it. In this article, she champions a set of tenets that offers guidelines on how to work with Sass and evaluate new features and techniques.

  • Axiomatic CSS and Lobotomized Owls

    by Heydon Pickering · Issue 406 ·

    Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational markup. Heydon Pickering offers an unexpected option for handling cascading styles more efficiently: a variation on the universal selector.

  • Breaking Stuff

    by Laura Kalbag ·

    Designers may do CSS, but not JavaScript. Some may do JavaScript, but draw the line at git. Some may be willing to use git with a graphical interface, but not with Terminal. When we get out of our comfort zone, it’s great to have a safety net so we can learn without breaking stuff too badly.

  • CSS Audits: Taking Stock of Your Code

    by Susan Robertson · Issue 403 ·

    A CSS audit helps to organize code and eliminate repetition for speedier sites. Susan Robertson shows us how to sleuth out potential trouble spots, along with offering tips on tools, documentation, and ways to keep our codebases lean well into the future.

  • Radio-Controlled Web Design

    by Art Lawry · Issue 399 ·

    Tabs, modal overlays, hidden navigation: we’ve developed many patterns to help us design for mobile screens. But these patterns tend to show and hide content using JavaScript—which can come with its own challenges. Art Lawry explores techniques for reducing that dependency on JavaScript using an unlikely tool: radio buttons.

  • CSS Shapes 101

    by Sara Soueidan · Issue 394 ·

    The new CSS Shapes specification has the potential to change the way you think about arranging content on a webpage. (Hint: think outside the rectangles!) Sara Soueidan walks us through the different ways to use this property, with results ranging from simple elegance to eye-popping.

  • DRY-ing Out Your Sass Mixins

    by Sam Richard · Issue 394 ·

    You might already be familiar with the DRY principle of writing code: “Don’t Repeat Yourself.” Using Sass is a great way accomplish this, but Sam Richard challenges us to take it a step further than that. By the end of this article, you’ll be adapting your Sass mixins to use the absolute minimum amount of code, so your pages will be super-light and quick to load anywhere. Advanced Sass magic ahead; strap in!

  • Start Coding with Wireframes

    by Matt Griffin ·

    As a designer or UX pro, you’ve long suspected you ought to learn to code, but where to start? How about making your next wireframe responsive? When you build wireframes with simple code, you create a deliverable that can be reused while you become more knowledgeable about the inner workings of the web.

  • UI Animation and UX: A Not-So-Secret Friendship

    by Val Head · Issue 390 ·

    The words “web animation” make many of us search frantically for the “skip intro” button, but adding motion to our work can be meaningful and functional—when we find the right circumstances. Animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. Val Head shows you how CSS makes it possible.

  • Why Sass?

    by Dan Cederholm · Issue 385 ·

    “I was a reluctant believer in Sass. I write stylesheets by hand! I don’t need help! And I certainly don’t want to add extra complexity to my workflow. Go away!” So says designer, CSS wizard, and Dribbble co-founder Dan Cederholm at the beginning of his new book Sass For Web Designers, released today by A Book Apart. Yet the reluctant convert soon discovers that the popular CSS pre-processor can be a powerful ally to even the hand-craftiest front-end designer/developer. Dan has never learned a thing about CSS he wasn’t willing to share (and great at teaching). And in this exclusive excerpt from Chapter 1 of Sass For Web Designers, you’ll get a taste of how Dan learned to quit worrying and use Sass to take better control of his stylesheets and websites.

  • Improving UX Through Front-End Performance

    by Lara Hogan · Issue 371 ·

    Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, says a Google study. For every additional 100 milliseconds of load time, sales decrease by 1 percent, Amazon finds. Users expect pages to load in two seconds—and after three seconds, up to 40 percent will simply leave. The message is clear: we must make performance optimization a fundamental part of how we design, build, and test every site we create—for every device. Design for performance; measure the results.

  • Responsive Comping: Obtaining Signoff without Mockups

    by Matt Griffin · Issue 363 ·

    If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process—and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach. Designing in code sounds like the answer, but you may be mystified at where to begin—or feel unmoored and disoriented at the prospect of giving up the approach you’ve long relied on. Enter responsive comping. This new, mockup-less web design process makes it easy to get that Photoshop monkey off your back, and have a fresh new beginning with your old friend the web browser.

  • Learning to Love the Boring Bits of CSS

    by Peter Gasston · Issue 358 ·

    The future of CSS gives us much to be excited about: On the one hand, there’s a whole range of new methods that are going to revolutionize the way we lay out pages on the web; on the other, there’s a new set of graphical effects that will allow on-the-fly filters and shaders. People love this stuff. Magazines and blogs are full of articles about them. But if these tools are the show ponies of CSS, then it’s time to give some love to the carthorses of the language. Learn why “boring bits” like selectors, units, and functions will be revolutionary to the way we work—albeit in humble, unassuming ways.

  • ALA Summer Reading Issue

    by ALA Staff · Issue 356 ·

    Presenting the ALA Summer Reading Issue—our favorite articles from 355 issues of A List Apart. You can also read them all as an epub on your Kindle, iPhone, iPad, Readmill, or other e-book reader.

  • Building Books with CSS3

    by Nellie McKesson · Issue 353 ·

    While historically, it's been difficult at best to create print-quality PDF books from markup alone, CSS3 now brings us the Paged Media Module, which targets print book formatting. "Paged" media exists as finite pages, like books and magazines, rather than as long scrolling stretches of text, like most websites. With a single CSS stylesheet, publishers can take XHTML source content and turn it into a laid-out, print-ready PDF. You can take your XHTML source, bypass desktop page layout software like Adobe InDesign, and package it as an ePub file. It's a lightweight and adaptable workflow, which gets you beautiful books faster. Nellie McKesson, eBook Operations Manager at O'Reilly Media, explains how to build books with CSS3.

Topics