Re-add old posts
This commit is contained in:
parent
1e0a05e330
commit
0401e039de
150 changed files with 11896 additions and 3 deletions
|
|
@ -0,0 +1,316 @@
|
|||
---
|
||||
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.
|
||||
tags:
|
||||
- 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.
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
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',
|
||||
|
||||
black: '#22292f',
|
||||
'grey-darkest': '#3d4852',
|
||||
'grey-dark': '#8795a1',
|
||||
grey: '#b8c2cc',
|
||||
'grey-light': '#dae1e7',
|
||||
'grey-lighter': '#f0f0f0',
|
||||
'grey-lightest': '#F6F6F2',
|
||||
white: '#ffffff',
|
||||
|
||||
'black-60': 'rgba(0, 0, 0, .6)',
|
||||
|
||||
'blue-dark': '#2779bd',
|
||||
blue: '#3490dc',
|
||||
'blue-light': '#bcdefa',
|
||||
|
||||
'green-dark': '#325E1C',
|
||||
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.
|
||||
|
||||
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
|
||||
<template>
|
||||
...
|
||||
|
||||
<div id="footer" class="text-xs text-white">
|
||||
<div class="container mx-auto px-4 pt-16 pb-4">
|
||||
<div class="border-t border-solid border-gray-900 pt-6 -mb-6">
|
||||
<div class="mb-6">
|
||||
<p><a href="#0">Contact</a></p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<p>
|
||||
A clone of <a href="https://www.drupal.org">Drupal</a>’s default theme (Bartik).
|
||||
Built by <a href="https://www.oliverdavies.uk">Oliver Davies</a>
|
||||
using <a href="https://vuejs.org">Vue.js</a>
|
||||
and <a href="https://tailwindcss.com">Tailwind CSS</a>.
|
||||
</p>
|
||||
</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.
|
||||
|
||||
```vuejs
|
||||
<style lang="sass">
|
||||
#header a
|
||||
@apply text-white no-underline
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
@apply underline
|
||||
|
||||
#main a
|
||||
@apply text-blue-dark no-underline border-b border-blue-600 border-dotted
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
@apply text-blue-600 border-solid
|
||||
|
||||
#footer a
|
||||
@apply text-white no-underline border-b border-dotted border-white
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
@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.
|
||||
|
||||
```vuejs
|
||||
// src/components/Sidebar.vue
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-200 p-4 mb-4">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</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.
|
||||
|
||||
That means that within `Welcome.vue`, the markup within the `sidebar-block` tags
|
||||
will be used as the block contents.
|
||||
|
||||
```html
|
||||
<sidebar-block>
|
||||
<p>My block contents.</p>
|
||||
</sidebar-block>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
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"
|
||||
>
|
||||
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.
|
||||
|
||||
To enable the plugin, I needed to add it within the `plugins` section of my
|
||||
`tailwind.js` file:
|
||||
|
||||
```js
|
||||
plugins: [
|
||||
require('tailwindcss/plugins/container')(),
|
||||
require('tailwindcss-skip-link')(),
|
||||
],
|
||||
```
|
||||
|
||||
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">
|
||||
@tailwind preflight
|
||||
@tailwind components
|
||||
|
||||
.skip-link:focus
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
|
||||
@tailwind utilities
|
||||
</style>
|
||||
```
|
||||
|
||||
{.border}
|
||||
|
||||
## 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.
|
||||
|
||||
```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>
|
||||
<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.
|
||||
|
||||
```js
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes: function () {
|
||||
return {
|
||||
status: 'border-green-light text-green-dark bg-green-lighter',
|
||||
}[this.type]
|
||||
},
|
||||
|
||||
wrapperClasses: function () {
|
||||
return {
|
||||
status: 'bg-green',
|
||||
}[this.type]
|
||||
},
|
||||
}
|
||||
}
|
||||
</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.
|
||||
|
||||
```js
|
||||
modules: {
|
||||
// ...
|
||||
borderStyle: ['responsive', 'hover', 'focus'],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
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);
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app');
|
||||
```
|
||||
|
||||
{.border}
|
||||
|
||||
**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
|
||||
[tailwind]: https://tailwindcss.com
|
||||
[vuejs]: https://vuejs.org
|
||||
Loading…
Add table
Add a link
Reference in a new issue