Bulma CSS framework bundle for TextMate
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.tmbundle
Reload 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 |
new
<!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>
hlp
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-mobile
is-block-touch
is-block-tablet
is-block-tablet-only
is-block-desktop
is-block-desktop-only
is-block-widescreen
is-block-widescreen-only
is-block-fullhd
flex
:
is-flex-mobile
is-flex-touch
is-flex-tablet
is-flex-tablet-only
is-flex-desktop
is-flex-desktop-only
is-flex-widescreen
is-flex-widescreen-only
is-flex-fullhd
inline
:
is-inline-mobile
is-inline-touch
is-inline-tablet
is-inline-tablet-only
is-inline-desktop
is-inline-desktop-only
is-inline-widescreen
is-inline-widescreen-only
is-inline-fullhd
inline-block
:
is-inline-block-mobile
is-inline-block-touch
is-inline-block-tablet
is-inline-block-tablet-only
is-inline-block-desktop
is-inline-block-desktop-only
is-inline-block-widescreen
is-inline-block-widescreen-only
is-inline-block-fullhd
inline-flex
:
is-inline-flex-mobile
is-inline-flex-touch
is-inline-flex-tablet
is-inline-flex-tablet-only
is-inline-flex-desktop
is-inline-flex-desktop-only
is-inline-flex-widescreen
is-inline-flex-widescreen-only
is-inline-flex-fullhd
hidden
:
is-hidden-touch
is-hidden-mobile
is-hidden-tablet
is-hidden-tablet-only
is-hidden-dektop
is-hidden-desktop-only
is-hidden-widescreen
is-hidden-widescreen-only
is-hidden-fullhd
Floating;
is-clearfix
is-pulled-left
is-pulled-right
Spacing;
is-marginless
is-paddingless
And more…
is-overlay
is-clipped
is-radiusless
is-shadowless
is-unselectable
is-invisible
is-sr-only
col
Covers column related snippets and class names.
is-1
etc…)cole
Example snippets for column helpers.
lay
Covers layout helpers.
laye
Examples snippets for layout helpers
Level Examples
Media Examples
Tile Examples
frm
Covers form helpers
faw
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.
All PR’s are welcome!
fork
(https://github.com/vigo/textmate2-bulma/fork)branch
(git checkout -b my-features
)commit
yours (git commit -am 'added killer options'
)push
your branch
(git push origin my-features
)This project is licensed under MIT