Reborn With Statamic, Compass, Bourbon and Neat | Blog | ISO-100

Reborn With Statamic, Compass, Bourbon and Neat

When I first heard that was working on a new CMS I didn’t know what to think. Was Jack abandoning ExpressionEngine addon development?

Statamic

Statamic Logo Jack is one of the creators of , a wildly successful and well-designed add-on that makes managing static content on #eecms a snap for developer and end user alike. I was a little concerned that if he’s switching to a new CMS of his creation, what would happen to his EE addons?

Needless to say when Jack announced on twitter that he was inviting people to participate in the beta of his new CMS I was interested. I played briefly with the beta but was quite busy with the day job and didn’t get a chance to test as much as I had hoped.

Statamic finally went GA and I purchased a copy to compare and contrast against ExpressionEngine, my go-to CMS for all web work. There are situations where not having to deal with a database simplifies things greatly and makes having the content management system and the content an easy thing to version control. Oh, did I mention that most Statamic version upgrades only involve replacing two folders? Yes, it’s that easy. Upgrading Statamic is a 10 second process.

I’ve had a stagnant ExpressionEngine based site/blog up for years that was really just sitting. I was “over” the design and knew that I really needed to start over from scratch. Moving to Statamic was my excuse to do just that.

Compass with a side of Bourbon, Neat

I initially messed around with frameworks like Twitter Bootstrap and Zurb Foundation but found them including far too much and having bloated CSS and javascript. A friend and coworker (day job) showed me and after I mentioned switching from LESS to SCSS. I had heard about before but didn’t give it a closer look due to just recently learning LESS. Compass is a CSS authoring framework that allows clean markup without the mess of presentational classes.

Since SCSS needs compilation to work, I decided to use after my friend Adam Wiggall of suggested it. Livereload detects changes to your project and then via a browser plugin will actually show your updated document without a reload. Since Statamic stores content in the filesystem as well, LiveReload detects this as well so content edits reload as you save too.

Bourbon is a collection of Sass mixins that further build on what Compass brings to the table. Most notable are mixins that allow you to forget vendor-specific rules and some column/grid helper mixins. Neat extends Bourbon to allow the creation of a flexible grid.

I used these tools to hand roll my own styles concentrating on a grid-based, typographic design. I can comment the hell out of my CSS and they get stripped when compiled. I can create many global variables that get replaced throughout my code. I set up some key colors and use functions to tweak and tint based on formulas. I even created a boolean variable that when set to true shows the visual hierarchy of block level elements via opacity.

In short, my styles are nicely organized and well commented when developing and then lean and compressed when deployed. It’s a liberating feeling.

Templating in Statamic

Everything is in the filesystem. Everything. There is no database. That means everything can be in Git. Deploying a site can be as simple as copying out the files or deploying. No mucking about with databases, http tunnels or craptastic database applications.

Coming from #eecms it takes a little bit to get your head around what files do what. Once you get it though, it’s faster than having to do everything in a GUI. Fieldsets you use frequently are only a YAML document away from copying into your new project.

One thing that’s quite nice is the layout functionality. It’s as if the new ExpressionEngine Template Partials technique was integrated right into the core of Statamic. Need to use tag data from an entry in the layout that wraps it? No problem, just include it in the layout. No worrying about parse order or the overhead of an extra embed or any other wonkiness, it just works.

ExpressionEngine Killer?

In conclusion, no… Statamic isn’t a 1:1 replacement for ExpressionEngine. It is, however an excellent alternative to EE for sites that don’t need that level of functionality. Needless to say, there’s no reason to choose MojoMotor over Statamic unless eventually automating an upgrade to ExpressionEngine is important. I fully expect the Statamic team to continue to add features that further narrow the gap though.

Upgrading Statamic is a simple 2 folder copy that takes all of 10 seconds. That’s a nice change.

Support

I’ve had to contact the Statamic team a few times while cutting my teeth. Every interaction was extremely fast and helpful. Jack is super responsive on Twitter (yes, Twitter) as well as the Tender support system. The entire team is a pleasure to work with.

Conclusion

In conclusion, it’s been a blast getting to know Statamic. I’m exited to offer my clients an alternative for sites that don’t need all the power ExpressionEngine brings to the table and would also enjoy saving the 200 dollars. As a front end developer, the ability to have everything including your content in version control is an excellent piece of mind as well. If you’re on the fence about trying Statamic, by all means dive in.

Links Mentioned