CSS and Sass - best way to make sense of it all?

gavnosis · 2012-12-07 16:52:18

I might be missing the point here, but I’ve spent the day trying to make sense of 1500ish lines of CSS which ships a the default front-end style (I haven’t upgraded from 4.5.2 – I was going to but I’ve been going slightly mad trawling through code instead- so maybe it’s all fixed in 4.5.4).

Whilst the end result is very slick (Thank you Phil), and I’ve learned all about embedded Google fonts and seen responsive web design in action, how is a mere mortal expected to tweak this?

The end result is all very nice, but I’ve had such an ordeal finding all the references to change simple things like navigation menu background colours, and screen widths that I’ve wondered if I should just start from scratch (Which would be a shame becasue this is much more sophisticated CSS than I’ve ever written)

I’ve got Firebug and the Web Developer toolbar on Firefox, but there just doesn’t seem to be a easy way to spot dependencies across the whole file, other than commenting out whole sections, and seing what gives (There are even bits which change at different screen sizes!)

Am I even meant to customise this? And if so, is there some magic I’m missing?? And what’s this Sass stuff then?

Help greatly appreciated…

philwareham · 2012-12-07 21:11:59

The CSS is simplified somewhat for 4.6 when that ships. In the meantime you can track the GitHub repo for latest versions of the theme, and use the modular sass files (which are the easiest way to adapt the theme). I strongly urge you to read up on sass, it’s great once you understand it.

Unfortunately there is no magic bullet for a theme that is both comprehensive but tiny in CSS (just look at twitter bootstrap or zurb foundation, neither are particularly lean), but rest assured that we are continuously developing the theme to be easier to understand.

gavnosis · 2012-12-12 10:23:34

Thank you Phil – I’ve been busy reading and installing Ruby since I was last here… :-)

Seriously, I feel like I’ve been living in a cave, and had been blissfully unaware that sass existed, and am trying to make friends with it as quickly as possible!

For me, the best primer has been at Alistapart but I can almost imagine a world when the multifacted styling for a million devices sits seemlessly with a certain elegant CMS.

For the first time in ages, I’m excited by the possibilities

philwareham · 2012-12-12 11:11:21

Good to hear. Sass, along with Normalize and Compass are an awesome set of tools.

Also get to know the developer tools in Google Chrome, once you are using Normalize instead of a CSS reset it makes the CSS inspector a joy to use.

aubergine2001 · 2014-04-06 23:38:31

philwareham wrote #268660:

Good to hear. Sass, along with Normalize and Compass are an awesome set of tools.

Also get to know the developer tools in Google Chrome, once you are using Normalize instead of a CSS reset it makes the CSS inspector a joy to use.

I know this is a bit old, but getting back into textpattern / web design after a 7 year absence. My first Textpattern sites were around 2003-2004.

So I bought a book on SASS and Compass by Ben Frain. I have set up Ruby Stack / server here on my Mac. I also use XAMPP for the Textpattern server. Question, how do I use the SASS, Normalize & Compass with a textpattern test site? Not mentioning getting back into Textile, looking forward to the ride though. How much of Jon Hicks book “Textpattern Solutions” is still relevant?

Gocom · 2014-04-07 05:42:11

aubergine2001 wrote #280109:

Question, how do I use the SASS, Normalize & Compass with a textpattern test site?

Like with any other site. SASS and Compass are command line applications and to use them you simply run the Compass compiler in the directory you have your main scss file stored. I.e.

$ cd /path/to/my/sass/dir
$ compass compile
$ compass watch

And the compiler poops up a CSS file and proceeds to watch changes, re-compiling files on the fly. For more information take look at the help:

$ compass --help

aubergine2001 · 2014-04-07 09:00:33

Thanks Gocom

Like with any other site. SASS and Compass are command line applications and to use them you simply run the Compass compiler in the directory you have your main scss file stored. I.e.

So I do the SASS & Compass with my RubyStack servers on looking at my textpattern site (local) under xampp / htdocs. OK got it

Gocom · 2014-04-07 12:30:40

aubergine2001 wrote #280113:

Thanks Gocom

So I do the SASS & Compass with my RubyStack servers on looking at my textpattern site (local) under xampp / htdocs. OK got it

Involving Rack is unnecessary, but use the Compass CLI interface. I don’t recommend using those bundles, but it too ships with the same tools.

I would recommend taking look at the Compass Install instructions, and using gem and RVM to manage your Ruby environment instead. You will have to use those for actually development anyways.

As you are on Mac OS, you may also want to take look at Homebrew, and make sure you have Xcode and its command line tools installed; some Ruby gems use C extensions and when you run into a one, you will need to be able to compile stuff (next version of Compass uses a JSON parser gem written in C).

Last edited by Gocom (2014-04-07 12:31:39)

philwareham · 2014-04-07 13:09:13

Gocom wrote #280114:

(next version of Compass uses a JSON parser gem written in C).

Hopefully the next version Compass version won’t require Xcode

aubergine2001 · 2014-04-07 14:00:15

Gocom wrote #280114:

I would recommend taking look at the Compass Install instructions, and using gem and RVM to manage your Ruby environment instead. You will have to use those for actually development anyways.

As you are on Mac OS, you may also want to take look at Homebrew, and make sure you have Xcode and its command line tools installed; some Ruby gems use C extensions and when you run into a one, you will need to be able to compile stuff (next version of Compass uses a JSON parser gem written in C).

I did have RVM installed once, but sort of got confused between OSX native Ruby & RVM installations. That is why I RSTACK, I saw it while reinstalling XAMPP. I also did Homebrew, so maybe they are still there. Time to fire up Terminal again, lol I thought I was past my DOS days since switching to OSX in 2008.

Thanks for all of this, sometimes you miss the good ole days with a txteditor to do HTML & CSS.

Textpattern CMS

Textpattern CMS support forum

#1 2012-12-07 16:52:18