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 %} -
- - -
+ {% 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 %} +
+ + +
{% 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 %} 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..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 @@ -33,6 +33,139 @@ 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`: + +
{% raw %} +```vuejs + + + +``` +{% endraw %}
+ ## 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 +190,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. 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