I have a deisgn made by a designer. He also created the html/css which looks realy nice.

Now I have to incorporate this in Drupal, such that the Drupel mechanisms (menu's, breadcrumb, content stored in nodes etc.) are incorporated. How do I start with this? Should I take a standard Drupal theme? Do I put Drupal theme parts in the design or do I put design parts in the Drupal theme? How should I approach this? Any directions are welcome!

I use Drupal 8.

Comments

VM’s picture

I'd forensically research and study and already existing theme in core to better understand how Drupal themes work. You will then need to take the html / css design and turn it into a drupal theme.

https://www.drupal.org/docs/8/theming

That said, if the theme you had designed for you isn't a responsive theme, then I highly suggest utilizing a base theme such as bootstrap, zen, etc. and rebuilding the theme to be responsive using a subtheme.

Jeff Burnz’s picture

Should I take a standard Drupal theme?

Really no such thing, unless you mean Classy or Stark, Classy is a base theme, Stark is really a stater theme and very raw.

Do I put Drupal theme parts in the design or do I put design parts in the Drupal theme? How should I approach this?

Depends how you want to theme and the requirements of the project - I can't answer this with any certainty, both are legitimate. But, understand this:

1) Drupal into theme - be prepared for potentially a lot of template level work to re-write templates to fit the CSS. So all your work is going to be changing templates and working in preprocess.

For example take the notion of a "post", in Drupal this is a "node", and for nodes we have node.html.twig. You will need to rewrite node.html.twig in your theme to match your HTML themes markup and classes. Sounds easy right? However - nodes are collections of fields (and non-field stuff like the title, title_prefix, links etc) - the big one here is fields - do they match your HTML themes notions? Probably not, maybe it doesn't matter, maybe it does - depends on how you build the site and the existing HTML design.

2) Theme into Drupal - here you would do very much less template level work, maybe adding classes and occasional markup. The real work here is porting the CSS to Drupal's existing markup.

Frankly in all my years doing this I find 2) Theme into Drupal easier. However, D8 is much easier than past versions (D6/D7) to achieve "Drupal into theme", but on a balance, I would not do this for one very simple reason: modules might rely on classes and markup that you inadvertently remove during that process. And you won't know about it, you'll just WFT why is Views broken all of a sudden?

One last piece of advice, if base theme fan boys start telling you to use a particular base theme because it's the "best", ignore them (it's bullshit - they're all very good and have different use cases), with one MAJOR exception - Bootstrap and Foundation, and in fact any bases theme that implements an external framework like Bootstrap. Simple reason is if your existing HTML design uses Bootstrap, then choice of base theme is a no brainer - use the Drupal Bootstrap theme, same for Zurb Foundation, Neat and Bourbon etc etc.

Note that Bootstrap is for the most part a "Drupal into theme" approach, meaning you inject the Bootstrap classes into the markup, well, its kind of a mixture of the two approaches to be frank.

Jeff Burnz’s picture

I would add I am only scratching the surface here - and you have to account for your skill level and the expectations of the client. To be honest most people, new themers and even many old ones have literally no idea how hard building front end is these days (to support mobile and one million different devices etc etc).

When you use something like Adaptivetheme it's taking care of a thousand things you never even knew you needed, unless you're a front end developer with years of experience.

I would post the design and let us look at it (if possible), so we can see the level of work required, even link to the html prototype.

basby’s picture

Hi Jeff, I sent you a PM.

Jeff Burnz’s picture

basby’s picture

I used the contact form on drupal.org. I will send it now via your website.

basby’s picture

Thanks VM and Jeff for the explanation.