Skip to content

Instantly share code, notes, and snippets.

@sethdavis512

sethdavis512/bulma-vue-single-file.html

Last active August 4, 2017 17:42
Show Gist options
  • Save sethdavis512/9fb21573b0c8037bd5904d31252ba9d7 to your computer and use it in GitHub Desktop.
Save sethdavis512/9fb21573b0c8037bd5904d31252ba9d7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bulma-vue-single-file.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<script src="https://unpkg.com/vue"></script>
<style>
html, body {
font-family: 'Montserrat', 'Helvetica', sans-serif;
background-color: #4d4d4d;
}
.card {
background-color: #4d4d4d;
color: white;
}
.card h1, .card h2, .card h3 {
color: white;
}
.hero h1, .hero h2, .hero h3 {
text-shadow: 0 2px 5px #808080;
}
.bg-fixed {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bg-fixed.family {
background-image: url('http://res.cloudinary.com/setholito/image/upload/v1470969181/brody/spring-2016/IMG_7208.jpg');
}
.bg-fixed.computer {
background-image: url('http://res.cloudinary.com/setholito/image/upload/v1476838307/portfolio/packery-4.jpg');
}
.bg-fixed.business {
background-image: url('http://res.cloudinary.com/setholito/image/upload/v1476838372/portfolio/the-copy-bean-branding-mood-board-2.jpg');
}
i.fa {
font-size: 3em;
}
</style>
</head>
<body>
<div id="app">
<hero title="My Site" subtitle="www.sethdavisdesign.com" hero-img-class="family" centered-text="true"></hero>
<section class="section">
<div class="columns">
<div class="column is-6">
<card
v-for="(card, idx) in 3"
:title="'Title ' + (idx + 1)"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam error quisquam reprehenderit sunt ab itaque sapiente nesciunt, quidem, obcaecati inventore eveniet neque aspernatur."
key="idx">
</card>
</div>
<div class="column is-6">
<card
v-for="(card, idx) in 3"
:title="'Title ' + (idx + 1)"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam error quisquam reprehenderit sunt ab itaque sapiente nesciunt, quidem, obcaecati inventore eveniet neque aspernatur."
key="idx">
</card>
</div>
</div>
</section>
<hero title="My Site" subtitle="www.sethdavisdesign.com" hero-img-class="computer"></hero>
<section class="section">
<div class="columns">
<div class="column is-6">
<card
v-for="(card, idx) in 3"
:title="'Title ' + (idx + 1)"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam error quisquam reprehenderit sunt ab itaque sapiente nesciunt, quidem, obcaecati inventore eveniet neque aspernatur."
key="idx">
</card>
</div>
<div class="column is-6">
<card
v-for="(card, idx) in 3"
:title="'Title ' + (idx + 1)"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam error quisquam reprehenderit sunt ab itaque sapiente nesciunt, quidem, obcaecati inventore eveniet neque aspernatur."
key="idx">
</card>
</div>
</div>
</section>
<hero title="Stuff" subtitle="More stuff" hero-img-class="business"></hero>
</div>
<script type="text/x-template" id="heroTemplate">
<section class="hero is-primary is-fullheight bg-fixed" :class="heroImgClass">
<div class="hero-body">
<div v-show="centeredText" class="container has-text-centered">
<i class="fa fa-bicycle"></i>
<h1 class="title is-1">
{{ title }}
</h1>
<h2 class="subtitle is-2">
{{ subtitle }}
</h2>
</div>
</div>
</section>
</script>
<script type="text/x-template" id="cardTemplate">
<div class="card">
<div class="card-content">
<h3 class="title is-3">
{{ title }}
</h3>
<p>
{{ text }}
</p>
</div>
</div>
</script>
<script>
Vue.component('hero', {
props: ['title', 'subtitle', 'heroImgClass', 'centeredText'],
template: '#heroTemplate'
})
Vue.component('card', {
props: ['title', 'text'],
template: '#cardTemplate'
})
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment