Colin O’Byrne and I talk about SDD, a term that was coined in the New York office of Pivotal Labs.
Photo Credit: Eastern Market Identity Guide by Daryl Tanghe
Cascading Style Sheets
Colin O’Byrne and I talk about SDD, a term that was coined in the New York office of Pivotal Labs.
Photo Credit: Eastern Market Identity Guide by Daryl Tanghe
Recently I did a quick talk at Sydney Web Apps meetup about block formatting context, focusing on how it changes the way it interacts with floated elements. I first learnt about this “secret weapon” via Nicole’s blogpost but it wasn’t until recently that I really understood how useful it is. In my talk I talked about how we use this technique in the OOCSS open source project, using media block, grid and template as examples in my slides.
P.S. Feels rather weird to hear and see myself on video! *cringe*
I love rem. I’ve been using it since I first read about it in Jonathan Snook’s article, and even more so since I started building responsive websites.
Rem is a value that is relative to the root font-size, meaning the font-size that is set on the <html>
element. The browser by default sets the font-size at the root to 16px.
There are some articles around about why rem is good and super handy, so I won’t go into too much detail here. But in short, rem is awesome because:
<html>
at each breakpoint and the text on your site will scale proportionally according to your root font-size.The only “issue” with rem is that it’s not supported by older browsers, namely IE8 and lower. So to use it, you’ll need to include the font-size in px as a fallback. But in my eyes, its benefits outweigh this small “issue” by far.
Since we started using Sass for our projects, to make things more convenient, we wrote a mixin that will convert the input px to rem. It also outputs the px value as fallback for browsers that don’t support rem.
So first step, we need to write a Sass function that gets the rem value based on the px value that has been passed in. To do this, we need to divide the input px value with the default 16px set by the browser:
@function calculateRem($size) {
$remSize: $size / 16px;
@return #{$remSize}rem;
}
You might ask, “What if the user has a different default font size in their browsers”? Well, the great thing about rem is that the text will just scale proportionally like em! Pretty good, right?
Next we create a mixin that calls the function:
@mixin fontSize($size) {
font-size: $size; //Fallback in px
font-size: calculateRem($size);
}
Now your mixin is ready to be used! To use it, simply include the mixin wherever you need to declare a font-size.
Sass:
h1 {
@include fontSize(32px);
}
Output:
h1 {
font-size: 32px;
font-size: 2rem;
}
With simple Sass functions and mixins like this, we save a ton of time and human errors from punching numbers into our calculators.
You can find all the code to convert rems from pixels on the OOCSS open source project.
I recently spoke at JSConf about my experience working with Trulia to create a living style guide. The goal for the project was to improve performance, team velocity, and also to have a more consistent design. It was such a fun project (because their engineers were great to work with) and also successful on all three fronts. Here are some of the metrics for the data-lovers:
I’ll be speaking at Velocity Conference in a couple weeks where I’ll go into more detail about the Sass magic that made this possible. :)
CSSConf – This is your conference.
Last week we invited the CSS community to submit talks for the upcoming CSSConf (May 28th, Amelia Island, FL).
The CSS community has an excellent history of curated conferences, and yet we want to do something a little bit different. We want to see what you have to say! What do you think is cool? What are you working on that you would like to share with the community? We decided to do a Call For Proposals because we wanted to balance curation with community.
Some folks may not be familiar with a CFP. It comes from the scientific community, when scientists would submit a proposal to present their work to their peers. The scientists with the most interesting abstracts would then be chosen to display a poster describing their work at a conference.
We decided to build on this model because we firmly believe that the community is doing amazing things. We are excited to hear about them, and to help you share your work with others.
We are following the JSConf EU method so that we can choose the absolute very best proposals that come in.
The most important part is that we have eliminated all identifying details when we are evaluating the quality of your proposals. We won’t see your name, your company, or whether you have spoken before or are brand new to speaking. This means you have a chance to speak if you are famous but also if you have never set foot on a stage. Each of the proposals will be evaluated on it’s own merit. We’re excited about this process, and we hope you are too.
(After the first two rounds of selection are complete, we will reveal your names/locations so that we can do important things like figure out if travel from your location will fit in our budget).
If you want to know a little more about how we’re doing it, or, even better, you want to submit a proposal, head on over to the CSSConf Call for Presentations. Thanks for being a part of this. If you have any questions, or need any help getting your proposal together, don’t hesitate to get in touch with us at contact@cssconf.com.