Run prettier on all *.md files
```
prettier '{app,source}/**/**.md' --write
```
This commit is contained in:
parent
a3ceeaf0f3
commit
85a10c545b
170 changed files with 5127 additions and 2282 deletions
|
|
@ -1,57 +1,77 @@
|
|||
---
|
||||
title: Rebuilding Bartik (Drupal’s Default Theme) with Vue.js and Tailwind CSS - part 2
|
||||
title:
|
||||
Rebuilding Bartik (Drupal’s Default Theme) with Vue.js and Tailwind CSS - part
|
||||
2
|
||||
date: 2018-12-27
|
||||
excerpt: A follow-up to my original post on rebuilding Bartik with Tailwind and Vue.js.
|
||||
excerpt:
|
||||
A follow-up to my original post on rebuilding Bartik with Tailwind and Vue.js.
|
||||
tags:
|
||||
- drupal
|
||||
- tailwind-css
|
||||
- tweet
|
||||
- vuejs
|
||||
- drupal
|
||||
- tailwind-css
|
||||
- tweet
|
||||
- vuejs
|
||||
has_tweets: true
|
||||
---
|
||||
In [the original post](/blog/rebuilding-bartik-with-vuejs-tailwind-css) I detailed how I built [a clone of Drupal’s Bartik theme][netlify] with [Vue.js][vuejs] and [Tailwind CSS][tailwind]. This follow-up post details some updates that I’ve made to it since then.
|
||||
|
||||
In [the original post](/blog/rebuilding-bartik-with-vuejs-tailwind-css) I
|
||||
detailed how I built [a clone of Drupal’s Bartik theme][netlify] with
|
||||
[Vue.js][vuejs] and [Tailwind CSS][tailwind]. This follow-up post details some
|
||||
updates that I’ve made to it since then.
|
||||
|
||||
## Customising Tailwind’s colours
|
||||
|
||||
During the first version of the page, my thoughts were to not edit the Tailwind configuration, however I changed my mind on this whilst working on the subsequent updates and did make some changes and customisations to the `tailwind.js` file.
|
||||
During the first version of the page, my thoughts were to not edit the Tailwind
|
||||
configuration, however I changed my mind on this whilst working on the
|
||||
subsequent updates and did make some changes and customisations to the
|
||||
`tailwind.js` file.
|
||||
|
||||
By default, Tailwind includes a full colour palette including colours such as yellows, oranges, reds that weren’t being used in this page so they were removed. This makes the file more readable as well as reduces the number of classes that Tailwind generates.
|
||||
By default, Tailwind includes a full colour palette including colours such as
|
||||
yellows, oranges, reds that weren’t being used in this page so they were
|
||||
removed. This makes the file more readable as well as reduces the number of
|
||||
classes that Tailwind generates.
|
||||
|
||||
Whist I was changing the colours, I also took the opportunity to tweak the values of the remaining colours to more closely match Bartik’s original colours.
|
||||
Whist I was changing the colours, I also took the opportunity to tweak the
|
||||
values of the remaining colours to more closely match Bartik’s original colours.
|
||||
|
||||
I also added a `black-60` class which uses [RGBA](https://css-tricks.com/the-power-of-rgba) to provide a semi-transparent background. I used this when adding the [skip to main content link](#adding-the-skip-to-main-content-link).
|
||||
I also added a `black-60` class which uses
|
||||
[RGBA](https://css-tricks.com/the-power-of-rgba) to provide a semi-transparent
|
||||
background. I used this when adding the
|
||||
[skip to main content link](#adding-the-skip-to-main-content-link).
|
||||
|
||||
```js
|
||||
let colors = {
|
||||
'transparent': 'transparent',
|
||||
transparent: 'transparent',
|
||||
|
||||
'black': '#22292f',
|
||||
black: '#22292f',
|
||||
'grey-darkest': '#3d4852',
|
||||
'grey-dark': '#8795a1',
|
||||
'grey': '#b8c2cc',
|
||||
grey: '#b8c2cc',
|
||||
'grey-light': '#dae1e7',
|
||||
'grey-lighter': '#f0f0f0',
|
||||
'grey-lightest': '#F6F6F2',
|
||||
'white': '#ffffff',
|
||||
white: '#ffffff',
|
||||
|
||||
'black-60': 'rgba(0, 0, 0, .6)',
|
||||
|
||||
'blue-dark': '#2779bd',
|
||||
'blue': '#3490dc',
|
||||
blue: '#3490dc',
|
||||
'blue-light': '#bcdefa',
|
||||
|
||||
'green-dark': '#325E1C',
|
||||
'green': '#77B159',
|
||||
green: '#77B159',
|
||||
'green-light': '#CDE2C2',
|
||||
'green-lighter': '#F3FAEE',
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Adding default styling for links
|
||||
|
||||
In the first version, every link was individually styled which resulted in a lot of duplicate classes and a potential maintenance issue.
|
||||
In the first version, every link was individually styled which resulted in a lot
|
||||
of duplicate classes and a potential maintenance issue.
|
||||
|
||||
I added a `style` section within `Welcome.vue`, and added some default styling for links based on their location on the page - [extracting some Tailwind components](https://tailwindcss.com/docs/extracting-components).
|
||||
I added a `style` section within `Welcome.vue`, and added some default styling
|
||||
for links based on their location on the page -
|
||||
[extracting some Tailwind components](https://tailwindcss.com/docs/extracting-components).
|
||||
|
||||
<div v-pre markdown="1">{% verbatim %}
|
||||
```vuejs
|
||||
|
|
@ -75,11 +95,14 @@ I added a `style` section within `Welcome.vue`, and added some default styling f
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Within the `style` section, I’m able to use Tailwind’s custom `@apply` directive to inject it’s rules into more traditional CSS, rather than needing to add them onto every link.
|
||||
Within the `style` section, I’m able to use Tailwind’s custom `@apply` directive
|
||||
to inject it’s rules into more traditional CSS, rather than needing to add them
|
||||
onto every link.
|
||||
|
||||
```vuejs
|
||||
<style lang="sass">
|
||||
|
|
@ -105,11 +128,15 @@ Within the `style` section, I’m able to use Tailwind’s custom `@apply` direc
|
|||
@apply border-none
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endverbatim %}</div>
|
||||
|
||||
## Extracting a Vue component for Drupal blocks
|
||||
|
||||
As well as being able to extract re-usable components within Tailwind, the same can be done within Vue. As the page could potentially have multiple sidebar blocks, I extracted a `SidebarBlock` component which would act as a wrapper around the block’s contents.
|
||||
As well as being able to extract re-usable components within Tailwind, the same
|
||||
can be done within Vue. As the page could potentially have multiple sidebar
|
||||
blocks, I extracted a `SidebarBlock` component which would act as a wrapper
|
||||
around the block’s contents.
|
||||
|
||||
```vuejs
|
||||
// src/components/Sidebar.vue
|
||||
|
|
@ -121,9 +148,13 @@ As well as being able to extract re-usable components within Tailwind, the same
|
|||
</template>
|
||||
```
|
||||
|
||||
The component provides the wrapping div and the appropriate classes in a single easy-to-maintain location, and [uses a slot](https://vuejs.org/v2/guide/components-slots.html) as a placeholder for the main content.
|
||||
The component provides the wrapping div and the appropriate classes in a single
|
||||
easy-to-maintain location, and
|
||||
[uses a slot](https://vuejs.org/v2/guide/components-slots.html) as a placeholder
|
||||
for the main content.
|
||||
|
||||
That means that within `Welcome.vue`, the markup within the `sidebar-block` tags will be used as the block contents.
|
||||
That means that within `Welcome.vue`, the markup within the `sidebar-block` tags
|
||||
will be used as the block contents.
|
||||
|
||||
```html
|
||||
<sidebar-block>
|
||||
|
|
@ -133,19 +164,34 @@ That means that within `Welcome.vue`, the markup within the `sidebar-block` tags
|
|||
|
||||
## Adding the Skip to Main Content Link
|
||||
|
||||
One thing [that was missing](https://github.com/opdavies/rebuilding-bartik/issues/1) was the 'Skip to main content link'. This an accessibility feature that allows for users who are navigating the page using only a keyboard to bypass the navigation links and skip straight to the main content if they wish by clicking a link that is hidden and only visible whilst it’s focussed on.
|
||||
One thing
|
||||
[that was missing](https://github.com/opdavies/rebuilding-bartik/issues/1) was
|
||||
the 'Skip to main content link'. This an accessibility feature that allows for
|
||||
users who are navigating the page using only a keyboard to bypass the navigation
|
||||
links and skip straight to the main content if they wish by clicking a link that
|
||||
is hidden and only visible whilst it’s focussed on.
|
||||
|
||||
Here is the markup that I used, which is placed directly after the opening `<body>` tag.
|
||||
Here is the markup that I used, which is placed directly after the opening
|
||||
`<body>` tag.
|
||||
|
||||
```html
|
||||
<a href="#0" class="skip-link text-white bg-black-60 py-1 px-2 rounded-b-lg focus:no-underline focus:outline-none">
|
||||
<a
|
||||
href="#0"
|
||||
class="skip-link text-white bg-black-60 py-1 px-2 rounded-b-lg focus:no-underline focus:outline-none"
|
||||
>
|
||||
Skip to main content
|
||||
</a>
|
||||
```
|
||||
|
||||
I initially tried to implement the same feature on this website using [Tailwind’s visually hidden plugin](https://www.npmjs.com/package/tailwindcss-visuallyhidden) which also contains a `focussable` class, though I wasn’t able to style it the way that I needed. I created my own [Tailwind skip link plugin](https://www.npmjs.com/package/tailwindcss-skip-link) and moved the re-usable styling there.
|
||||
I initially tried to implement the same feature on this website using
|
||||
[Tailwind’s visually hidden plugin](https://www.npmjs.com/package/tailwindcss-visuallyhidden)
|
||||
which also contains a `focussable` class, though I wasn’t able to style it the
|
||||
way that I needed. I created my own
|
||||
[Tailwind skip link plugin](https://www.npmjs.com/package/tailwindcss-skip-link)
|
||||
and moved the re-usable styling there.
|
||||
|
||||
To enable the plugin, I needed to add it within the `plugins` section of my `tailwind.js` file:
|
||||
To enable the plugin, I needed to add it within the `plugins` section of my
|
||||
`tailwind.js` file:
|
||||
|
||||
```js
|
||||
plugins: [
|
||||
|
|
@ -154,7 +200,9 @@ plugins: [
|
|||
],
|
||||
```
|
||||
|
||||
I added only the page-specific styling classes to the link (as well as the `skip-link` class that the plugin requires) as well as my own focus state to the skip link that I did within the `style` section of `App.vue`.
|
||||
I added only the page-specific styling classes to the link (as well as the
|
||||
`skip-link` class that the plugin requires) as well as my own focus state to the
|
||||
skip link that I did within the `style` section of `App.vue`.
|
||||
|
||||
```vuejs
|
||||
<style lang="sass">
|
||||
|
|
@ -173,20 +221,35 @@ I added only the page-specific styling classes to the link (as well as the `skip
|
|||
|
||||
## Adding the DrupalMessage component
|
||||
|
||||
I also added a version of Drupal’s status message as another Vue component. This also uses a slot to include the message contents and accepts a [prop](https://vuejs.org/v2/guide/components-props.html) for the message type.
|
||||
I also added a version of Drupal’s status message as another Vue component. This
|
||||
also uses a slot to include the message contents and accepts a
|
||||
[prop](https://vuejs.org/v2/guide/components-props.html) for the message type.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
|
||||
<div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
|
||||
<svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
|
||||
<div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
|
||||
<div
|
||||
class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm"
|
||||
:class="classes"
|
||||
>
|
||||
<svg
|
||||
v-if="type == 'status'"
|
||||
class="fill-current w-4 h-4 text-green mr-3"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"
|
||||
/>
|
||||
</svg>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
The value of the `type` prop is then used within some computed properties to determine the type specific classes to add (e.g. green for success, and red for warning), as well as whether or not to include the checkmark SVG image.
|
||||
The value of the `type` prop is then used within some computed properties to
|
||||
determine the type specific classes to add (e.g. green for success, and red for
|
||||
warning), as well as whether or not to include the checkmark SVG image.
|
||||
|
||||
```js
|
||||
<script>
|
||||
|
|
@ -211,7 +274,11 @@ export default {
|
|||
}
|
||||
</script>
|
||||
```
|
||||
I did need to make one change to the `tailwind.js` file in order to change the border on links when they are hovered over - within `modules` I needed to enable the `borderStyle` module for hover and focus states in order for Tailwind to generate the additional classes.
|
||||
|
||||
I did need to make one change to the `tailwind.js` file in order to change the
|
||||
border on links when they are hovered over - within `modules` I needed to enable
|
||||
the `borderStyle` module for hover and focus states in order for Tailwind to
|
||||
generate the additional classes.
|
||||
|
||||
```js
|
||||
modules: {
|
||||
|
|
@ -221,23 +288,27 @@ modules: {
|
|||
}
|
||||
```
|
||||
|
||||
The message is included within the Welcome component by including the `<drupal-message />` element, though rather than importing it there, it’s registed as a global component so it would be available to any other components that could be added in the future.
|
||||
The message is included within the Welcome component by including the
|
||||
`<drupal-message />` element, though rather than importing it there, it’s
|
||||
registed as a global component so it would be available to any other components
|
||||
that could be added in the future.
|
||||
|
||||
This is done within `main.js`:
|
||||
|
||||
```js
|
||||
// ...
|
||||
|
||||
Vue.component('drupal-message', require('@/components/DrupalMessage').default)
|
||||
Vue.component('drupal-message', require('@/components/DrupalMessage').default);
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
}).$mount('#app');
|
||||
```
|
||||
|
||||
{.border}
|
||||
|
||||
__The updated version is [live on Netlify][netlify], and the [latest source code is available on GitHub][github].__
|
||||
**The updated version is [live on Netlify][netlify], and the [latest source code
|
||||
is available on GitHub][github].**
|
||||
|
||||
[github]: https://github.com/opdavies/rebuilding-bartik
|
||||
[netlify]: https://rebuilding-bartik.oliverdavies.uk
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue