nickpiesco

Here at Bloomfire, we’re loving building new components with React. We’re even going all in with using ES6 modules and inline styles. (‘Inline styles?!’ I hear you say? Don’t knock it ’til you’ve tried it.)

There’s a lot of cool stuff we can do with CSS that we can’t do with inline styles, though; and that’s where Radium comes in. Radium not only provides a handy way to style :hover, :focus, and :active states, but it also deftly handles media queries. If you’re using inline styles in React and not using Radium, you should. I’ll give you a minute to go look it over – here’s the link again.

Back? Okay.

We create a style object in each of our React components, which we then reference in the JSX below. Here’s a super-stripped-down example:

// [myAwesomeButton.js]

nickpiesco

After reading about the awesomeness of Sass for a while, two things finally got me to take the plunge: variables and nested rules. Sass also provides an extra layer of awesomeness by allowing you to nest media queries – combine that with some well-crafted variables, and we're on our way to smoother responsive sailing.

There are advantages and disadvantages of nesting media queries. If you kick it old school and have one big media query with all your rules inside it, it's kind of a pain to go back and forth between where a style is initially declared and where it's changed in the query. However, if you need to change the breakpoint, you only need to change it once and you're golden. Now if you nest your media queries, tweak

nickpiesco

I wrote this fairly straightforward cross-browser linear gradient mixin:

@mixin gradient($from-color, $to-color) {
	background-color: mix($from-color, $to-color); /* Fallback */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from-color), to($to-color));
	background-image: -webkit-linear-gradient(top, $from-color, $to-color); 
	background-image:    -moz-linear-gradient(top, $from-color, $to-color);
	background-image:     -ms-linear-gradient(top, $from-color, $to-color);
	background-image: -o-linear-gradient(top, $from-color, $to-color);

nickpiesco

We all love the cool stuff we can do with pseudoelements in CSS... almost as much as we love being able to specify hover behaviour without having to mess about with JavaScript. When we try to use the two together, though, sometimes we can run into problems.

One frequently-used way is to use :after to append an arrow after some link text. Unfortunately, if we also have some sort of hover behaviour applied to that link, it will also apply to the pseudoelement as well. Most of the time, it's not a huge deal; but sometimes, it just looks wonky.

I had a fairly standard menu of list items with background-color applied to each item and :hover applied to the anchor tags. The last item was a sign-out link, to which I wanted to append an arrow for more call-to-action goodness. Since I wanted only that last link to have the pseudoelement applied, I had to assign a class to only that link and then apply the pseudoelement. That worked nicely... until I hovered over the link. The stupid arrow was underlined! I can'