Skip to content

Filed under Statamic

Reborn With Statamic, Compass, Bourbon and Neat

Rebuilding this site on flat files, with a hand rolled grid and a cleaner Sass toolchain behind it.

When I first heard that Jack McDade was working on a new CMS I did not know what to think. Was Jack abandoning ExpressionEngine addon development?

Statamic

Jack is one of the creators of Statamic, a wildly successful and well designed addon that makes managing static content on ExpressionEngine a snap for developer and end user alike. I was a little concerned that if he is switching to a new CMS of his creation, what would happen to his ExpressionEngine 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 did not get a chance to test as much as I had hoped.

Statamic finally went general availability 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 is that easy. Upgrading Statamic is a ten second process.

I have had a stagnant ExpressionEngine based site and 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 and 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 at the day job showed me Compass after I mentioned switching from LESS to SCSS. I had heard about Compass before but did not 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 LiveReload after my friend Adam Wiggall 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 too so content edits reload as you save.

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 and 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 is 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 ExpressionEngine it takes a little bit to get your head around what files do what. Once you get it though, it is 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 is quite nice is the layout functionality. It is 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 is not a one to one replacement for ExpressionEngine. It is, however, an excellent alternative to ExpressionEngine for sites that do not need that level of functionality. Needless to say, there is 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 two folder copy that takes all of ten seconds. That is a nice change.

Support

I have 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 has been a blast getting to know Statamic. I am excited to offer my clients an alternative for sites that do not need all the power ExpressionEngine brings to the table and would also enjoy saving the two hundred 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 are on the fence about trying Statamic, by all means dive in.