Skip to content

Instantly share code, notes, and snippets.

@ffmit

ffmit/bulma_starter.html

Created September 18, 2019 07:23
Show Gist options
  • Save ffmit/3a82b8d653465258a35fd1d20fa2cb47 to your computer and use it in GitHub Desktop.
Save ffmit/3a82b8d653465258a35fd1d20fa2cb47 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bulma_starter.html
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../resources/css/bulma.css">
<link rel="stylesheet" href="../../resources/css/custom.css">
<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
</head>
<body>
<!-- Columns -->
<div class="columns">
<div class="column is-half is-offset-one-quarter bggrey"
style="background-color: honeydew; border-color: indigo">
This column <b>is-half and has one quarter offset</b> and holds all elements.
<!-- Navbar element -->
<nav class="navbar is-transparent">
<div class="navbar-brand">
<a class="navbar-item" href="http://localhost:8080/PhpWebdriverProofOfConcept/resources/views/bulma_samples.html">
<i class="fab fa-adversal" style="font-size: 2em"></i>
</a>
<div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navbarExampleTransparentExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="https://bulma.io/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="https://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="https://bulma.io/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<!-- Main content Container -->
<div class="box" id="main_content">
<div class="box">
Here comes the box, holding the form.
<section class="section" style="border-color: red; border-style: solid;">
<h1 class="title">This is a Section</h1>
<h3 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're
currently reading
</h3>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">From</label>
</div>
<div class="field-body">
<div class="field">
<p class="control is-expanded has-icons-left">
<input class="input" type="text" placeholder="Name">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</p>
<p class="help">This is a help text</p>
</div>
<div class="field">
<p class="control is-expanded has-icons-left has-icons-right">
<input class="input" type="email" placeholder="Email" value="alex@smith.com">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
</p>
<p class="help">This is a help text</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label"></div>
<div class="field-body">
<div class="field is-expanded">
<div class="field has-addons">
<p class="control">
<a class="button is-static">
+44
</a>
</p>
<p class="control is-expanded">
<input class="input" type="tel" placeholder="Your phone number">
</p>
</div>
<p class="help">This is a help text</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Department</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select>
<option>Business development</option>
<option>Marketing</option>
<option>Sales</option>
</select>
</div>
<p class="help">This is a help text</p>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Already a member?</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<label class="radio">
<input type="radio" name="member">
Yes
</label>
<label class="radio">
<input type="radio" name="member">
No
</label>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Subject</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input is-danger" type="text"
placeholder="e.g. Partnership opportunity">
</div>
<p class="help is-danger">
This field is required
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Question</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<textarea class="textarea" placeholder="Explain how we can help you"></textarea>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<!-- Left empty for spacing -->
</div>
<div class="field-body">
<div class="field">
<div class="control">
<button class="button is-primary">
Send message
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer Container -->
<div class="container" id="footer">
<!-- Footer-->
<footer class="footer is-dark" style="background-color: lavender">
<div class="content has-text-centered">
<p>This is the footer area.</p>
<p>
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source
code is
licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA
4.0</a>.
</p>
</div>
</footer>
</div>
</div>
</div>
</div>
</body>
<!-- META -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment