70 lines
4.5 KiB
Markdown
70 lines
4.5 KiB
Markdown
|
---
|
|||
|
|
title: Rebuilding Bartik (Drupal’s Default Theme) with Vue.js and Tailwind CSS
|
|||
|
|
tags:
|
|||
|
|
- drupal
|
|||
|
|
- tailwind-css
|
|||
|
|
- tweet
|
|||
|
|
- vuejs
|
|||
|
|
has_tweets: true
|
|||
|
|
---
|
|||
|
|
{% block excerpt %}
|
|||
|
|
Earlier this week, I built a clone of [Drupal][0]’s default theme, Bartik, with [Vue.js][1] and [Tailwind CSS][2]. You can [view the code on GitHub][3] and the [site itself on Netlify][4].
|
|||
|
|
{% endblock %}
|
|||
|
|
|
|||
|
|
{% block content %}
|
|||
|
|
{% include 'tweet' with {
|
|||
|
|
content: '<p lang="en" dir="ltr">I built a clone of Bartik, <a href="https://twitter.com/hashtag/Drupal?src=hash&ref_src=twsrc%5Etfw">#Drupal</a>'s default theme, with <a href="https://twitter.com/vuejs?ref_src=twsrc%5Etfw">@vuejs</a> and <a href="https://twitter.com/tailwindcss?ref_src=twsrc%5Etfw">@tailwindcss</a>. See the result at <a href="https://t.co/nPsTt2cawL">https://t.co/nPsTt2cawL</a>, and the code at <a href="https://t.co/Dn8eysV4gf">https://t.co/Dn8eysV4gf</a>.<br><br>Blog post coming soon... <a href="https://t.co/7BgqjmkCX0">pic.twitter.com/7BgqjmkCX0</a></p>— Oliver Davies (@opdavies) <a href="https://twitter.com/opdavies/status/1064906717392191488?ref_src=twsrc%5Etfw">November 20, 2018</a>',
|
|||
|
|
data_cards: true,
|
|||
|
|
} %}
|
|||
|
|
|
|||
|
|
## Building a static template with Tailwind
|
|||
|
|
|
|||
|
|
The first stage was to build the desktop version, which was done as a simple HTML file with Tailwind CSS pulled in from it’s CDN. This stage took just over an hour to complete.
|
|||
|
|
|
|||
|
|
As Tailwind was added via a CDN, there was no opportunity to customise it’s configuration, so I needed to use to Tailwind’s default configuration for colours, padding, spacing, fonts, breakpoints etc. The page is built entirely with classes provided by Tailwind and uses no custom CSS, except for one inline style that is used to add the background colour for the Search block, as there wasn’t a suitable Tailwind option.
|
|||
|
|
|
|||
|
|
When I decided that I was going to later add some interactivity onto the mobile navigation menu, the existing code was ported into a new Vue.js application generated by the Vue CLI, with the majority of the markup within a `Welcome` component. This meant that Tailwind was also added as a dependency with it’s own configuration file, though although I had the opportunity to customise it I decided not to and made no changes to it and continued with the default values.
|
|||
|
|
|
|||
|
|
## Making it responsive
|
|||
|
|
|
|||
|
|
The second stage began with making the existing desktop version responsive - particularly making the navigation menu behave and appear differently on mobile and tablet screens, and stacking the main content area and the sidebar on mobile screens. This was all achieved using Tailwind’s responsive variants.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<div class="bg-white pt-3 pb-4 lg:pb-12">
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
In this example, the `pb-4` class adds 1rem of bottom padding to the element by default, then increases it to 3rem at large screen sizes due to the `lg:pb-12` class.
|
|||
|
|
|
|||
|
|
## Adding interactivity
|
|||
|
|
|
|||
|
|
This is how the main navigation menu works on mobile:
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
The show and hide text appears next to a hamburger menu, and clicking it toggles the visiblity of the menu links which are stacked below, as well as the wording of the text itself.
|
|||
|
|
|
|||
|
|
The code for this was moved into a separate `MainMenu` component, which means that it was easier to have dedicated data properties for whether the menu was open or not, as well as computed properties for building the show/hide text. The `open` value can then be used to apply the appropriate classes to the main menu to toggle it.
|
|||
|
|
|
|||
|
|
I also moved the links into `data` too - each link is it’s own object with it's `title` and `href` values. This means that I can use a `v-for` directive to loop over the data items and inject dynamic values, removing the duplication of markup which makes the component easier to read and maintain.
|
|||
|
|
|
|||
|
|
## The result
|
|||
|
|
|
|||
|
|
The whole task took around two hours to complete, and although some of the colours and spacings are slightly different due to the decision to stick with the default Tailwind configuration values, I’m happy with the result.
|
|||
|
|
|
|||
|
|
### The original version
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### The Vue.js and Tailwind CSS version
|
|||
|
|
|
|||
|
|
|
|||
|
|
{% endblock %}
|
|||
|
|
|
|||
|
|
[0]: https://www.drupal.org
|
|||
|
|
[1]: https://vuejs.org
|
|||
|
|
[2]: https://tailwindcss.com
|
|||
|
|
[3]: https://github.com/opdavies/rebuilding-bartik
|
|||
|
|
[4]: https://rebuilding-bartik.netlify.com
|