About Us
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nobis eum nemo reiciendis, fuga fugit. Hic quasi maiores recusandae.
Bulma
A sandbox document showcasing the bulma css framework. Icons used in this document originate from the font-awesome library.
Headings
All headings have the same size with Bulma.
Use classes like title or subtitle to
influence the font and size. Use classes like is-1,
is-2 to influence the size only.
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Content
Default-Paddings get removed by Bulma.
Add classes like content to change that.
You can use classes like is-small,
is-large etc. as well. If ou don't use a class
you get a 'normal' sized font.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, eaque!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, eaque!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, eaque!
Buttons
Button-Styles
Classes wich can be used are among others is-white,
is-dark, is-link, etc.
Button-Types
Here instead of a Button-Element an
anchor-Element is used. To set the type
of a button, there classes like is-primary,
is-info, etc.
Button-Sizes
The size of a button can be changed with classes
like is-small, is-large.
Button states
is-hovered and is-focused are
some of the states used here. The state disabled
is special insofar it does not start with 'is'. The loading
button does not display its text.
Images
Box
A box is basically a container with some additional styling
attributes. For example a radius and a shadow.
Hello Box
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ipsam rem enim.
Notifications
A notifcation has the purpose of alerting the user to
something. You can add a button to it, in this example a delete
button was added which adds a little delete button to the top-right
of the notification box. The notifications can be styled with is-warning, etc.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ipsam rem enim.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ipsam rem enim.
Tags
A tag is a tag-label. It has some default styling
but can be customized in various ways.
Normal
is-black is rounded
is-light
is-primary is large
with delete button
Messages
To emphasize the message class can be used. there
are related classes like message-header and
message-body which can be used to structure the message.
Navbar
This is a how a navigation bar with bulma can look like. To toggle the hamburger there is seom javascript necessary. At the moment the only breakpoint for the hamburger to appear/disappear looks to be at 1024px, which is a let down.
Sidebar
A side menu with nested links. These are probably not really usable for any mobile app.
Hero
A hero is kind of a large web banner. It often contains an image and text that should be the main focus of a page, section, etc.
Hero Title
Hero Subtitle
Hero Title
Hero Subtitle
Hero
A card is someting like a panel. It consists of a header, some content and a footer.
Some card title.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quas eum magnam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque, quasi! Aliquam ratione magnam velit cumque quo libero iure totam cupiditate exercitationem earum.
Pagination
Pagination to navigate through loads of content
Level
A multipurpose horizontal level. Can be used vor all kind of things.
Forms
A very simple form.
Tables
Classes used here to customize the tables are:
is-narowis-selected
is-stripedis-bordered.
| Name | Phone | |
|---|---|---|
| Bunk bunk | bunk@gmail.com | 555-Bunk |
| Freeman Freeman | Freeman.Freeman@gmail.com | 555-Freeman |
| Kima Kima | Kima@gmail.com | 555-Kima-877 |
| Name | Phone | |
|---|---|---|
| Bunk bunk | bunk@gmail.com | 555-Bunk |
| Freeman Freeman | Freeman.Freeman@gmail.com | 555-Freeman |
| Kima Kima | Kima@gmail.com | 555-Kima-877 |
Grid
The bulma grid system. There are 12 columns. Classes
which can be used are is-2, is-3, etc.
or is-half, is-third, etc.
First Column is-2
Second Column is-4
Third Column is-3
Fourth Column is-3
First Column is-half
Second Column
Third Column
Fourth Column