We love Formstone and think you will too.

In tandem with the advancement of smart phone and mobile technologies, developers and designers have adapted to responsive design. At the time mobile devices were introduced, developers had to make a choice; write responsive code from scratch or find a friend on the internet who has shared their code. Luckily, the HTML, CSS, and JS framework, Bootstrap, made its appearance on the code playground and developers could rejoice in the ease of building responsive designs. More and more collections of front-end components followed.

As developers, we have many choices. Do we stick with what we are used to (and what's popular), Bootstrap? Or do we branch out to a new friend on the code playground? At Fastspot, Formstone is our preferred front-end library.

Formstone Features

Setup

Both Formstone and Bootstrap are open source and can utilize SASS, Less, or regular ol’ CSS. Formstone is automated with Grunt for code quality and Bower to maintain simple implementation.

Grid

Formstone’s grid starts at three columns on mobile, six columns at a medium size, and expands to 12 columns at desktop, whereas Bootstrap has 12 columns across all browser sizes. This allows designs to maintain their intended flow without having to stack elements on top of each other, which oftentimes blows out the content and causes more scrolling than intended.

Minimal

Formstone has a minimalistic starting point. The code base is free of the bloating found in Bootstrap, leaving less room for distractions. With Bootstrap, developers often have to override existing styles that come in the package.

Unique

Bootstrap is so widely used that you can begin to notice sites around the web that have been built with it. Formstone's built-in theming feature is unique. It's easy to create different themes for each component used on the site, resulting in easy to maintain and reusable code.

Components

Formstone and Bootstrap both come with over a dozen components to aid in making the build more simple. Bootstrap’s components are class heavy, which come with a lot of extra styles. This ends up getting in the way more than it is helpful. Formstone’s components are prefixed with the class “fs-“ to make it recognizable that there is important functionality intact. The components also include accessibility features to ensure the site passes the test.

Formstone In Action

Hamilton.edu is an excellent representation of Formstone in action. For the Hamilton College website redesign, Fastspot teamed up with college's developers. Fastspot built the front-end and Hamilton handled the backend development. If you open the Hamilton site in your browser and adjust the window size, you can see how gracefully the site adjusts at each breakpoint. The way each component changes its look to adapt is Formstone at its finest.

Take the homepage component ‘Just the Facts’, for example. On the desktop view there is a carousel with blue arrows. These blue arrows are a part of the theme that can be reused on another carousel on the site. As the browser reduces to mobile size, the arrows disappear and pagination dots appear. These are part of the Formstone Carousel component and are also themed as reusable content. This untraditional-looking carousel is indeed a carousel that was themed to match the design.

Try it Out!

Formstone is a unique approach to developing front-end components. Its grid gives a fresh approach to responsive design, the components offered are well thought out, and the code base is minimal. Give it a try and let us know what you think!

Share on Twitter or Facebook Published June 9th 2017