From 661a4c6c969578687e6307fa98051bc937b62ef7 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 6 Dec 2018 02:25:26 +0000 Subject: [PATCH 1/3] wip --- ...building-bartik-with-vuejs-tailwind-css.md | 255 ++++++++++++++++++ 1 file changed, 255 insertions(+) diff --git a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md index 1c8125d8..5f427be6 100644 --- a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md +++ b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md @@ -33,6 +33,173 @@ As Tailwind was added via a CDN, there was no opportunity to customise it’s co 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. +`src/App.vue`: + +``` + + + + + +``` + +`src/components/Welcome.vue`: + +``` + + + + + +``` + +`src/components/DrupalBlock.vue`: + +``` + + + +``` + ## 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. @@ -57,6 +224,94 @@ The code for this was moved into a separate `MainMenu` component, which means th 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. +`src/components/MainMenu.vue`: + +{% raw %}
+```vuejs + + + +``` +
{% endraw %} + ## 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. From d366b6d6d28ddaf1b3c41bc3388631ff58dfcb24 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 6 Dec 2018 18:20:14 +0000 Subject: [PATCH 2/3] Re-organise layouts --- .../{base.html.twig => app.html.twig} | 34 +---------------- source/_layouts/default.html.twig | 38 +++++++++++++++++-- source/_layouts/page.html.twig | 5 +++ source/_layouts/post.html.twig | 2 +- 4 files changed, 42 insertions(+), 37 deletions(-) rename source/_layouts/{base.html.twig => app.html.twig} (54%) create mode 100644 source/_layouts/page.html.twig diff --git a/source/_layouts/base.html.twig b/source/_layouts/app.html.twig similarity index 54% rename from source/_layouts/base.html.twig rename to source/_layouts/app.html.twig index b0d13124..ce4579a0 100644 --- a/source/_layouts/base.html.twig +++ b/source/_layouts/app.html.twig @@ -26,39 +26,7 @@
- {% include 'layout/navbar' %} - -
-
-
- {% block page_title %} -

{{ page.title }}

- {% endblock %} - - {% block content_wrapper %} - {% block content %}{% endblock %} - {% endblock %} -
- - {% block sidebar_wrapper %} - - {% endblock %} -
- -
-

- © 2010-{{ 'now'|date('Y') }} {{ site.title }}. - Built with Sculpin and Tailwind CSS. - Hosted on Netlify. -

- - {% include 'meetups' %} -
-
+ {% block body %}{% endblock %}
{% if site.google_analytics_tracking_id %} diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig index 68173dd6..da552ab9 100644 --- a/source/_layouts/default.html.twig +++ b/source/_layouts/default.html.twig @@ -1,5 +1,37 @@ -{% extends 'base' %} +{% extends 'app' %} -{% block content_top %} -

{{ page.title }}

+{% block body %} + {% include 'layout/navbar' %} + +
+
+
+ {% block page_title %} +

{{ page.title }}

+ {% endblock %} + + {% block content_wrapper %} + {% block content %}{% endblock %} + {% endblock %} +
+ + {% block sidebar_wrapper %} + + {% endblock %} +
+ +
+

+ © 2010-{{ 'now'|date('Y') }} {{ site.title }}. + Built with Sculpin and Tailwind CSS. + Hosted on Netlify. +

+ + {% include 'meetups' %} +
+
{% endblock %} diff --git a/source/_layouts/page.html.twig b/source/_layouts/page.html.twig new file mode 100644 index 00000000..a60b03d2 --- /dev/null +++ b/source/_layouts/page.html.twig @@ -0,0 +1,5 @@ +{% extends 'default' %} + +{% block content_top %} +

{{ page.title }}

+{% endblock %} diff --git a/source/_layouts/post.html.twig b/source/_layouts/post.html.twig index 0a61456b..90f3d4a6 100644 --- a/source/_layouts/post.html.twig +++ b/source/_layouts/post.html.twig @@ -1,4 +1,4 @@ -{% extends 'base' %} +{% extends 'page' %} {% block page_title %}{% endblock %} From b9e322a60ef5984a216b2d45e539606c1dbdb4fa Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 11 Dec 2018 00:10:17 +0000 Subject: [PATCH 3/3] wip --- ...building-bartik-with-vuejs-tailwind-css.md | 68 +++------ ...g-bartik-with-vuejs-tailwind-css-part-2.md | 137 ++++++++++++++++++ 2 files changed, 154 insertions(+), 51 deletions(-) create mode 100644 source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md diff --git a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md index 5f427be6..e4002772 100644 --- a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md +++ b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md @@ -62,7 +62,8 @@ export default { `src/components/Welcome.vue`: -``` +
{% raw %} +```vuejs - - -``` - -`src/components/DrupalBlock.vue`: - -``` - - - ``` +{% endraw %}
## Making it responsive diff --git a/source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md b/source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md new file mode 100644 index 00000000..8e82de1b --- /dev/null +++ b/source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md @@ -0,0 +1,137 @@ +--- +title: Rebuilding Bartik (Drupal’s Default Theme) with Vue.js and Tailwind CSS - part 2 +tags: + - drupal + - tailwind-css + - tweet + - vuejs +has_tweets: true +draft: true +--- +{% block excerpt %} +In the [original post](/blog/rebuilding-bartik-with-vuejs-tailwind-css) I detailed how I built a clone of Drupal’s Bartik theme with [Vue.js][1] and [Tailwind CSS][2]. This post details some updates that I’ve made to it since then. +{% endblock %} + +{% block content %} +## Customising Tailwind + +```js +let colors = { + 'transparent': 'transparent', + + 'black': '#22292f', + 'grey-darkest': '#3d4852', + 'grey-dark': '#8795a1', + 'grey': '#b8c2cc', + 'grey-light': '#dae1e7', + 'grey-lighter': '#f0f0f0', + 'grey-lightest': '#F6F6F2', + 'white': '#ffffff', + + 'blue-dark': '#2779bd', + 'blue': '#3490dc', + 'blue-light': '#bcdefa', +} +``` + +## Extracting Tailwind components for link styling + +`src/components/Welcome.vue`: + +
{% raw %} +```vuejs + +``` + +```vuejs + +``` +{% endraw %}
+ +## Extracting a Vue component for Drupal blocks + +`src/components/DrupalBlock.vue`: + +```vuejs + + + +``` + +`src/components/Welcome.vue`: + +```vuejs + +

Search

+ +
+
+ + + +
+
+ +``` +{% 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 +[5]: https://www.drupal.org/project/tailwindcss