opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Updated post

Browse source
This commit is contained in:
Oliver Davies 2018-12-05 21:30:18 +00:00
parent 8535573713
commit 4a140df2a6
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
View file

@ -17,6 +17,14 @@ Earlier this week, I built a clone of [Drupal][0]’s default theme, Bartik, wit
data_cards: true,
} %}
## Why build a Bartik clone?
I’m a big fan of utility based styling and Tailwind CSS in particular, I was and originally thinking of a way to more easily integrate Tailwind within Drupal - something like I’ve since done with the [Tailwind CSS starter kit theme][5]. Whilst thinking about that, I wondered about doing the opposite - rebuilding Drupal (or Bartik) with Tailwind.
Others including [Adam Wathan](https://adamwathan.me) (one of the creators of Tailwind CSS) have rebuilt existing UIs like Netlify, YouTube, Twitter, Coinbase and Transistor.fm with Tailwind as an opportunity for learning and also to demonstrate using Tailwind - this was my opportunity to do the same.
Whilst [Drupal itself has adoped React](https://dri.es/drupal-looking-to-adopt-react), I’ve personally been looking into Vue.js and have used it for some small personal projects, including some elements of the site. So I decided to use Vue for the interactive parts of my Bartik clone to create a fully functional clone rather than focussing only on the CSS.
## 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.
@ -51,7 +59,7 @@ I also moved the links into `data` too - each link is it’s own object with it'
## 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 whole task only 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
@ -67,3 +75,4 @@ The whole task took around two hours to complete, and although some of the colou
[2]: https://tailwindcss.com
[3]: https://github.com/opdavies/rebuilding-bartik
[4]: https://rebuilding-bartik.netlify.com
[5]: https://www.drupal.org/project/tailwindcss