wip
This commit is contained in:
Oliver Davies
parent
d366b6d6d2
commit
b9e322a60e
|
|
@ -62,7 +62,8 @@ export default {
|
||||||
|
|
||||||
`src/components/Welcome.vue`:
|
`src/components/Welcome.vue`:
|
||||||
|
|
||||||
```
|
<div v-pre markdown="1">{% raw %}
|
||||||
|
```vuejs
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="bg-blue-dark">
|
<div class="bg-blue-dark">
|
||||||
|
|
@ -93,7 +94,7 @@ export default {
|
||||||
<div class="font-serif">
|
<div class="font-serif">
|
||||||
<h1 class="font-normal">Welcome to {{ title }}</h1>
|
<h1 class="font-normal">Welcome to {{ title }}</h1>
|
||||||
<p>No front page content has been created yet.</p>
|
<p>No front page content has been created yet.</p>
|
||||||
<p>Follow the <a href="#0" class="">User Guide</a> to start building your site.</p>
|
<p>Follow the <a href="#0" class="text-blue-dark hover:text-blue no-underline border-b border-blue border-dotted hover:bg-solid">User Guide</a> to start building your site.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-10">
|
<div class="mt-10">
|
||||||
|
|
@ -104,7 +105,8 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
|
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
|
||||||
<drupal-block>
|
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
|
||||||
|
<div class="p-4" style="background-color: #f6f6f2">
|
||||||
<h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2>
|
<h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -116,7 +118,9 @@ export default {
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</drupal-block>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -144,12 +148,10 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DrupalBlock from './DrupalBlock.vue'
|
|
||||||
import MainMenu from './MainMenu.vue';
|
import MainMenu from './MainMenu.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
DrupalBlock,
|
|
||||||
MainMenu,
|
MainMenu,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -161,44 +163,8 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<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 border-dotted
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
@apply text-blue border-solid
|
|
||||||
|
|
||||||
#footer a
|
|
||||||
@apply text-white no-underline border-b border-dotted border-white
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
`src/components/DrupalBlock.vue`:
|
|
||||||
|
|
||||||
```
|
|
||||||
<template>
|
|
||||||
<div class="drupal-block">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
|
||||||
.drupal-block
|
|
||||||
@apply bg-grey-lightest p-4
|
|
||||||
|
|
||||||
&:not(:last-child)
|
|
||||||
@apply mb-4
|
|
||||||
</style>
|
|
||||||
```
|
```
|
||||||
|
{% endraw %}</div>
|
||||||
|
|
||||||
## Making it responsive
|
## Making it responsive
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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`:
|
||||||
|
|
||||||
|
<div v-pre markdown="1">{% raw %}
|
||||||
|
```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-grey-darkest 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>
|
||||||
|
```
|
||||||
|
|
||||||
|
```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 border-dotted
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus
|
||||||
|
@apply text-blue border-solid
|
||||||
|
|
||||||
|
#footer a
|
||||||
|
@apply text-white no-underline border-b border-dotted border-white
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus
|
||||||
|
@apply border-none
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
{% endraw %}</div>
|
||||||
|
|
||||||
|
## Extracting a Vue component for Drupal blocks
|
||||||
|
|
||||||
|
`src/components/DrupalBlock.vue`:
|
||||||
|
|
||||||
|
```vuejs
|
||||||
|
<template>
|
||||||
|
<div class="drupal-block">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
.drupal-block
|
||||||
|
@apply bg-grey-lightest p-4
|
||||||
|
|
||||||
|
&:not(:last-child)
|
||||||
|
@apply mb-4
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
`src/components/Welcome.vue`:
|
||||||
|
|
||||||
|
```vuejs
|
||||||
|
<drupal-block>
|
||||||
|
<h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<form action="#" class="flex">
|
||||||
|
<input type="text" class="border border-solid border-grey p-2 w-full xl:w-auto">
|
||||||
|
|
||||||
|
<button type="submit" class="bg-grey-lighter px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none">
|
||||||
|
<img src="img/loupe.svg" class="block">
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</drupal-block>
|
||||||
|
```
|
||||||
|
{% 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
|
||||||
Loading…
Reference in a new issue