Merge branch 'update-post'
This commit is contained in:
Oliver Davies
commit
aa275be2af
|
|
@ -26,39 +26,7 @@
|
|||
</head>
|
||||
<body class="font-sans leading-normal">
|
||||
<div id="app" v-cloak>
|
||||
{% include 'layout/navbar' %}
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-grey-darkest md:flex -mx-4">
|
||||
<main class="md:w-2/3 lg:w-3/4 px-4 mb-8 lg:mb-0">
|
||||
{% block page_title %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content_wrapper %}
|
||||
{% block content %}{% endblock %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block sidebar_wrapper %}
|
||||
<div class="md:w-1/3 lg:w-1/4 px-4" role="complementary">
|
||||
{% block sidebar %}
|
||||
{% include 'badges' %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<footer class="border-t border-grey-light pt-4 mt-4">
|
||||
<p>
|
||||
© 2010-{{ 'now'|date('Y') }} {{ site.title }}.
|
||||
Built with <a class="link" href="https://sculpin.io">Sculpin</a> and <a class="link" href="https://tailwindcss.com">Tailwind CSS</a>.
|
||||
Hosted on <a class="link" href="https://www.netlify.com">Netlify</a>.
|
||||
</p>
|
||||
|
||||
{% include 'meetups' %}
|
||||
</footer>
|
||||
</div>
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% if site.google_analytics_tracking_id %}
|
||||
|
|
@ -1,5 +1,37 @@
|
|||
{% extends 'base' %}
|
||||
{% extends 'app' %}
|
||||
|
||||
{% block content_top %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
{% block body %}
|
||||
{% include 'layout/navbar' %}
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-grey-darkest md:flex -mx-4">
|
||||
<main class="md:w-2/3 lg:w-3/4 px-4 mb-8 lg:mb-0">
|
||||
{% block page_title %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content_wrapper %}
|
||||
{% block content %}{% endblock %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block sidebar_wrapper %}
|
||||
<div class="md:w-1/3 lg:w-1/4 px-4" role="complementary">
|
||||
{% block sidebar %}
|
||||
{% include 'badges' %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<footer class="border-t border-grey-light pt-4 mt-4">
|
||||
<p>
|
||||
© 2010-{{ 'now'|date('Y') }} {{ site.title }}.
|
||||
Built with <a class="link" href="https://sculpin.io">Sculpin</a> and <a class="link" href="https://tailwindcss.com">Tailwind CSS</a>.
|
||||
Hosted on <a class="link" href="https://www.netlify.com">Netlify</a>.
|
||||
</p>
|
||||
|
||||
{% include 'meetups' %}
|
||||
</footer>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
5
source/_layouts/page.html.twig
Normal file
5
source/_layouts/page.html.twig
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{% extends 'default' %}
|
||||
|
||||
{% block content_top %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
{% endblock %}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends 'base' %}
|
||||
{% extends 'page' %}
|
||||
|
||||
{% block page_title %}{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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`:
|
||||
|
||||
```
|
||||
<template>
|
||||
<div id="app">
|
||||
<Welcome title="Rebuilding Bartik"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Welcome from './components/Welcome.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
Welcome,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
@tailwind preflight
|
||||
@tailwind components
|
||||
@tailwind utilities
|
||||
</style>
|
||||
```
|
||||
|
||||
`src/components/Welcome.vue`:
|
||||
|
||||
<div v-pre markdown="1">{% raw %}
|
||||
```vuejs
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-blue-dark">
|
||||
<div class="py-4 text-white">
|
||||
<div id="header" class="container mx-auto px-4 relative">
|
||||
<div class="flex flex-col-reverse">
|
||||
<div class="flex items-center">
|
||||
<img src="img/logo.svg" alt="" class="mr-4">
|
||||
<div class="text-2xl">
|
||||
<a href="#0">{{ title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm flex justify-end">
|
||||
<a href="#0">Log in</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main-menu></main-menu>
|
||||
</div>
|
||||
|
||||
<div class="bg-white pt-3 pb-4 lg:pb-12">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col md:flex-row-reverse md:-mx-8 my-6">
|
||||
<div id="main" class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">
|
||||
<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="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">
|
||||
<a href="#0">
|
||||
<img src="img/feed.svg" alt="">
|
||||
</a>
|
||||
</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">
|
||||
<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">
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainMenu from './MainMenu.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MainMenu,
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
{% endraw %}</div>
|
||||
|
||||
## 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 %}<div v-pre markdown="1">
|
||||
```vuejs
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full p-3 block sm:hidden bg-blue-light text-sm text-grey-darker text-left focus:outline-none"
|
||||
@click="open = !open"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
{{ navText }} - Main navigation
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/hamburger.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="container mx-auto px-4 sm:block" :class="[ open ? 'block' : 'hidden' ]">
|
||||
<div class="mt-2 sm:mt-0">
|
||||
<nav class="flex flex-wrap pb-1 md:p-0 -mx-3 sm:-mx-0">
|
||||
<div
|
||||
class="px-1 sm:pl-0 mb-1 md:mb-0 inline-block w-full sm:w-1/3 md:w-auto"
|
||||
:key="link.title"
|
||||
v-for="(link, index) in links"
|
||||
>
|
||||
<a
|
||||
class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
|
||||
:class="[ index == activeTab ? 'bg-white' : 'bg-blue-light hover:bg-white' ]"
|
||||
:href="link.href"
|
||||
>
|
||||
{{ link.title }}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
activeTab: 0,
|
||||
open: false,
|
||||
links: [
|
||||
{
|
||||
title: 'Home',
|
||||
href: '#0',
|
||||
},
|
||||
{
|
||||
title: 'Drupal',
|
||||
href: 'https://www.drupal.org',
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
href: 'https://vuejs.org',
|
||||
},
|
||||
{
|
||||
title: 'Tailwind CSS',
|
||||
href: 'https://tailwindcss.com',
|
||||
},
|
||||
{
|
||||
title: 'View code on GitHub',
|
||||
href: 'https://github.com/opdavies/rebuilding-bartik',
|
||||
},
|
||||
{
|
||||
title: 'Read blog post',
|
||||
href: 'https://www.oliverdavies.uk/blog/rebuilding-bartik-with-vuejs-tailwind-css',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
navText: function () {
|
||||
return this.open ? 'Hide' : 'Show';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
</div>{% 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.
|
||||
|
|
|
|||
|
|
@ -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