Front-End Developer
It is easy to be overwhelmed with all of the newest front-end tools out there. Below are nine tools and techniques that the themer crew at PreviousNext are using to make our lives easier.
It is always helpful when other people share how they do things, so if you found this blog interesting then please, share some of your own tools and techniques in the comments area. Also, if you have any questions, don't be afraid to ask!
Before Compass existed, we needed to know every property's browser-prefix (e.g. -moz-linear-gradient, -webkit-gradient) by heart and rewrite them over and over again every time we wanted to do something in CSS3. Compass keeps an updated library of the latest prefixes so you don't have to do the research and updates them when you compile. Some of the main features of Compass are:
Compass isn't the only player in providing browser-prefixes, the lightweight Bourbon library also handles this pretty well.
Mason Wendell's breakpoint extension makes media queries small, so you can do browser specific CSS in clean and lean sorta way. This simple adjustment even changed the way I organize my scss files. In the Omega days, we would put our breakpoint specific code in separate css files. This was a nightmare. Now we add our mediaqueries where they belong, as controllers within the elements they are affecting. Using the breakpoint extension also facilitates the practice of using more breakpoints that are defined based on the element they are changing rather than common device dimensions.
$breakpoint-nav-small: 480px;
$breakpoint-nav-wide: 960px;
.nav {
@include breakpoint($breakpoint-nav-small, $breakpoint-nav-wide) {
// Do something with nav.
}
@media only screen and (min-width : 480px) and (max-width : 960px) {
// Do something with nav.
}
}
With breakpoint() you can also specify a $no-query parameter. This is very useful for replacing respond.js as a way to have your mobile-first media queries display in <=IE8.
Rhythm is just a repeated pattern. The more consistent the pattern, the better the rhythm. In music, it’s the structure that ties all the different instruments together.
- TypeCast
Vertical rhythm means that most of your elements start and stop predictably while scrolling down a website. Compass' vertical rhythm mixins make this complex font-nerd fettish a front-end dev's reality. Easy to use functions allow you to add a pretty accurate vertical rhythm to your site without needing to make complex calculations. Check out this snippet from Zen's _base.scss and normalize.scss to see how a reset stylesheet can implement vertical rhythm from the very beginning.
// Basically Compass' rhythm function takes the variables below and creates a rhythm down the page.
$base-font-size: 16px;
$base-line-height: 24px;
// The rhythm() mixin outputs a margin of margin: 0.85714em ... a computed EM value that will make your site line up. Obviously it is more complicated than that, but that is for another post.
p, pre { margin: rhythm(1) 0;}
Using icon webfonts ensure that your icons are vector based, which is important with new high-res devices. Once you learn how to use them, they are quite easy to use. Icomoon.io should be an essential tool in every themer's arsenal.
Here is a great post on how to use icon fonts from Chris over at CSS-Tricks. Also, ShopTalk is a great podcast if you want to hear about CSS related topics.
Tidbit on Icon Fonts: Ligatures are available in WebKit and IE 10+ which will be great for accessibility. Also, try to avoid using fonts mapping to letters because screen readers will read them aloud, confusing the impaired user.
5. Responsive Images
There is no decided on solution in Drupal to load different files based on device/device-width. It seems like every site needs its own responsive image solution. There are some great modules that attempt to address this problem, both with under a thousand downloads. I have semi-evaluated three of them, please expand in the comments if you have more up-to-date info.
Susy, Zen Grids, Singularity and others provide a great framework for your site's responsive layouts. Whether you use these tools or build your own responsive grids, understanding the principles behind these grid systems will make more complex layouts simpler.
Style guides are not new, but there are a range of new tools that came to my attention that will replace the importance of a styleguide in front-end circles. Kalei Styleguides, StyleDocco, and Knyle Style Sheets are promising projects that offer a solution to the complexity of creating language out of a design. The Styleguide module defines many core Drupal elements on a page to be styled. Check out this DrupalCon Sydney session on Styleguides by Luke Brooker.
Smacss is an e-book written by Yahoo! lead front-end dude that defines some much-needed organizational principles for Cascading Style Sheets. A SMACSS workflow intends to make css and HTML more semantic and less specific. SMACSS neatly divides your base styles, layouts, and modules (not Drupal modules but CSS modules, I know, confusing!) into reusable parts.
You would be amazed how often I see parts of people's sprite maps that show when their containing <div>s are stretched too high or wide.
Placing a sprite in a pseudo-element with overflow:hidden and with Compass sprite height/width detectors will make sure only your targeted sprite is displayed and not unintended sprites. I made a mixin to apply a pseudo sprite on demand and place an icon next to the element of my choice. This works well with icon fonts.
/* Allows sprites to be positioned in pseudo elements. */
// Feed this mixin the name of the image and it will spit out a pseudo element along with a cropped background image apply.
@mixin pseudo-position($sprite-name) {
// This will add padding that equals the particular sprite's width to the left of the sibling element in order to make room for the sprite.
padding-left: sprites-sprite-width($sprite-name) + $indent-amount;
&:before {
position: absolute;
left: 0px;
top: 0px;
// The following Compass mixin pulls in the sprite background then crops the element respectively.
@include sprites-sprite($sprite-name);
// Compass' sprite helper functions.
height: sprites-sprite-height($sprite-name);
width: sprites-sprite-width($sprite-name);
overflow:hidden;
}
}
}
These are just some of the tools were are using. Let us know what you're using in the comments!