Building websites from scratch with Craft and Inuit

I just built a new website this weekend using two interesting technologies that I really enjoyed. One was Craft CMS which is a powerful CMS that happens to be written in PHP but does not require me to write any of that terrible PHP syntax. It uses the Twig template language, which is nice because my brain has a very easy time parsing it and writing it. Also, Craft was interesting because it came with no template styling out of the box, it was up to me to create my markup and styles from scratch. I loved that.

To generate those styles I tried out Inuit CSS (SASS) Framwork which is a very minimal framework that has almost no visual styling out of the box. I installed their bower components and only activated the few modules I needed and then added my own custom overrides on top of it. It was great. I love working in SCSS, and Inuit was really easy for me to understand since I had already been using the Foundation SASS mixins on other projects. Inuit is similar, just simpler and lighter out of the box. Adding Inuit components requires a trip to the terminal to run bower install blah, so if you’re already comfortable with a bower and SASS workflow I say, try out Inuit. The one Inuit feature I wanted to try out but couldn’t without a paid license is user accounts and registration. If it came to needing user accounts I would be tempted to build a Laravel, ASP.Net MVC or ServiceStack.Net application instead.

From document to website in one day. It’s a neat idea, My process looked like this.

  1. Install Craft locally. I  ran my local Craft website using a pre-built vagrant definition I found on github.
  2. Start with your content. Create your content fields and matrices in the CMS. Import and write your content.
  3. Set up the HTML with semantic markup in the Craft Twig templates.
  4. Create a new site.scss file. Turn on SASS `sass -watch craft/templates/site.scss:public/css/site.css
  5. Install the Inuit Bower Components. Add them to your SCSS file. Turn on the features you want.
  6. Change the baseline size. Develop a color scheme, add color variables in your SASS.
  7. Style the elements of the HTML you already created. Tweak visuals until you’re happy or you run out of time.
  8. Deploy. I deployed my website to Azure websites through a connection to my private BitBucket source control repository.
    It was quick and painless to create a website starting from a document and a few photos. I can see this being a really interesting way to build websites. I like the ease of setup, and the power of creating from scratch. And the knowledge that I didn’t just throw a static html file on a host somewhere, and I didn’t need to install WordPress or develop or buy a WordPress theme.