Skip to main content

Cognition

CSS

We’ve written 15 blog posts about CSS. View all topics »

  1. Autolayout

    9/15/16

    by Mark Huot

    0 Responses

    I’ve had a love-hate relationship with grid systems over the years. Every system I try to standardize on becomes bloated, forgotten, or yesterday’s news. I find myself constantly switching to the next best thing. What follows isn’t a proclamation that this new system is the best, or that you should drop everything and switch. Instead, allow me to walk you through my grid system evolution so that we may all learn from it.

  2. Happy Cog Starter Files 2016

    I have spent close to 7 years as a front-end developer at Happy Cog and in that time I’ve seen our discipline go through many great changes— from spacer gifs to responsive web design, we’ve all iterated quite a bit. This rate of change is one of the things I most love about frontend— the collaborative, communicative community that pushes us all forward whether we like it or not. As process has evolved, so too has it improved.

  3. Expressive Type for Copy Blocks

    2/25/16

    by Mark Huot

    0 Responses

    How many times have you been coding a navigation and found yourself overriding the default padding on a list? Or, have you ever dove into a teeny tiny “product meta block” only to find that all your paragraphs have this ridiculous default font-size of 16px? What do you do? Well, you do one of two things… you override everything or you set more simplistic defaults.

  4. Expressive type for CSS

    Guys I figured it out! I figured out how to code type on the web.

    I kid. However I have been really digging my approach to type in the template-build phase as of late. It’s super simple, saves you tons of time, makes your files smaller, and communication both with your teammates and the client more focused. I’m not selling CSS snake oil here, I’m just that into it.

  5. How to build development systems (for a web site)

    Over the last year, I have been using Brad Frost & Dave Olsen’s PatternLab for many projects. In doing so, I have learned about building systems rather than web pages. Most of what I’ve learned is that I’ve been doing wrong out of habit.

  6. Put a Pseudo-Class On It

    Some days, writing plain ole everyday CSS can get a little monotonous. It’s all margins, font-families, positions and displays day-in and day-out.

  7. (Auto) Prefix All The Things

    We’ve been on the Sass bandwagon here at Happy Cog for quite some time. It’s become an essential integration into our workflow. Sass’ power manifests in many ways. It makes it easier to maintain our code, it enables a modular architecture, and it helps us scale our CSS. There is a problem, though. I’m sure you all have been there.

  8. A Simple Grid Mixin Explained

    Successful design systems stand on the shoulders of sound grids. Grids form the groundwork for a uniform yet flexible suite of templates. Their layouts hold containers that fit together like pieces of a puzzle. Last week, Happy Cog, in partnership with Mijingo, released the 7th video in The Happy Cog Way series: “The Basics of Grids.” In it, MJ discusses using a nice little web app called Modular Grid Pattern, a grid generator that can export into a variety of design programs.

  9. Fall Back to the Cascade

    10/24/13

    by Cat Farman

    0 Responses

    When we think of responsive design, we typically focus on newfangled mobile devices like smartphones and tablets. But, as front-end developers, we still need to account for older browsers that can’t handle the newest CSS3 techniques when rendering our sites. In the case of responsive design, that means our old friend Internet Explorer 8 (and below) needs some extra handholding when we build our sites with media queries. These browsers don’t support media queries, and since they are still in widespread enough use that we can’t ignore them (~10% of users are still using IE8), we have to come up with new techniques for gracefully degrading our sites.

  10. Dear CSS3

    When Dan Cederholm introduced us that spring afternoon at An Event Apart in 2010, I took one look at you and thought, “What a dreamboat.” I knew you were going to change my life. We took things pretty slow at first—I experimented with button and gradient generators while marveling at your features. “You mean, no more cutting gradient background images? And wait, I can just round those corners however I want?!” At the time, my exploration focused on replicating classic Photoshop effects. I had no idea that that was just a small part of what you could do. Since then, you’ve brought so much adventure into my life, creating effects that I could never dream up in Photoshop.

  11. The Web on the Web’s Terms

    After finishing journalism school, I worked for a series of terrific newspaper and radio companies. Barely two years into it, after flirting with the web, I quit.

    Compared to the web, print and radio had limited reach and were clumsy to use. In print, we plugged content into a fixed canvas and delivered the same experience to every reader. The closest we got to flexibility was an evening edition or special insert. The web attracted me because it couldn’t have been more different. It challenged me to design and build something that can reach anyone on any web-browsing device—a cause worthy of committing my career to.

  12. The Beauty of the Blank Slate

    You dev? If so, ever popped open a fresh PSD and thought to yourself, “Oh man, I can’t WAIT to get this party started”? I have, and I do, with each new project. As a front-end developer, that specific, exciting moment is my fresh start.

  13. Go Vertical

    Devices come in all shapes and sizes—from iPhones, to the massive Galaxy Note, to the tall-but-skinny Nexus 7, to 10-inch iPads, and massive, 30-inch displays.

  14. Expanding The Box

    10/18/12

    by Mark Huot

    4 Responses

    I always hear stories of managers pushing employees to “think outside the box“—to go beyond their day-to-day and find that idea that is unlike anything else. This is a tall order and maybe even a bit unrealistic. If our comfort zone is A, B, and C, how can we expect to find X without first understanding D–W? Because of this, I like to think in terms of “expanding the box” instead of jumping entirely outside of it.

  15. The Importance of Conventions

    Flashback to the mid 90s. You are rocking your Prodigy dial-up, excited to play the six degrees of Kevin Bacon game. You click a link to the game, wait 5 minutes for the page to load, and are confused when you are staring at bright green fluorescent text telling you to “Invest $100k” instead of calculating Leondardo DiCaprio’s Bacon number.