Thank You
We appreciate your inquiry. We'll be in contact soon.
Showing 1641-1660 of 2334 results
PSD to Theme FAQ
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.
Risk and Drupal 8
Blog postEvery year Real Story Group (RSG) releases an updated snapshot of the web CMS market. Where will Drupal 8 be placed on the 2015 RSG snapshot?
Managing Your Membership
Blog postToday we finally completed the migration to our new billing service! It's been a long road, and I'll leave the gorey details for another post. The short of it is that we moved to Recurly and account management is now easier for our members.
Drupalize.Me Podcast Episode 33
Blog postThis week we have podcast episode 33. It's all about Global Sprint Days, coming up next weekend, on January 25-26, 2014. We talk about what sprints are, what's happening next weekend, and the why/how of getting involved. Go give it a listen, and then sign up for (or create) a local event!
Welcome, Amber and Joe!
Blog postOver the holidays, we welcomed Amber Himes and Joe Fender to the team. They hit the ground running and have already made substantial contributions. Drupalize.Me now has eight full-time staff, all of whom are working tirelessly to build and maintain the biggest and best Drupal training service on the planet!
Release Day: Finishing Our Theme
Blog postThis week we wrap up the new theme we've created in the PSD to Drupal Theme series by getting it installed and enabled on our site.
Everyone Can Try Drupal 8 Today
Blog postBack in June, I wrote up a little blog post with some tips for getting a developer environment setup. Recently, I've been working on a new learning series and set up Vagrant for local development. Both experiences left me thinking "Ugh!" It requires so much work just to start working! For a developer, this is time well spent. But not everyone who works with Drupal is a developer. In fact, the list of non-developers whom might want to peek at Drupal is longer than you might originally think. Sound familiar? Read on if you're interested in taking a peek at Drupal 8 without the setup overhead. I've got just the tool you've been looking for.
My Queue and Billing Updates
Blog postThis week we made 21 updates, most of which were small bug fixes. Here are three notable ones:
Release Day: Create a New Theme
Blog postThis week in our PSD to Theme series we are getting into the nitty-gritty and creating our new theme in Drupal. We start off by getting the .info file set up properly and then add our style guide stubs to work with.
More information
A theme is comprised of a collection of related files. Our completed theme will have CSS and PHP (with HTML fragments). To ensure all of these files are loaded, we need to tell Drupal where to find them, by listing the files in the theme's .info file. To begin working with our theme's info file we'll start with the only values which are required: name, version of Drupal core this theme can be applied to. We'll also add a few recommended pieces of information: description of the theme, the template engine, and a screen shot for easier selection of the theme from the administrative area. By the end of this lesson, you will be able to create an info file for a theme, and explore the relevant drupal.org handbook pages for more information on refining your theme's info file.
More information
Our main focus for the Domicile theme is restyling Drupal's markup with CSS. Although it is tempting to put all of your CSS into a single file, things can quickly grow out of control. In our theme we'll break our CSS into smaller stub files to make the theme easier to maintain using the file naming conventions for Drupal 8.By the end of this lesson you will be able to incorporate CSS files into your theme via the theme's .info file.
Additional resources
More information
Drupal uses a series of nested template files to build out the rendered HTML pages we see in our browser. The template file page.tpl.php holds markup between <body> and </body> tags. We talked about the nested nature of template files in Lesson 3: Theming by Component.
In this lesson we will:
- create the file page.tpl.php
- add the relevant markup, and CSS classes for our grid framework
- insert relevant PHP variables so that Drupal can render each of its page components.
By the end of this lesson you will be able to create, or adapt, a page.tpl.php file to suit the conventions you identified in your style guide.
More information
Designs often have a few elements which don't need to be easily edited and can essentially be "hard wired" into the template files. In our design there are three or four images which fall into this category. In this lesson we'll edit the page.tpl.php file to insert our design assets from Lesson 5: Extract Design Assets. By the end of this lesson you will know which variables can be used in a template file to ensure the correct directory is always used for hard-coded image files.
One of the Drupal 8 initiatives that really excites me is Web Services. Drupal has never been easy to work with as a web service, but all that is about to change! In this article I am going to explore what has been going on behind the scenes with RESTful Web Services in Drupal Core and attempt to implement some working examples. After reading, you will be able to create a new node on your site via the Drupal 8 Core REST API.
You're Back!
Blog postOur winter elves* have not taken a break and have continued to crank out improvements to the Drupalize.Me platform. This week's release includes fixes identified in over a dozen tickets. A few of our favorites are highlighted below.
A New Year
Blog postWelcome to 2014! We're delighted to see you on this side of the calendar.
More information
Technically a theme can be installed onto any Drupal site, but it never quite works this way in real life. In this lesson we'll create a playground so that we can try out our theme before deploying it to a live server. We'll start by installing Drupal and adding some “fake” content and menus with the devel generate module. For these tasks we'll use Drupal's default theme, Bartik. By the end of this lesson you will be able to install Drupal in an environment where a development version of the theme can be safely tested.
Additional resources
More information
One of the most time consuming things a content editor can be forced to do is resize images before creating their content. Fortunately we can get Drupal to do the resizing for us. It's not perfect—it's just a plain resize, but it's enough for most basic sites. By the end of this lesson, you will be able to configure Drupal to resize images to your specification when they are uploaded using the image field type.
More information
It's pretty typical for a site to have one or two pieces of content that need to be easily edited, but also aren't nodes. For example: text in the footer. There are a number of ways to create this content. We'll use blocks to create this content as this is the easiest way to place content into a specific region without additional helper module. By the end of this lesson you will be able to create custom blocks, and place them into specific regions within your Drupal theme.