Created
June 17, 2023 09:34
-
-
Save ixkipe/909eb9fdd65ecc654357c963dca7b31c to your computer and use it in GitHub Desktop.
A webpage for viewing Bulma components that makes use of its colors, font etc.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="purplebulma.min.css"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
<title>BULBA</title> | |
</head> | |
<body> | |
<nav class="navbar is-primary" role="navigation" aria-label="main navigation"> | |
<div class="navbar-brand"> | |
<a class="navbar-item" href="#"> | |
<p class="is-size-5">My Website</p> | |
</a> | |
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> | |
<span aria-hidden="true"></span> | |
<span aria-hidden="true"></span> | |
<span aria-hidden="true"></span> | |
</a> | |
</div> | |
<div id="navbarBasicExample" class="navbar-menu"> | |
<div class="navbar-start"> | |
<a class="navbar-item"> | |
Home | |
</a> | |
<a class="navbar-item"> | |
Documentation | |
</a> | |
<div class="navbar-item has-dropdown is-hoverable"> | |
<a class="navbar-link"> | |
More | |
</a> | |
<div class="navbar-dropdown"> | |
<a class="navbar-item"> | |
About | |
</a> | |
<a class="navbar-item"> | |
Jobs | |
</a> | |
<a class="navbar-item"> | |
Contact | |
</a> | |
<hr class="navbar-divider"> | |
<a class="navbar-item"> | |
Report an issue | |
</a> | |
</div> | |
</div> | |
</div> | |
<div class="navbar-end"> | |
<div class="navbar-item"> | |
<div class="buttons"> | |
<a class="button is-primary"> | |
<strong>Sign up</strong> | |
</a> | |
<a class="button is-light"> | |
Log in | |
</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</nav> | |
<section class="section has-background-success-light"> | |
<div class="container"> | |
<div class="buttons"> | |
<button class="button is-primary">Primary</button> | |
<button class="button is-link">Link</button> | |
</div> | |
<div class="buttons"> | |
<button class="button is-info">Info</button> | |
<button class="button is-success">Success</button> | |
<button class="button is-warning">Warning</button> | |
<button class="button is-danger">Danger</button> | |
</div> | |
<div class="tags"> | |
<span class="tag is-black">Black</span> | |
<span class="tag is-dark">Dark</span> | |
<span class="tag is-light">Light</span> | |
<span class="tag is-white">White</span> | |
<span class="tag is-primary">Primary</span> | |
<span class="tag is-link">Link</span> | |
<span class="tag is-info">Info</span> | |
<span class="tag is-success">Success</span> | |
<span class="tag is-warning">Warning</span> | |
<span class="tag is-danger">Danger</span> | |
</div> | |
<div class="columns is-centered"> | |
<div class="column is-half"> | |
<div class="card block"> | |
<div class="card-image"> | |
<figure class="image is-4by3"> | |
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> | |
</figure> | |
</div> | |
<div class="card-content"> | |
<div class="media"> | |
<div class="media-left"> | |
<figure class="image is-48x48"> | |
<img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image"> | |
</figure> | |
</div> | |
<div class="media-content"> | |
<p class="title is-4">John Smith</p> | |
<p class="subtitle is-6">@johnsmith</p> | |
</div> | |
</div> | |
<div class="content"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
Phasellus nec iaculis mauris. <a>@bulmaio</a>. | |
<a href="#">#css</a> <a href="#">#responsive</a> | |
<br> | |
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="column is-half"> | |
<div class="card"> | |
<header class="card-header"> | |
<p class="card-header-title"> | |
Component | |
</p> | |
<button class="card-header-icon" aria-label="more options"> | |
<span class="icon"> | |
<i class="fas fa-angle-down" aria-hidden="true"></i> | |
</span> | |
</button> | |
</header> | |
<div class="card-content"> | |
<div class="content"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. | |
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a> | |
<br> | |
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> | |
</div> | |
</div> | |
<footer class="card-footer"> | |
<a href="#" class="card-footer-item">Save</a> | |
<a href="#" class="card-footer-item">Edit</a> | |
<a href="#" class="card-footer-item">Delete</a> | |
</footer> | |
</div> | |
</div> | |
</div> | |
<article class="message is-primary block"> | |
<div class="message-body"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. | |
</div> | |
</article> | |
<article class="message is-link"> | |
<div class="message-body"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. | |
</div> | |
</article> | |
<article class="message is-success"> | |
<div class="message-body"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. | |
</div> | |
</article> | |
<article class="message is-info"> | |
<div class="message-body"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. | |
</div> | |
</article> | |
<article class="message is-warning"> | |
<div class="message-body"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. | |
</div> | |
</article> | |
<article class="message is-danger"> | |
<div class="message-body"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. | |
</div> | |
</article> | |
<div class="block"> | |
<div class="field"> | |
<label class="label">Name</label> | |
<div class="control"> | |
<input class="input" type="text" placeholder="Text input"> | |
</div> | |
</div> | |
<div class="field"> | |
<label class="label">Username</label> | |
<div class="control has-icons-left has-icons-right"> | |
<input class="input is-success" type="text" placeholder="Text input" value="bulma"> | |
<span class="icon is-small is-left"> | |
<i class="fas fa-user"></i> | |
</span> | |
<span class="icon is-small is-right"> | |
<i class="fas fa-check"></i> | |
</span> | |
</div> | |
<p class="help is-success">This username is available</p> | |
</div> | |
<div class="field"> | |
<label class="label">Email</label> | |
<div class="control has-icons-left has-icons-right"> | |
<input class="input is-danger" type="email" placeholder="Email input" value="hello@"> | |
<span class="icon is-small is-left"> | |
<i class="fas fa-envelope"></i> | |
</span> | |
<span class="icon is-small is-right"> | |
<i class="fas fa-exclamation-triangle"></i> | |
</span> | |
</div> | |
<p class="help is-danger">This email is invalid</p> | |
</div> | |
<div class="field"> | |
<label class="label">Subject</label> | |
<div class="control"> | |
<div class="select"> | |
<select> | |
<option>Select dropdown</option> | |
<option>With options</option> | |
</select> | |
</div> | |
</div> | |
</div> | |
<div class="field"> | |
<label class="label">Message</label> | |
<div class="control"> | |
<textarea class="textarea" placeholder="Textarea"></textarea> | |
</div> | |
</div> | |
<div class="field"> | |
<div class="control"> | |
<label class="checkbox"> | |
<input type="checkbox"> | |
I agree to the <a href="#">terms and conditions</a> | |
</label> | |
</div> | |
</div> | |
<div class="field"> | |
<div class="control"> | |
<label class="radio"> | |
<input type="radio" name="question"> | |
Yes | |
</label> | |
<label class="radio"> | |
<input type="radio" name="question"> | |
No | |
</label> | |
</div> | |
</div> | |
<div class="field is-grouped"> | |
<div class="control"> | |
<button class="button is-link">Submit</button> | |
</div> | |
<div class="control"> | |
<button class="button is-link is-light">Cancel</button> | |
</div> | |
</div> | |
</div> | |
<div class="columns is-centered"> | |
<div class="column is-half"> | |
<article class="media"> | |
<figure class="media-left"> | |
<p class="image is-64x64"> | |
<img src="https://bulma.io/images/placeholders/128x128.png"> | |
</p> | |
</figure> | |
<div class="media-content"> | |
<div class="content"> | |
<p> | |
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small> | |
<br> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. | |
</p> | |
</div> | |
<nav class="level is-mobile"> | |
<div class="level-left"> | |
<a class="level-item"> | |
<span class="icon is-small"><i class="fas fa-reply"></i></span> | |
</a> | |
<a class="level-item"> | |
<span class="icon is-small"><i class="fas fa-retweet"></i></span> | |
</a> | |
<a class="level-item"> | |
<span class="icon is-small"><i class="fas fa-heart"></i></span> | |
</a> | |
</div> | |
</nav> | |
</div> | |
<div class="media-right"> | |
<button class="delete"></button> | |
</div> | |
</article> | |
</div> | |
<div class="column is-half"> | |
<article class="media"> | |
<figure class="media-left"> | |
<p class="image is-64x64"> | |
<img src="https://bulma.io/images/placeholders/128x128.png"> | |
</p> | |
</figure> | |
<div class="media-content"> | |
<div class="field"> | |
<p class="control"> | |
<textarea class="textarea" placeholder="Add a comment..."></textarea> | |
</p> | |
</div> | |
<nav class="level"> | |
<div class="level-left"> | |
<div class="level-item"> | |
<a class="button is-info">Submit</a> | |
</div> | |
</div> | |
<div class="level-right"> | |
<div class="level-item"> | |
<label class="checkbox"> | |
<input type="checkbox"> Press enter to submit | |
</label> | |
</div> | |
</div> | |
</nav> | |
</div> | |
</article> | |
</div> | |
</div> | |
</div> | |
</section> | |
<script> | |
document.addEventListener('DOMContentLoaded', () => { | |
// Get all "navbar-burger" elements | |
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 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> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment