Web design is often lumped together with a lot of other ideas like UX design and web development. Although these areas do overlap, the skill sets are not interchangeable and not all designers know how to code (or vice-versa).
But those who do code websites are often very task-oriented with a focus on the final outcome. This means it’s a good idea to work with best practices to speed up the whole development cycle. It’s not an easy task but there are plenty of free resources out there to help.
This article includes some handy tips and resources for a more expeditious front end web development process. As with most projects, why should work take longer than it needs to? Those who reinvent the wheel often have a good reason for doing so, but it’s not the best choice 100% of the time. Instead utilize these resources to improve the speed and efficiency of your own frontend workflow.
Free CSS Libraries
All modern website layouts rely on CSS to maintain consistent typography, style, color, and composition. Libraries are pre-built CSS codebases which contain a specific order to define brand new websites.
Not all libraries will be useful for each project, but many of them will come in handy. For example, Normalize.css is an open source code library for rendering uniform HTML5 elements in all browsers. Similar open source libraries are all free to use and edit for any type of project.
The following examples are just a few libraries which seem to be the most popular. Web developers often enjoy coding their own styles from scratch, and there’s no doubt that each site is going to need some custom code. But working on top of a strong foundation will save you hours of time and stress.
These libraries are so attractive because they incorporate default settings for all the major features you could ever need. This means a lot less work on the whole because developers can merely overwrite existing CSS code instead of starting from scratch.
Another fairly new example is Pure.css which is a fully-responsive code library for any type of website. The homepage is very clean and the documentation is easy to understand. Some developers prefer the Pure.css library over Bootstrap because it’s cleaner and smaller.
Check out some of the default layouts created with Pure. Each one is free to download and customize at your own volition.
And while these two libraries are not the only choices, they are considered the most stable.
Secondary to a complete library would be a general grid library. This type of CSS file is used to build layouts on a series of pre-generated grids. They basically rely on a series of columns which are fitted into a layout based on fluid width or fixed width.
At first it can be tricky learning how to use a grid system. These libraries require time spent reading documentation and careful attention to detail. But some developers live by them because layouts can be constructed in record time without any major concern for CSS bugs.
The Semantic Grid System is built on LESS or SCSS(SASS) with an extremely versatile library. Everything runs on HTML5 elements with varying options for responsive or fixed-width layouts.
For this library you can save even more time by using a CSS preprocessor like SCSS because you’re writing less code in the stylesheet. But we’ll cover this a little later in the post.
Flexible Grid System is another option which is actually built to be compatible with Bootstrap. So a developer could include the Bootstrap framework and use the Flexible GS as a grid structure for the layout. Naturally it can also work as a standalone structural library for any page.
Each Flexible GS layout has a series of different views from XL to XS. On the homepage, you’ll find a demo of each layout style and how page elements can adapt to screen size.
But even with CSS it takes a fair amount of code to write your own animation. This is why some developers have released free CSS libraries to save time for others who want to create beautiful CSS animations without starting from scratch.
The undisputed contender of CSS animation libraries would be Animate.css. It has a slew of intense animated effects from the subtle to the grandiose.
An alternative choice might be the Hover.css library. This is another open source project hosted on GitHub which focuses more on hover effects. Animations can be triggered whenever a user hovers onto a link, button, page item or SVG element.
Granted, the usage may feel a little restricted, but the effects are totally far-out. Some of these effects can be replicated using Animate.css, but others have been custom-made for this library. So if you’re looking for pure CSS code then go through both libraries to see what best fits your current project.
New web developers might save a small .txt file with snippets that can be copy/pasted as needed. But a better option would be using a program like Coda or Dreamweaver which supports custom code snippets internally.
Regardless of your system for storing code snippets, the trickier step is actually finding useful ones to save. There are some great online resources for code snippets which you could bookmark or spend time perusing at your leisure. But here are a couple popular resources:
The Eric Meyer CSS reset is perhaps my absolute favorite. I’ve taken his reset and customized a few things to create my own custom snippet, but the fundamental principle is still the same.
This large code snippet should be placed at the top of each new CSS file. These codes are referred to as resets which reset every browser to default styles for text, padding, margins, and element rendering. So this is more like a manually-crafted version of Normalize.css if you want to avoid excess libraries.
Also check out the CSS-Tricks website for their unique list of code snippets. Most of them are frontend stuff for handling browser error and bug fixes in older versions of Internet Explorer. It depends which browsers are most commonly used by your visitors and which ones you’re developing for.
But if you’re looking for pre-built HTML/CSS codes, then definitely check out various cloud IDE platforms. These are like in-browser text editors hosted in the cloud. Developers from all over the world test out ideas and share them with the community for free.
CodePen is full of these snippets which rely on HTML/CSS/JS and even compiled languages such as HAML, LESS/SASS, or code libs such as jQuery. You can search by tag or even check out collections related to a particular subject like navigation menus.
Another fantastic cloud IDE is CSS Deck which has more of a focus on HTML/CSS solutions. But the site is still chock-full of amazing codes for creating custom tab bars, dropdown menus, buttons, hover effects… anything you can possibly imagine.
A great way to speed up your development process would be to start building a snippets library. Most code editing programs have a snippets folder where you can create sub-folders to organize various snippets(CSS, JS, full solutions, etc). Try to keep only relevant solutions which you’ll actually use for project work. These can help to jump-start new projects and provide relief from hard-coding everything yourself.
Preprocessors are tools which compile alternative code languages. These are often used in software development but have found their way into some languages on the web.
Newer platforms tend to focus on CSS compiling as a means of saving time during development. The two major CSS processing platforms will be covered in the following sections. If you’re interested in saving time with CSS snippets and reusable code, then definitely try your hand at either of these extension languages.
Compass & SASS
The Sass language is a tool for writing quick and easy CSS. It has features that you would expect in a programming language such as variables. Sass also supports something named mixins which are little reusable snippets of code.
Sass has recently undergone changes to update the language syntax to a new format. This new format is still technically “Sass” but is named SCSS. The two are practically interchangeable, although major differences are noticeable and should be understood. With that said, it’s generally a good idea for new developers to stick with SCSS aside from personal preference.
The Compass framework can write Sass/SCSS code faster and with more stability. It’s free to install and generally runs over the command line, although there are native OS programs. Any developer who wants to get into Sass/Compass will have a brief learning curve, but it tends to become addictive once you realize how much time it shaves during development.
And if you just want to play around, check out the online webapp SassMeister. This is like a cloud IDE built specifically for Sass. It’s also true that CodePen offers Sass, so it’s really up you whichever platform seems easier for learning.
Twitter Bootstrap is known to use Less as an extension language for CSS code. This could be a great choice for those who love Bootstrap and want to save time when crafting new projects.
And just like Sass there is an optional online Less Tester webapp. Simply add some code, and learn how it complies into Less. This can be an excellent way to familiarize yourself with the language without having to install anything.
So the ultimate question is which one should you choose? At the moment, Sass/SCSS appears to be more popular in the overall community. But they’re both fantastic, and you really can’t go wrong–the major differences are syntax-related and how the code is compiled.
Open Source Plugins
This has spurred a large community of developers who create their own jQuery plugins. Some of them are sold as premium products while others are released for free online. So if you need some great free jQuery plugins, your own roadblock is knowing where to find them.
Unheap is a consistently updated jQuery plugin repository. This is just a fancy way of saying the website has a directory of new jQuery plugins organized by categories. Mostly all of them are free, and you can even demo them on GitHub or wherever they’re hosted.
Unheap is a site that every JS developer should remember. It gets updated frequently with new plugins from all over the web. And there’s no question that jQuery plugins will save you a lot of time constructing larger elements like an image carousel or sliding navigation menu.
Another secondary plugin repo is jQuer.in. The site is structured more like a gallery but still includes some of the most popular plugins from all over the web. I would highly recommend this as an alternative to Unheap.
And lastly, we come to the raw source of most jQuery plugins: GitHub’s search page. By typing in a few keywords, you can likely find a series of plugins which behave exactly as you’d need.
Building Practice Layouts
The best way to improve your speed at frontend development is through lots of practice. Put together some ideas for websites, and just build them. Or try rebuilding existing websites that are already online.
But to sincerely improve your skillset and surpass boundaries, you’ll need to challenge yourself. Set aside time for practice projects, and push yourself to reach the level of skill you desire.
Those who are still new to web development will need to spend a lot of time practicing and learning the traditional fundamental ideas. From that point, it becomes a lot easier to write your own code or customize plugins from scratch.
I certainly hope these ideas will push developers onward to focus more on the final product rather than a conglomerate of hand-built widgets. Although custom code will always be useful, it’s generally wise to reuse code whenever possible to save both time and turmoil on web projects.