Posts Tagged ‘Compass’

Update On Redesign Of JC-Designs.net And The Sass

Thursday, November 4th, 2010
Update On Redesign Of JC-Designs.net And The Sass

Home page is coming along

It is slow going because I am doing a lot of new things. At least for me. I’m using Compass and Sass, the HTML5 boilerplate, HTML5 tags that I am still coming to grips with, and who knows what the hell else. But I wanted to show you my .scss sheet so far, so you can see what is involved. You can learn a lot just by looking at stuff like this, so if you find it helpful, let me know!

What I’ve learned in the process

Holy crap…there is a lot. What has helped me the most is learning a little more of Compass. I was and still am an idiot in that area, but I think I have read most of the site now. There are a few things that evade my grasp, but for the most part, things are coming together.

(more…)

A Review Of Compass For Sass

Tuesday, October 26th, 2010
A Review Of Compass For Sass

Front enders be warned, its hard, but worth it

First, if Chris E., creator of Compass, wanders over and reads this, I apologize if I was harassing you with my questions. I’ll post them in the document support section from now on.

Compass does not feel like it is written for non-programmers (which is probably fine for most users and the creator). Why, you ask would that be ok? Because I don’t feel that was their intention. I’ve read that they want to make Sass/SCSS more accessible to people new to it, but if that is true, they is a lot of work. To use them, you need the command line. How many of you are familiar with that? If you are young and don’t remember DOS, it is intimidating. We are used to interfaces, right? I mean, look at the editors we use. The command line has NOTHING to look at. Literally. So besides trying to learn a cool…not sure what to actually call Compass or Sass…technology? You have to dive into using the command line. Forget Dreamweaver for editing your .scss file, won’t work (at least not the version I have CS4)…which doesn’t matter all that much to me since I am using NetBeans and Notepad++. My point is, actually USING these things is great. Getting there sucks.

The install process is a bitch. At least if you go the Ruby way, and I am not sure there is another way, considering it is a gem, but then you have to wrap your brains around that one, too. I know that this sounds discouraging, but I am here to tell you that ALL that crap…is worth it. Just be prepared for some serious learning and a lot of searching.

(more…)

Sass (SCSS) and Compass Cheat Sheet

Thursday, October 21st, 2010
Sass (SCSS) and Compass Cheat Sheet

Because there isn’t one

First, a huge thank you to Hampton Catlin and Nathan Weizenbaum for giving us Sass.

As far as I know, there isn’t a Sass (SCSS) Cheat Sheet out there, and there should be. I am fairly certain that most people new to Sass and just getting into it have done plenty of searching for what they are trying to do, but find the actual help available lacking. There are very knowledgeable people out there that are willing to help,like Chris Eppstein and Derek Perez, but outside of those two, there are very few places to turn too. The documentation is ok, but I hate weeding through that thing. I want a cheat sheet that shows me how to do specific things. The problem I keep thinking about though is that you don’t just need the syntax, or a list of methods like jQuery, but actual small examples of how to write something. And just to make things interesting, let’s include Compass!

The real problem – I need help

I can’t do it alone, because I am a newbie. I can start it and add to it as I go, but someone more knowledgeable will have to provide the trickier stuff or just things that I may have missed. So, I am asking you to help me and leave a comment on what should be added. I’ll post it in code form below, and provide a pdf file that you can download below. The Compass part I will include in the pdf version.

Download File

(more…)

Using Sass(SCSS) On My Website Redesign

Thursday, October 14th, 2010
Using Sass(SCSS) On My Website Redesign

Out with 960gs, in with Sass

Note: I have included at the bottom of this article, the actual Sass/CSS I have written for my redesign. When I am completely finished with the build, I will post the whole thing for you to view. If you see anything I am doing wrong, poorly, or stupid, PLEASE inform me. I am learning too!
If you read my post yesterday, you will know that I will not be using the 960gs on my main site redesign. Not because it is bad, but because it isn’t going to fit with the project. What I WILL be using though, is Sass. I’ve done a couple of articles already on it, which you can read below if you wish:

My goal in using Sass for my redesign is to 1) get more familiar with it and learn the syntax better, and 2) well, to say that I did. Always good to learn, and if anyone happened to care, I can always stick it in the resume. One thing I have noticed is that there is no really good reference to using it. An e-book would be great, as it doesn’t need to be very long. Hell I would even settle for an article that posts the Sass styles for a complete site that uses all the CSS3 styles.

Take a look at what I have built so far:

View Demo

(more…)

WordPress Custom Fields, plus Compass/Sass tip: CSS inline images

Thursday, July 22nd, 2010
WordPress Custom Fields, plus Compass/Sass tip: CSS inline images

Set out to learn something…and I did. Now its your turn

I wanted to create images that I could use for each post showing that it belonged to a certain type of category. You look at the image, and without reading the title, you would say “Oh, this post relates to WordPress.” Same with jQuery, Blogging in general, or whatever category I come up with. Something my readers would come to recognize over time. I also wanted to be able to do it without having to stick it in manually in the post like I do with the other images I stick in articles. If you are on the home page you will already see this. That is the one I came up with for articles relating to WordPress.

Now, I can’t take credit for what I am about to show you. I learned how to do this fromJustin Tadlock’s blog, but I wanted to spread the love. This was the best tutorial I found on the subject.

Just 10 Easy Steps!

Here is my quick and dirty paraphrasing of it. Meaning, do EXACTLY AS IT SAYS BELOW.

(more…)