Utilizing the power of Display Suite to make your Drupal sites more SMACSS-y

Drupal's default rendering isn't great. If you want a simple image field on a page it is going to wrap it in at least 4 divs, all with weird classes, so to style it you have to grab something like .field-field-main-blog-image > img which is not very SMACSS-y or DRY. If I was to write the HTML myself it'd just be <img class="full-image" src="/mycoolpic.png" /> then my CSS would be .full-image { width: 100%;} then I could throw that class on any image on my site I needed to be full width. So how would you accomplish this inside of Drupal, with Display Suite of course.

For our setup we're using you need Display Suite (enable extras), and field group. Once you have everything enabled if you go to the Manage Display on one of your nodes you'll need to scroll all the way to the bottom and you'll see a new option to choose a layout. From there you'll have a large dropdown of all the different layout options (some these even extend the default layouts). Different layouts will give you different regions, so you can make a 50/50 split or invent some new type of layout and organize your content that way.

Once you choose one of those either it will ajax save or you will need to manually save it yourself. Once you save you will see you have a lot more fields to play with, with more options per field too. Now on each field when you click the little gear you have a lot more options. The big one is your ability to "choose a field template". You can leave it at Drupal Default but then you're still going to get a lot of the default Drupal classes and markup. I generally stick with minimal or expert. When you choose expert, it strips everything out of the template and you manually set every element and class associated with that field.

Once you've done that to all your fields you've successfully chose a custom layout and cleaned up your markup for your display. But what happens when you need a super crazy layout that making a template for would be too annoying, well that's where Field Group comes in. On the bottom of all your fields, you'll see a new option "add new group", that lets you add a group of fields that you wrap in a div or whatever you'd like. Add the field, then you can drag all the fields you need in that group. Once you're all done with that it could possibly look like the one I've created below

So that's how you do it, once you have that setup it makes it easier to grab that display suite layout and throw it into a view, and put it anywhere on your site without having to redo any of your work to get the layout to look right on certain pages.