So far the actual web site doesn’t look much at all like our Photoshop design. In this screencast we dig into doing just that, starting at the top with our header and logo area. It feels good to have a bit of a “real” start on building the site visually.
We use Frank DeLoupe as a color picker, which is nicely integrated with Photoshop (it makes the color you pick the active color in Photoshop, as well as copied to your clipboard).
At one point we change the Sass/Compass config to compile the CSS as :expanded instead of :compressed to see the actual CSS being generated for debugging reasons.
We have to use our brains a bit regarding how things will be placed and react to the fluid nature of a browser window. For instance, the log should always touch the upper left corner.
We do an awful lot of nudging around values to get things just right, as well as adding little details here and there to make things look better, like adding slight shadows to the paper stack effect.
Best video yet! Lovin’ the SASS techniques
The best way to use Frank DeLoupe is to setup a hotkey for your color picker instead of selecting it from the menu each and every time with your mouse ( under preferences). I use (
option f) for Mac where ‘f’ is for Frank…Duh!Also, using color variables in Sass can be used more efficiently by describing them based on their placement or usage in the design. For example, instead of calling the background of the page as
$grayit would be smarter to say $pageBG. By using this approach, the color is not tied down to the actual color variable -just in case you don’t want gray down the road. If you were to change the background of the page wrap to white then $gray no longer makes sense.Yah I have a key command now, definitely the way to go in all things computerz. (Especially StarCraft II!)
Regarding color naming — your thinking is ideal and makes perfect sense, but sometimes I just do things the way my brain works instead of the best possible semantic approach. I find when I used names like page-bg or top-border-emphasis or stuff like that I can never remember what I called them and it makes development slower and more frustrating that it already is. $orange, and the like, in this design, just works for me.
I was wondering how to nest pseudo elements in Sass, I kept meaning to look it up but it kinda always got pushed to the side. Best video so far Chris!
None of these videos are working on my iPad. I hope you go into the CSS a bit more. I don’t use sass so trying to figure out the CSS from your sass is a bit dodgy.
can’t download video, it’s a ‘download.htm’
nevermind, I am a ‘fox’ not a bear. Ok, where is that link to upgrade?
Oh, and I wish I could edit my comments btw.
Regarding downloading, please refresh the page before clicking the download button. The secure links expire fairly quickly and refreshing seems to do the trick.
At your Fox level, you can still download the videos, just not the accompanying files.
If you’d still like to upgrade, contact me at [email protected] and I’ll give you the rub.
I’m going to bury this comment in an attempt to keep comment threads about the content instead of technical issues.
haha I just wanted to scream variable the whole way until you realized that you hadn’t put in the $ sign.
I was doing that same thing!!!
same here :D
Hey Chris!! Awesome work, not just on Redesign but also throwing in new STUFF that makes a lot of difference to our work-flow. Just one query, would it be possible for you to share final PSD file of the project.
Great video Chris. I especially love the issues repo on Git.
https://github.com/chriscoyier/CSS-Tricks-v10
I have experience a few problems with the video only to find out your are working on it. Great idea.
I am new to all of this and it may be a stupid question, but what syntax do you have sublime set to view the scss? I set it to css and set the color scheme to twilight but it isn’t showing up correctly.
I select “SASS” :: http://cl.ly/JQ9E
It *might* be an add on. Here’s one :: https://github.com/n00ge/sublime-text-haml-sass
Thank you Chris! I am in Windows, and I’m not sure if everything matches up perfectly.
I meant subtle differences in programs.
Add on works perfectly! Thanks again. For anyone new like myself in win7..
user/appdata/roaming/sublime text 2/packages
Paste the add on’s
Chris, I love how you’re smart about putting common elements into the `_bits.scss` file and all that.
In case you were wondering, Compass has a little section about best practices that talks about a lot of that same stuff, as well as a couple other items you touched on in there:
http://compass-style.org/help/tutorials/best_practices/
Nice for having a common starting point so all Compass projects have that same initial structure so people know where to look for variables and custom mixins, etc.
I, personally, also maintain my own version of normalize that I forked from someone who had already put a bunch of stuff into SASS for me, and it has a _base.scss with it that controls a lot of the starting typography and stuff. And it has all my little tweaks like your removing underline on links and border-box, etc. My own little boilerplate.
Hi Chris!
I wonder how do you measure things with that rectangle? Is it built in into Mac or is it an app or what?
Yep, on Mac you can press Command-Shift-4 and get a crosshairs in which to drag and take a screenshot. But it also tells you the dimensions of the area you are selecting which is often times just as useful.
But make sure if you’re doing it on a photoshop file that that photoshop is set to “actual” size. I’ve been zoomed in slightly so that I didn’t notice by the naked eye, but it messed up all my measurements.
That video was badass, Chris. Just downloaded Frank DeLoupe and CodeKit. These videos remind me of a conversation I had with my brother after the second set of Star Wars came and Lucas unveiled Yoda’s first actual on-screen, back-flipping CGI battle. I said, “They should teach Yoda in school.” My brother said, “They just did.”
Got the CSS-Tricks shirt in the mail yesterday too. Gracias!
This video is blowing my mind. Sass terrified me before this.
Great video, and some really useful comments / links from others. Cheers all!
Hey Chris, in photoshop you can actually use cmd+click to use auto select when you don’t have it turned on :)
Absolutely love watching your work. Reminds me so much of my thought process when building which helps a lot with wondering if I am doing it ‘the right way’ or not.
Thanks for the great presentation! I especially loved the new color picker. Using ColorSnapper until now and having to copy/paste the value to Photoshop was a massive time killer.
Hey,
First and foremost it’ll like to thank you. These videos have helped me a lot and I’m not even halfway through. Keep ’em coming!
I have a question.
I’ve notice that the text padding of my menu in FireFox is in a lower position than in Chrome, is there a way I can just tweak this just for FireFox? I don’t know If I explained myself correctly I’m new to coding.
Thanks!
Is it super noticeable and obviously wrong looking? There might be some other kind of problem going on that is causing it. Or it could be a browser bug, in which case the best bet is creating a reduced test case and reporting it. Absolutely last resort would be using a browser hack to target Firefox and adjust: http://browserhacks.com/
I’m probably a bit lat saying this and you probably have figured it out by now. To set your Default tab size in Sublime Text go to
Preferences–Settings Defaultand scroll down to around line 45 and change where it saystab-sizeto your preferred tab size and then save and close. There are other useful things in there to play with as well.Great tutorials Chris, thanks