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

This is the blog of Morten W. Petersen, aka. morphex in various places. I blog about my life, and what I find interesting and/or important. This is a personal blog without any editor or a lot of oversight so treat it as such. :)

My email is morphex@gmail.com.

An OGG/Vorbis player, implemented in Javascript.

My Kiva bragging page
My shared (open source) code on GitHub

Morphex's Blogodex

News
Slashdot

Zope hosting by Nidelven IT

Morten Petersen on Linkedin

Morten Petersen on Facebook

Morten Petersen on SoundCloud

Morten Petersen on MixCloud

Blogologue on Twitter



Older entries



Atom - Subscribe - Categories

Facebook icon Share on Facebook Google+ icon Share on Google+ Twitter icon Share on Twitter LinkedIn icon Share on LinkedIn

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]