Blog

E-Z Bake Websites: Save Development Time By Creating a Front End Framework that Works for You

Posted by in Web Development tagged with ,

graphic illustration of a large piece of cake

In an article for front end developers, Tai explains how writing code can be a piece of cake with three ingredients: LESS, 320 and Up and the Semantic Grid System.

Writing front end code from scratch can be unnecessarily time-consuming. Front end development frameworks like Bootstrap and Foundation are can be great time savers when creating web apps or large, complex websites, but for simple websites, they can be overkill. Here’s how I combined three existing tools to create my own front end framework that’s just right.

If You Wish To Make an Apple Pie From Scratch, You Must First Invent The Universe

In years past, I used to start every website I created from scratch. I typed out the opening and closing <html> and <head> and <body> tags, and everything in between. I defined my typographic and layout styles, over and over, often using the same or similar styles for every site. I had just made the transition from using WYSIWYG tools like Dreamweaver and took pride in typing out every byte of a website’s front end code.

Now, of course this is a phenomenal waste of time. Every site, no matter how unique, is going to have a base of code that is the same as every other website. There’s no need to start from scratch every time, no matter how hard-core it makes you feel.

Now, while I’m a pretty good front end developer, I’m not much of a baker. If I want to make a cake, I’ll grab a Pillsbury box and an egg rather than gathering flour and sugar and measuring cups and sifters and such. Pillsbury and Betty Crocker made it easy and less time-consuming to make a cake by pre-combining most of the ingredients for you. That’s kind of what boilerplates and frameworks are like.

Out of The Box: Front End Development Frameworks

A boilerplate, as it relates to front end web development, is a starting point for writing HTML and CSS. It’s usually a single HTML page with all the necessary basic tags, and some basic CSS styles. HTML5 Boilerplate is one that has gained a lot of traction in the two years it’s been around. It’s a great way to get up and running when building a website. But even when using a boilerplate, often you can still find yourself writing out a lot of the same style patterns over and over again.

A front end framework takes the boilerplate idea even further, going beyond just the basics. The most popular of these full-featured frameworks are Bootstrap and Foundation. Both Bootstrap and Foundation are chock-full of CSS styles for typography, images, forms, tables, buttons, menus, tabs, dropdowns, alerts, labels, breadcrumbs, progress bars, page layouts, JavaScript doodads like modals and slideshows… it goes on and on.

Okay, What’s Wrong With That?

Fully-loaded frameworks like Bootstrap and Foundation can be useful sometimes, but they’re kind of overkill for my taste. They’re also not the easiest things to customize. Bootstrap’s aesthetic is pretty heavy on gradients, drop shadows, and rounded corners. Everything is a little too “finished,” so customizing its elements often means spending time and effort removing things that don’t work for your project. Foundation is a little bit simpler in that respect, but the dealbreaker for me was that its responsive styles are all built around a single breakpoint, at 768px (the pixel width of an iPad). This means that Foundation’s single-column “small” view is shown on all devices up to 787px wide, and the multi-column “big” view is shown on iPads and larger. That’s better than nothing I suppose, but it leaves a lot of awkward layouts for devices that fall in between, such as Kindles, small tablets, and so-called “phablets.”

Let’s Bake Our Own Framework

Bootstrap and Foundation are too big and bulky, but HTML5 Boilerplate is too small and sparse. Clearly the optimum solution exists somewhere in between. This means baking a custom framework that suits your needs — something that has enough patterns and styles so you won’t have to type out (or copy and paste) the same things over and over again, but something that’s not so full of finished styles that it’s a bear to customize. After some trial and error, I think I’ve found the ingredients I like.

Ingredient One: Less CSS

I suppose if I wanted to be more accurate with this cake metaphor, LESS CSS would be more like the mixer, or an oven: it’s a “machine” that reduces the front end developer’s workload and brings everything together into a finished product. LESS is a CSS preprocessor — an advanced stylesheet language that compiles into CSS. It makes writing CSS a bit more like writing JavaScript or another programming language, by giving the developer the ability to use variables, functions and so forth. It compiles (either locally, on the server, or in the browser) into plain old CSS that the browser can read.

LESS can increase the ease and efficiency of writing and editing your CSS. Instead of trying to find that hex value for that specific shade of blue that’s used all over the site, you can set that value to a single variable, and use that variable anywhere in your CSS. Changing the value of the variable will change it anywhere in the CSS that the variable is used.

Instead of typing out the same collection of often-used CSS declarations over and over again, you can create a “mixin” that contain a set of declarations, and call that mixin on any CSS selector. For example, maybe you’ve discovered that you often add a bottom border, bottom padding, and bottom margin to various elements throughout your site. Instead of writing out all those declarations on each element that needs it, you can create a mixin and just call that mixin wherever it’s needed.

Mixins can also accept arguments, making them behave like functions. This comes in handy when dealing with newer CSS3 properties that still require vendor prefixes. It’s a pain to fill in all the values of a CSS gradient for every vendor syntax, for instance, but using a LESS mixin, you can write the syntax out just once in the mixin, then call the mixin on a selector and pass color arguments into it.

I won’t get too deep into the intricacies of LESS here, but it can do a lot more, such as operations (you can add, subtract, multiply, or divide widths, border-widths, even colors), color functions like lighten, darken, desaturate, etc., and a plethora of other useful tools. Its tools help tremendously not only in writing CSS from scratch but also in creating and modifying front end frameworks, as I’ll demonstrate.

As a sidenote, LESS isn’t the only CSS preprocessor out there. Others swear by Sass or Stylus, but I prefer LESS for a number of reasons, mainly because I can easily compile it locally, using Less.app or CodeKit; and upload the compiled, minified CSS file to my site, rather than having to worry about mucking about with server configuration or relying on JavaScript to compile it client-side.

Ingredient Two: 320 and Up

This is the main part of my custom framework, the Pillsbury cake mix, and I have to give major credit to CSS master chef Andy Clarke for putting it all together. 320 and Up is Clarke’s own custom boilerplate: the HTML files are based on HTML5 Boilerplate, many of the styles for buttons, alert dialogs, tables and such are from Bootstrap, and it also includes tools like Modernizr and Selectivizr — basically, all the stuff you’d be spending time throwing together yourself if you were making a standards-based, progressively-enhanced website from scratch.

One thing that makes 320 and Up unique is that it’s “mobile first” (or as its website puts it more accurately, “tiny screen first”) — it arranges its media queries with small screens as the default, adding larger sizes as needed, so that devices with small screens don’t unnecessarily load styles and assets that are meant for larger screens.

And guess what? It’s written in LESS (Sass and SCSS versions are also included), making it easy to change the default variables and mixins that are included, customizing to your liking.

320 and Up includes the basics of just about everything you might need when starting a new website project. There’s one notable thing it doesn’t include, however: a grid. Which brings us to ingredient number three.

Ingredient Three: The Semantic Grid System

CSS grids are often used to aid in layout, making it easy to create columns that line up perfectly and proportionately. Grid frameworks like Blueprint and 960 Grid System have been popular since the pre-responsive days, and there are now responsive versions of each of them, as well as a slew of other responsive/adaptive grids that have popped up in the last couple years.

It would be easy enough to add any CSS grid to 320 and Up — it would just be a matter of including an additional CSS file. After sifting through the plethora of options, I found something called The Semantic Grid System. And it’s awesome.

Why? Many CSS grids lock you into a 12-column or 16-column grid, a set gutter width, and a set page width. Semantic.gs allows you to customize all of these things — the number of columns, the column width, the gutter width, and you can choose to use percentage widths or fixed pixel widths. Also, it doesn’t touch your HTML — no more “span3” or “grid_4” classes cluttering up your HTML markup. How does it do all this? Using the magic of LESS, of course!

The Semantic.gs LESS file is simple and compact. In just a few lines of code, it uses LESS’s mixins and math operators, in combination with the @column-width, @gutter-width, and @columns variables that you set, to calculate exactly how wide each of your columns should be and what their margins should be.

Let’s say you have two main columns on your site: a main content area and a sidebar. (Given the layout changes brought about by responsive web design, I’ve moved away from using class names like “sidebar” and have started to use class names like “primary” and “secondary.”) Rather than adding additional grid classes to these columns every time they appear in your HTML, you just add a .columns() mixin to your established class in your LESS file.

So maybe, on the desktop-width version of your site, the “primary” column should be 9 grid columns wide, and the “secondary” should be 3 grid columns wide — you just give them .columns(9) and .columns(3), respectively. The Semantic Grid System’s LESS file calculates the CSS needed for those columns and applies it in the compiled CSS.

What you’re left with is a CSS file that only includes the CSS that’s being used on your site, rather than a mess of CSS defining every possible grid combination. Leaner HTML and leaner CSS means a faster loading website, which means happier users and a lighter carbon footprint.

The Remaining Ingredients: Make It Yours

One of the great things about 320 and Up is how it arranges its LESS files. There’s one “master” LESS file, a list of CSS @import statements, which pulls in all the other LESS files. This way, you can keep all of your styles organized in separate files (color, typography, layout, etc.), while only having to upload a single, minified CSS file (fewer HTTP requests = a speedier website). Code organization and site optimization: you really can have your cake and eat it too. (See what I did there?)

All of the variables are kept in a single variables.less file as well. There are variables such as @basefont, @altfont, and @codefont for your font-family values. There’s a @basefontsize and a @baselineheight which can come in handy when dealing with typography and setting a baseline grid. There are variables like @linkcolor and @alertcolor which you can customize to your liking. On some websites, you might need only modify the variables.less file and that might be enough to make a uniquely styled site.

But, maybe the cake mix out of the box isn’t good enough for you. Maybe you want to do some deeper customization. You can always add a new LESS file to the mix. For instance, I recently decided I wanted to add some commonly used navigation bar styles to my framework, because I knew they’d often come in handy. I cracked open Bootstrap’s navs.less file, made some modifications, and added it to my custom 320 and Up.

I also made a new file containing layout styles for a responsive thumbnail grid. I added some patterns modified from Dan Cederholm’s Pears. I threw in some common typographic and layout styles from blogs and comment sections on websites that I’d done in the past. And in doing so, I made good use of LESS variables so that I can easily customize these patterns for each site I’ll build using this framework.

Find What Works For You

Combining 320 and Up and Semantic.gs, and leveraging the power of LESS, allowed me to create my own front end framework that I’m happy with. Will this particular combination work for you? I can’t say. Maybe you prefer Sass to LESS. Maybe a different kind of grid, or even no grid, is more up your alley. Maybe there’s a boilerplate or collection of styles and patterns that suits you better. The point is to learn and experiment. There are lots of smart front end developers out there that have done a lot of work for you, but there’s no need to have to bend to the will of someone else’s solution. Your task is to find something that will save you time while allowing you the flexibility you need.

Tai Palmgren is an elusive designer-developer hybrid, like an internet centaur. He fights on the front lines of front-end and knows that UX would be nothing without U. Mightybytes is a full-service creative firm for conscious companies and a certified B Corporation. Connect with us on TwitterFacebook and Pinterest or fill out our contact form.