项目作者: vigo

项目描述 :
Bulma CSS framework bundle for TextMate
高级语言: Python
项目地址: git://github.com/vigo/textmate2-bulma.git
创建时间: 2018-12-21T10:50:57Z
项目社区:https://github.com/vigo/textmate2-bulma

开源协议:MIT License

下载


Version
Bulma
Fontawesome
Plaftorm

TextMate Bulma CSS framework bundle

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!


Installation

  1. $ cd "$HOME/Library/Application Support/TextMate/Bundles/"
  2. $ git clone https://github.com/vigo/textmate2-bulma.git Bulma.tmbundle

Reload TextMate If It’s needed.


List of TAB Triggers

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>${1:Title}</title>
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
  8. <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  9. </head>
  10. <body>
  11. <section class="section">
  12. <div class="container">
  13. <h1 class="title">Hello World</h1>
  14. <p class="subtitle">My first website with <strong>Bulma</strong>!</p>
  15. </div>
  16. </section>
  17. </body>
  18. </html>

hlp

Color Helpers

Covers text and background colors. Prefixes are:

  • has-text-
  • has-background-

Typography Helpers

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…)

Responsive Visibility Helpers

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, Spacing and More

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.

  • Column/Columns wrapper
  • Column/Columns sizes and responsive (three-quarters, two-thirds + mobile,tablet etc…)
  • 12 Columns system (is-1 etc…)
  • Offset, Gaps, Multiline, Vertical/Horizontal alignment prefixes
  • Narrow column and responsive helpers

cole

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

lay

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

laye

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

frm

Covers form helpers

  • Control Classes (label, input etc…)
  • Field variations
  • Control variations (sizes, loading etc..)
  • Input
  • Button

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.


TODO

  • Form missing items (Textarea, Select etc…)
  • Elements (Box, Content etc…)
  • Components (Breadcrumb, Card etc…)

Screenshots


Contributer(s)


Contribute

All PR’s are welcome!

  1. fork (https://github.com/vigo/textmate2-bulma/fork)
  2. Create your branch (git checkout -b my-features)
  3. commit yours (git commit -am 'added killer options')
  4. push your branch (git push origin my-features)
  5. Than create a new Pull Request!

License

This project is licensed under MIT