On January 14, 2014, Emma hosted a webinar. Although the recording is not available, we hope you find this follow up FAQ useful as a companion to her learning series PSD to Theme
Q: You mentioned Susy for the Drupalize.Me project. Why did you choose this framework? Did you consider any others?
A: We had originally planned to use Zen Grids for our framework, but our designer had already mocked up his designs with Susy. It would have been too time consuming to rebuild the working prototype with a different framework, so we decided to take the easy path and just switch our theme to use Susy. Note: prototyping is GREAT! This doesn't mean that you must use only one framework from start to finish. I just mean for our time line and resources, it was more efficient to stick with the same framework as the HTML prototype.
Q: What is the best Sass framework? Zen Grids, Susy, Foundation, Bootstrap...
A: Every single framework has great qualities about it. You should choose the one which feels most natural to you and/or your support network knows and uses. (Having access to help is important!) If you're not sure where to start, I recommend picking a base theme first, and then learning how to use the framework which comes with that base theme. e.g. if you pick Zen, choose Zen Grids as your grid framework for rapid prototyping. Do your research and talk to your team. They may already have favorites.
Q: If you have multiple designers working on a site, wouldn't everyone need to be using Sass/Compass?
A: I recommend having a text-based style guide which is separate from your theme (ideally your style guide would be built from your theme's files; but the technology is not ready yet). If you are using Sass, everyone working on the project must commit to all editing ONLY the Sass files (not the Sass and CSS files). There are lots of helper tools you can use to make building CSS from Sass a lot easier. We have a video series on Sass. If you're thinking about adopting Sass I highly recommend you watch the Sass and Compass video tutorials. There are ways you can include CSS edits in your theme, but this ends up being a headache to maintain long term. You're better to invest the time in getting everyone using Sass / Compass rather than spend the time later refactoring CSS files. (Unless you love refactoring based on git diff...whatever floats your boat!)
Q: I've heard setting up compass is really complicated, so I've avoided it. Any tips?
A: It's not that hard, promise! We cover installation instructions in the Install Compass video. If you prefer a GUI, we cover that too! You can watch the Install Scout video.
Q: What was the name of your book?
A: Front End Drupal (covers Drupal 6). Drupal User's Guide (covers Drupal 7).
Q: If Photoshop isn't the best tool from design to front end, then what is?
A: Photoshop is the PERFECT tool for designers who think best with Photoshop. Some prefer pencil and paper to make their ideas....the IDEA CREATION tool is up to the designer. Photoshop is not always the best tool for mock-up approval with stakeholders as it does not allow you to prototype (or demonstrate) how components will behave in the context of one another. We liked working in components instead of pages. This way the designer could quickly mockup how a component looked in a specific context; rather than this is how an entire page worked at a width of 799pixels, 798 pixels, 797 pixels, 800 pixels, 801 pixels (you get the picture, right?). We need to think about the process though when choosing formats. Designers may do their best creative work in Photoshop, but then ... somehow ... we need to convert that to a theme. I think the best tool for this is a TEXT-based description of the components with screen shots (or little square images) of how that component looks in different contexts. i.e. how does this component look at each break point.
Q: Is LESS the same as Sass?
A: Basically, yes. Sass has some nifty math tricks which allow you to do math with different units (e.g. 20em - 12px). We have a video which discusses the differences of Sass vs LESS.
Q: I was working with LESS but got frustrated and abandoned it since adding classes in Drupal forms makes a lot of spaghetti code... Any idea how to improve whole process of making theme with SASS?
A: Components. Components. Components. Start with the Theming by Component video.
Q: Do you determine components through design or wireframes?
A: Yes. :-) Think of a component as a piece of furniture. It's anything you could pick up and move to a different location. Often there is a direct correlation with a Drupal site building technique: image style, view mode for a content type, a block, etc. You probably have a list of things you need to build for your client, which all get put into a wireframe and then a complete design. Maybe your complete design is an HTML prototype, maybe it's a static PSD file. There are LOTS of variables here, and not many hard rules. That's why I like to think of a component as "furniture" or "anything I can draw a box around" (as opposed to a wiggly shape). If you haven't already watched it, you'll want to watch the Theming by Component video.
Q: I love the idea of variables in css. how much time can i expect to begin using sass in Drupal as a novice themer who has never used it before?
A: The Sass and Compass learning series is about 2.5 hours. The PSD to Theme series is a little less than 3 hours. I think if you can spend a day watching these videos, you'll be ready!
Q: What theming changes are you most excited about in Drupal 8 and why?
A: CSS coding conventions and the massive theme system overhaul prompted by the Twig initiative. Don't get me wrong, Twig is pretty cool, but I'm most excited about the clean-up. I like things to be neat and tidy. :-)
Q: On a core Drupal 7 site, what are the basic steps to get Sass in place?
A: Sass and Drupal are somewhat independent. Drupal doesn't really speak Sass if everything is working correctly, it uses rendered Sass (aka CSS). The PSD to Theme series has information on creating CSS stub files, and layout rules. The series works best if you watch it in order, so you might want to start at the beginning and at least watch the first few minutes of the videos which come earlier to have things in context.
Q: So to come back on the base theme what makes you decide to use a base theme or build your own theme from scratch.
A: Base themes are such a hot topic! There are two VERY LONG answers to this. One is a presentation that I did at Munich (Evaluating Base Themes); the other is a Drupalize.Me podcast that I was a guest on. Short answer: it depends.
Q: So Using a base theme to start and then create your own theme using SMACSS and @extend base theme classes is a legitimate Drupal theming process?
A: Micah would say "yes"; Jesper would say "no". You can watch their DrupalCon presentations and decide for yourself. :-) Generally I agree with Jesper, but it does add an extra layer of headache going through and making Drupal do what you want...and it's a headache the client will rarely pay for.
Q: What did you use to make your presentation?
A: reveal.js. You can get the code for this exact presentation in our GitHub project.
Q: Any tips for talking down clients who are looking for every page to be designed in Photoshop and for the website to be the pixel-perfect representation of those PSD files?
A: Get to the root of their concern by using the "5 Whys", and maybe show them a picture like this:
(http://wcetblog.files.wordpress.com/2013/12/overwhelmed-by-devices-by-l…)
Q: How do you handle responsive elements from PSD to Drupal?
A: Conversation and pattern libraries. I talk more about pattern libraries in the Theming by Component video.
Q: Do you use automated tool to slice and export PSD files?
A: I never do anything automated with cutting up images. Ever. I extract the assets I want from my design files. You can watch my video for this process in the Extract Design Assets video.
Q: Should we buy the SMACSS book?
A: If you want to support the work Jonathan is doing, yes! If you just want the information, start with the free Drupal resources. The Drupal 8 CSS Coding Standards can be applied to Drupal 7 sites today.
Q: Can you recommend a Sass editor with syntax highlighting?
A: I use Sublime Text in the videos as we find it to be the most accessible, cross-platform text editor. I use Vim for my normal development work.
We hope you found the webinar, and this FAQ, useful and hope you'll consider becoming a member of Drupalize.Me so that you can take advantage of our extended videos on Sass and Compass, and PSD to Theme. Our pricing plans are appropriate for individuals and organizations. Click here for more details.