wip
This commit is contained in:
Oliver Davies
parent
d366b6d6d2
commit
b9e322a60e
|
|
@ -62,7 +62,8 @@ export default {
|
|||
|
||||
`src/components/Welcome.vue`:
|
||||
|
||||
```
|
||||
<div v-pre markdown="1">{% raw %}
|
||||
```vuejs
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-blue-dark">
|
||||
|
|
@ -93,7 +94,7 @@ export default {
|
|||
<div class="font-serif">
|
||||
<h1 class="font-normal">Welcome to {{ title }}</h1>
|
||||
<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 class="mt-10">
|
||||
|
|
@ -104,19 +105,22 @@ export default {
|
|||
</div>
|
||||
|
||||
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
|
||||
<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 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>
|
||||
|
||||
<div>
|
||||
<form action="#" class="flex">
|
||||
<input type="text" class="border border-solid border-grey p-2 w-full xl:w-auto">
|
||||
<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-light px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none" style="background-color: #f0f0f0">
|
||||
<img src="img/loupe.svg" class="block">
|
||||
</button>
|
||||
</form>
|
||||
<button type="submit" class="bg-grey-light px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none" style="background-color: #f0f0f0">
|
||||
<img src="img/loupe.svg" class="block">
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</drupal-block>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -144,12 +148,10 @@ export default {
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import DrupalBlock from './DrupalBlock.vue'
|
||||
import MainMenu from './MainMenu.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DrupalBlock,
|
||||
MainMenu,
|
||||
},
|
||||
|
||||
|
|
@ -161,44 +163,8 @@ export default {
|
|||
}
|
||||
}
|
||||
</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
|
||||
|
||||
|
|
|
|||
|
|
@ -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