Un-official Bulma CSS helper bundle for you with ❤️ You can visit Bulma’s web site via https://bulma.io
All the example snippets are borrowed from Bulma’s examples!
$ cd "$HOME/Library/Application Support/TextMate/Bundles/"
$ git clone https://github.com/vigo/textmate2-bulma.git Bulma.tmbundleReload TextMate If It’s needed.
| Trigger | Information |
|---|---|
new + ⇥ |
Generates basic html starter page template. |
hlp + ⇥ |
Helper classes |
col + ⇥ |
Column helper |
cole + ⇥ |
Column examples |
lay + ⇥ |
Layout helper |
laye + ⇥ |
Layout examples |
frm + ⇥ |
Form helpers |
faw + ⇥ |
Fontawesome helpers |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${1:Title}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">Hello World</h1>
<p class="subtitle">My first website with <strong>Bulma</strong>!</p>
</div>
</section>
</body>
</html>Covers text and background colors. Prefixes are:
has-text-has-background-
Covers typography related; text sizes, alignments, text transformations, weights and font family. Prefixes are:
is-size-is-size-+ responsive prefixes (mobile, tablet etc...)has-text-has-text-+ responsive prefixes (mobile, tablet, -only etc...)is-+ transformations (lowercase etc...)is-+ weights (bold etc...)is-family-+ families (monospace etc...)
block:
is-block-mobileis-block-touchis-block-tabletis-block-tablet-onlyis-block-desktopis-block-desktop-onlyis-block-widescreenis-block-widescreen-onlyis-block-fullhd
flex:
is-flex-mobileis-flex-touchis-flex-tabletis-flex-tablet-onlyis-flex-desktopis-flex-desktop-onlyis-flex-widescreenis-flex-widescreen-onlyis-flex-fullhd
inline:
is-inline-mobileis-inline-touchis-inline-tabletis-inline-tablet-onlyis-inline-desktopis-inline-desktop-onlyis-inline-widescreenis-inline-widescreen-onlyis-inline-fullhd
inline-block:
is-inline-block-mobileis-inline-block-touchis-inline-block-tabletis-inline-block-tablet-onlyis-inline-block-desktopis-inline-block-desktop-onlyis-inline-block-widescreenis-inline-block-widescreen-onlyis-inline-block-fullhd
inline-flex:
is-inline-flex-mobileis-inline-flex-touchis-inline-flex-tabletis-inline-flex-tablet-onlyis-inline-flex-desktopis-inline-flex-desktop-onlyis-inline-flex-widescreenis-inline-flex-widescreen-onlyis-inline-flex-fullhd
hidden:
is-hidden-touchis-hidden-mobileis-hidden-tabletis-hidden-tablet-onlyis-hidden-dektopis-hidden-desktop-onlyis-hidden-widescreenis-hidden-widescreen-onlyis-hidden-fullhd
Floating;
is-clearfixis-pulled-leftis-pulled-right
Spacing;
is-marginlessis-paddingless
And more...
is-overlayis-clippedis-radiuslessis-shadowlessis-unselectableis-invisibleis-sr-only
Covers column related snippets and class names.
- Column/Columns wrapper
- Column/Columns sizes and responsive (three-quarters, two-thirds + mobile,tablet etc...)
- 12 Columns system (
is-1etc...) - Offset, Gaps, Multiline, Vertical/Horizontal alignment prefixes
- Narrow column and responsive helpers
Example snippets for column helpers.
- 2,3,4,6,8 Columns
- Auto Columns
- 12 Column 1 to 12
- 4 Columns responsive
- 3 + 1 Columns responsive and variable sizes
- Vertical centered and multi lines
- Multine in a single row for mobile
- Centerin Colums
Covers layout helpers.
- Container
- Container Fluid / Responsive
- Level
- Level Item, Left/Right
- Media
- Media Content, Left/Right
- Hero variations (color, gradient, size, three parts etc)
- Section
- Footer
Examples snippets for layout helpers
Level Examples
- Complex Navbar
- Centered Level
- Mobile Level
Media Examples
- Tweet
- Disqus
Tile Examples
- 2 Different titles
- 3 and 4 Columns
Covers form helpers
- Control Classes (label, input etc...)
- Field variations
- Control variations (sizes, loading etc..)
- Input
- Button
Choose Fontawesome icon from selection UI or auto-completion box. Selection UI uses AppleScript to build UI. It takes a bit time for building 1400+ options. If you now the icon, try Class Only edition for much much faster.
- Form missing items (Textarea, Select etc...)
- Elements (Box, Content etc...)
- Components (Breadcrumb, Card etc...)
- Uğur "vigo" Özyılmazel - Creator, maintainer
All PR’s are welcome!
fork(https://github.com/vigo/textmate2-bulma/fork)- Create your
branch(git checkout -b my-features) commityours (git commit -am 'added killer options')pushyourbranch(git push origin my-features)- Than create a new Pull Request!
This project is licensed under MIT