Meet Lynchburg – a lightweight, easy to use and simple to configure front-end starting point, made by Marvellous.
Today, we’re proud and excited to release Lynchburg to the world, a front-end starting point which is simple to use and easy to configure, allowing you to get up and running on a new project quickly.
In this article, I’m going to go over the basics of Lynchburg and explain how it differs from popular front-end frameworks such as Twitter’s Bootstrap, as well as how we use it in-house here at Marvellous.
What is Lynchburg?
It’s important to note that Lynchburg is absolutely, categorically, 100% not a framework. Rather, it’s a useful tool which builds upon the excellent Bourbon and its accompanying grid framework Neat – both built by the lovely people at thoughtbot. Lynchburg acts as a wrapper on top of these two projects, whilst bundling in our own scaffolding classes and build process, handled by Gulp, with dependencies managed by npm and Bower.
Why Lynchburg?
We started using Bourbon and Neat in all our projects around a year ago, and we found both to be excellent tools. Bourbon’s lightweight set of Sass mixins coupled with Neat’s grid scaffolding allow for powerful, yet highly responsive, layouts which can easily adapt and change to suit any design – no matter how simple or complex. Bourbon – even when coupled with Neat – is far more lightweight than popular front-end frameworks such as Bootstrap or zurb’s Foundation, so it’s perfect to get started, without the added weight of bundled JS or redundant components.
However we slowly found ourself writing our own grid scaffolding and variables over and over again when developing websites – a natural process for any front-end developer, but one which can take time to configure when starting any new project. It’s always important to get this right, as changing or amending a grid layout well into development can lead to a myriad of completely avoidable issues with the littlest of things, such as spacing, typography or alignment.
Constantly striving to improve our own internal processes and speed up development times on complex builds, we wondered if there wasn’t some way to automatically generate and have prepared our own classes and styles ‘out of the box’, without having to write them time and time again when starting a build. After all, the less time we need to spend configuring the basics, the quicker we can focus on the more impressive stuff and the sooner we can ship and launch sites for our clients!
As we follow Harry Roberts’s excellent namespacing naming convention, as well as the BEM methodology, we set to building a tool which would already have all these fundamentals ready and rearing to go. Hence, Lynchburg was born.
What does it do?
As I alluded to earlier, Lynchburg is backed up by a build process handled by Gulp and, for the most part, it takes little-to-no configuration to get working right away. All you need is to ensure you have npm, Ruby and the scss-lint gem installed on your system and you’re good to go – the best way to grab these if you’re running OS X is by using Homebrew.
By default, Lynchburg handles the following tasks when running gulp:
- Installs the latest version of Bourbon and Neat from Bower.
- Moves any font files from a src to dist folder, if present.
- Concatenates and minifies any .scss files in your project, placing the resulting minified file into your chosen dist folder.
- Lints .scss files for style errors or inconsistencies.
- Concatenates and minifies any .js files in your project, placing the resulting minified file into your chosen dist folder.
- Moves images from a src to dist folder.
- Watches all source files for changes, rerunning only the appropriate task when a change is detected.
- Uses BrowserSync to automatically reload browsers when changes are detected.
Additionally, running the accompanying gulp production build process will do all of the above, as well as the following:
- JS linting
- Image compression
How can I use Lynchburg?
As I’ve already mentioned, Lynchburg is completely open-source and is available on GitHub (where else?). It’s in active development and has already been battle-tested on loads of sites we’ve developed for some of our clients, such as Bombay Street, The Yorkshire Soap Co. and Vivderma.
We’d love you to give it a go and let us know what you think – you can get in touch via our Twitter or Facebook pages, or just drop us a line! If you’re so inclined and have any thoughts on how we could develop, refine and further Lynchburg, feel free to Fork the project on GitHub and submit a Pull Request when appropriate.
