eljuanchosf / snippets-bulma-vscode

Quick shortcut for all components on bulma

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bulma Snippets

Bulma Snippets is extension to make ease to build website refrence to bulma.io Complete documentation of bulma can see at bulma.io

Features

Trigger Description
html:b Generate basic html of bulma
Trigger Description
hero:b Basic Hero banner
hero:b:medium Hero banner size medium
hero:b:large Hero banner size large
hero:b:full Hero banner size full hight
hero:b:nav Hero banner with navbar
Trigger Description
navbar:b Basic of navbar
Trigger Description
container:b Basic of container
container:b:fluid 32px margin on the left and right sides
container:b:wide a fullwidth container until those specific breakpoints
container:b:fullhd This container is fullwidth until the $fullhd breakpoint
Trigger Description
columns:b Basic Columns
columns:b:fourfifths Column Four fifths
columns:b:threequarters Column Three Quarters
columns:b:twothirds Column Two Thirds
columns:b:threefifths Column Thee Fifths
columns:b:half Column Half
columns:b:twofifths Column Two Fifths
columns:b:onethird Column One Third
columns:b:onequarter Column One Quarter
columns:b:onefifth Column One Fifth
columns:b:halfcenter Column Half Center
columns:b:threecenter Column Theree Center
columns:b:multiline Column Multiline
Trigger Description
title:b Basic of title
subtitle:b Basic of subtitle
Trigger Description
card:b Basic of card
card:b:full Card header and footer
Trigger Description
box:b Box of bulma
Trigger Description
button:b Button Basic
button:b:color Button Basic with color
button:b:display Button Basic with display full width
button:b:size Button Basic with variant of size
button:b:outline Button Basic with variant of outline
button:b:rounded Button Rounded
button:b:icon Button Icon
button:b:group Button Group
button:b:addons Button Addons
Trigger Description
image:b:square Ratio Square (or 1 by 1)
image:b:1by1 Ratio 1 by 1
image:b:5by4 Ratio 5 by 4
image:b:4by3 Ratio 4 by 3
image:b:3by2 Ratio 3 by 2
image:b:5by3 Ratio 5 by 3
image:b:16by9 Ratio 16 by 9
image:b:2by1 Ratio 2 by 1
image:b:3by1 Ratio 3 by 1
image:b:4by5 Ratio 4 by 5

A single class to handle WYSIWYG generated content, where only HTML tags are available

Trigger Description
content:b Basic Content
content:b:small Content Small
content:b:medium Content Medium
content:b:large Content Large
Trigger Description
notif:b Basic of Notification
Trigger Description
icon:b Basic of icon
Trigger Description
tag:b Basic of icon
Trigger Description
form:b General Form input
input:b Input Form
textarea:b Textarea Form
select:b Select Form
checkbox:b Checkbox Form
radio:b Radio Form
file:b file Form
Trigger Description
table:b Basic table of bulma
Trigger Description
pag:b Basic pagination
pag:b:center Pagination number in center
pag:b:rounded Pagination with rounded style
Trigger Description
footer:b Basic footer of bulma

Release Notes

Hello all this is my first extension of vscode about snippets, please mention me on twitter @hifiaz if any question or just you want to know about me

0.0.1

Initial release of bulma snippets

0.0.2

Some components update

  • Update shortcut
  • Navbar
  • Card
  • Footer

0.0.3

Update shortcut for ease to use with basic tag,

Update Components

  • box
  • button
  • image

0.0.4

Add support for PHP, Javascript, Typescript, Vue and JSX files

About

Quick shortcut for all components on bulma