Morphex's blogologue (Life, technology, music, politics, business, mental health and more)

Taking a look at SASS, Compass & Zen Grid

OK, so a couple of days ago I got the idea that I should create a new personal website, which syndicates information from various sources into one channel, or page. That is, all my Youtube stuff, Tweets, stuff posted on SoundCloud, Instagram and so on.

Now, I've been using Python, Zope and Plone for many years, in work projects as well as personal projects. This time, I was thinking of creating something very simple, maybe even static HTML, Javascript and CSS files. Well, as for the static part, I think it is a good idea. The process for creating those static files could be done in any way though.

So I started looking at responsive design, and having a framework that delivers a lot seemed like a good idea. I ended up choosing Zen Grid because it felt right, a Ruby- and Compass-based framework for creating grid-based layouts. Ruby is a programming language, and Compass is a framework for creating CSS. I got Ruby installed, and got SASS, Compass and Zen-Grid installed using gem, an easy enough process, typing 'gem install sass', 'gem install compass', 'gem install zen-grid'.

OK, everything installed - fine. Now I had to create a SASS/Compass project, and the 'compass create <projectname>' command handled that. Creating a project creates some files, using the find command shows which files are present in my project right now:

morphex@infernal-love:~/apache/stats/tester$ find .

./config.rb
./index.html
./sass
./sass/ie.scss
./sass/print.scss
./sass/screen.scss
./stylesheets
./stylesheets/ie.css
./stylesheets/print.css
./stylesheets/screen.css

The sass directory contains the SASS files which will be compiled into the CSS files in the stylesheets directory. Now, first thing is first, and that's the web page. It is available here:

http://blogologue.com/stats/tester/index.html

If you look at the source of that file, you can see it's an example copied from the Zen Grid reference, with the E field commented out. This is because I saw the E field being moved down as content was being added in rows to the B field. I couldn't see any need to go beyond the D so it was just easy to remove it and don't have any headaches trying to figure things out.

The CSS file that gives this page its layout and colours is here:

http://blogologue.com/stats/tester/stylesheets/screen.css

And the SASS file that generated that CSS is here:

http://blogologue.com/stats/tester/sass/screen.scss

It's all fairly straightforward, and it is a nice simple way to create a layout on a web page.

A final note on these files, config.rb should contain

  require 'zen-grids'

to make all of this work, like my one does: http://blogologue.com/stats/tester/config.rb

For my part, I'm thinking it could be fun to create some tools in Python that pulls everything together, at least something that can generate HTML with information from all the different sites I post content to. It's easy to start over-engineering on projects like this, but maybe I'll also wrap Ruby, SASS, Compass etc. in a Python package to make these features easily available for Python. As well as look at including Zope's page template package to easily create templates.

Oh well, I'll get back to progress on all of this later. Tata. :)

[Permalink] [By morphex] [Web (Atom feed)] [04 Dec 17:29 Europe/Oslo]