Getting your Drupal to be pixel perfect is hard. In fact, it’s probably four times faster to write the logic of a page, in comparison to the time it takes to get it’s markup right. Not to talk about making it responsive.
If you’ve seen my presentation about The Gizra Way you noticed we take pixel perfect very seriously.
One of the tools that helps us getting the markup fast, correct and in a way that would allow us to communicate with the client is Jekyll - the static site generator. Here’s the idea in a nutshell:
We use a great yo generator to build a Jekyll directory in our installation profile (obviously each project in Gizra is built as an installation profile). Here’s an example of our Gruntfile.js. Note that if you are gonig to use Bootstrap, it still does’t come out of the box, so you’ll need to do some manual work to set it up.
Our team can now work on the markup. Once the markup changes we can
grunt deploy – and the markup will be pushed to Github pages, to facilitate all the stake holders to validate the design and responsiveness of the site.
Next, when the team will work on the Drupal site, instead of coping the CSS into the Drupal theme itself, we copy it into
libraries/custom (where “custom” could be your site’s name). This means your CSS is edited only in a single place, which is the Jekyll app. Since this is a repetitive task we have automated it with a simple bash script.
Last step - given our custom theme is under
profiles/[profile-name]/themes/custom/subtheme - is to load the “contrib” CSS via the theme’s info file:
stylesheets[all] = '../../../libraries/custom/css/main.css'
Finally, the developers can now enjoy working on a pixel perfect template where they only need to yank out the static parts and replace it with the dynamic content, so visually the site never looks broken, and logic is added to it incrementally.