Wow - another great book from the folks over at A Book Apart. After reading most of the series up until now, I was more than excited to hear of their newest release - Sass for Web Designers. If you’re not familiar with this series of books, I cannot recommend them enough. They are, as told by ABA themselves, brief books for people that make websites. They act as quick, concise reads that can ramp up a new skill for a web designer of any skill level.
In this third session with internal design teams, I covered positioning concepts, powerful advanced selectors & an overview of CSS3. There were small hands-on demos throughout this session, reinforcing the discussed concepts as we learned.
All skills will be forgotten without regular practice. When I think of all the facts and skills I've memorized at some point in my life for a test or one-time exercise, it's truly baffling. While I'm sure this knowledge is rolling around in my gray matter somewhere, my knowledge of the path leading to it has been lost for years.
In my second seminar with internal design teams, I switched from the basics to some broader concepts that permeate throughout CSS. This session covers the topics of Values & units, web typography and ends with a deep explanation of the box model. Let's dive in!
Recently, I revisited a side project website that I had built for a close friend of mine some years back. I'd originally used WordPress as a content management system; being that my friend had experience with it and an intention of blogging as a creative outlet. Since crafting the original design, I've learned a lot of new & powerful CSS skills. Most importantly, a working knowledge of responsive web design and some advanced CSS3 properties. I'd been looking for an outlet to apply these new skills, and decided to revisit this project.
In today's mobile-first and responsive web design-crazed climate, it can be easy to neglect the basics. While we learn how to utilize & bend CSS3 media queries to create more immersive web experiences, it can be easy to neglect the original media query, print.
This is the first session of a series I'll be delivering to my design team, crafted to introduce CSS in an approachable way. I'm by no means an expert on the subject, just passing along what knowledge I do have for the overall betterment of my team. My hope is to peak designer's interest and basic understanding of CSS, motivating all to learn more robustly on their own.
Using substring matching attribute selectors, enables you to add very specific and powerful CSS styling to a page without adding any nasty, non-semantic HTML. I've found that this advanced CSS selector technique is best demonstrated within the common situation of adding colored social media links to your website. As an example, let's say I want two social media links in my footer; each colored with the site's respective primary branding color. Traditionally, I would target each of these elements, with an ID:
While watching a Treehouse video on responsive web design, they threw in a little tidbit that I hadn't come across yet, and found very useful. What's a blog for, if not sharing this stuff? Here's the rub.