Introducing Phoenix

Technology Phoenix: a scalable, modular front end framework for the modern web

The world of front-end web development has changed drastically in the last few years and continues to do so. In order to keep up-to-date with the continuously changing landscape we’ve built Phoenix, a front-end development boilerplate.

What is it?

Phoenix is a free, open source project that combines modern best practices, new technologies, and solutions to common front-end development problems without overloading developers with bloated code. It provides a clean structure to write modular Sass and JavaScript code, guides thinking and organization without forcing a heavy hand, and helps enforce a common language across departments, from design to UX to front- and back-end. By providing the technologies and structure to design and build modularly, the end result is extensible, feature-rich, and lightweight code we’re continuously improving.

How does it work?

The technologies we placed behind Phoenix are some of the newest and fastest available in front-end development. They include:

Sass - referred to as “CSS with superpowers,” Sass enables us as developers to write reusable patterns and build our CSS without repeating ourselves in ways that aren’t possible (or at least as easy) with traditional CSS.

SMACSS - Scalable and Modular Architecture for CSS is Jonathan Snook’s methodology for organizing your site’s CSS. We’ve taken some of his base concepts, adapted some, and enhanced others for use with Sass to define our Sass file structure.

Browserify - a module bundling system for JavaScript that allows you to use dependencies in your JavaScript and keep things DRY.

nodeJS and Gulp - these two power the build system that compiles our Sass and Browserified JavaScript code into CSS and JS that browsers can understand. They automate a lot of tedious processes that developers used to perform manually, saving time and money. It’s lightning fast, so you can see changes almost instantaneously as you write code.

Why use it?

Many CSS frameworks already exist, such as Bootstrap, Foundation, Gumby, so why build our own? Those frameworks are incredibly powerful and can be useful in the right situations, but they are large in scope and code size, solve too many problems (do we really need multiple carousels in our boilerplate?), and are difficult to reduce in scope if you only want to use a portion of their capabilities. Instead of giving you every piece you might ever need and expect you to rearrange them to suit your site’s needs, Phoenix takes more of a bottom-up approach to development where you’re given the tools and are expected to build the pieces you need to create a site.

We’ve also been able to use Phoenix to improve our internal processes at Connective DX. We do more designs in the browser than ever before and can get working prototypes in front of clients very quickly. This allows us to introduce a feedback loop to projects early on, saving time and money in the long run. It has also led to all departments speaking a common language of modular design and development. Rather than thinking of sites as a series of templates, our designers have begun to think of a site’s content as a series of components that can be placed anywhere on a page. This has helped our front- and back-end developers tremendously when building our codebases.

Where can I get it?

Phoenix is available as a free download on Github. It’s a completely open source project with an MIT license, so feel free to fork it, create or request a new feature, report or fix a bug, and contribute to discussions. We want this to be a tool for the community to use to go out and create lean, well-built sites while meeting the need for an internal boilerplate.

Related Thinking

Managing a responsive website redesign

Managing a responsive website redesign is no small task, especially when you’re a leading healthcare organization with 30-thousand pages on your site.

Full Article