Git Product home page Git Product logo

sublime-bootstrap4's Introduction

Bootstrap 4 - Sublime Plugin

A sublime plugin complete with Bootstrap 4 snippets

🔥 Up to date w/ 4.0.0-beta 🔥

Feel free to let me know what else you want added via:

Installation

There are 3 methods for installing this plugin.

  1. Search for "Bootstrap 4 Snippets" via the "Package Control: Install Packages" menu. Note: If you don't have Sublime Package Control installed, you can find out how to install it here https://sublime.wbond.net/installation

  2. Clone the repository into your Sublime Text 2/3 packages directory. git clone https://github.com/degouville/sublime-bootstrap4.git

  3. Download the .zip file and unzip it into your Sublime Text 2/3 packages directory. Note: You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages.

Usage

Start typing b4 in HTML files and the autocomplete window opens. It matches fuzzily. So you can type b4danger to find the b4:alert:danger snippet.

Ensure you have enabled "b4" in your Preferences.sublime-settings:

"auto_complete_triggers": [{"selector": "text.html", "characters": "b4"}]

Key Features :

  • Supports autocompletion of all helper classes in JavaScript, CSS and HTML
  • Snippet support for all components.
  • Snippet support for templates.
  • Snippet support for layout.
  • Snippet support for content.

Menu

Snippets

Getting Started

Imports

Snippets Descriptions

| b4:cdn | Generates CSS & JS call using CDN | | b4:cdn_css | Generates CSS call using CDN | | b4:cdn_js | Generates JS call using CDN | | b4:local_css | Generates CSS call using local file | | b4:local_js | Generates JS call using local file |

Templates

Snippets Descriptions
b4:template:html5 Generates a Basic HTML5 Template
b4:template:starter Generates a Starter Template
b4:template:blog Generates a Blog Template
b4:template:dashboard Generates a Dashboard Template
b4:template:sign_in Generates a Sign_in Template
b4:template:jumbotron Generates a Jumbotron Template
b4:template:album Generates an Album Template
b4:template:carousel Generates a Carousel Template
b4:template:grids Generates a Grids Template
b4:template:cover Generates a Cover Template
b4:template:narrow_jumbotron Generates a Narrow Jumbotron Template
b4:template:navbars Generates a Navbars Template
b4:template:offcanvas Generates a OffCanvas Template
b4:template:navbar_top_fixed Generates a Navbar Top Fixed Template
b4:template:navbar_top Generates a Navbar Top Template
b4:template:justified_nav Generates a Justified nav Template
b4:template:sticky_footer Generates a Sticky footer Template
b4:template:sticky_footer+navbar Generates a Sticky footer with a navbar

Layout

Grid

Snippets Descriptions
b4:grid Generates a grid
b4:container Generates a container
b4:container-fluid Generates a fluid container
b4:row Generates a row
b4:col Generates a column
b4:column Generates a column w/ options
b4:col-sm Generates a small column
b4:col-md Generates a medium column
b4:col-lg Generates a large column
b4:col-xl Generates a extra large column
b4:col:flex Generates a flexbox column

Media

Snippets Descriptions
b4:media Generates a Media
b4:media:right Generates a Media right
b4:media:center Generates a Media middle
b4:media:bottom Generates a Media bottom
b4:media:list Generates a Media List

Utilities for layout

Snippets Descriptions
b4:visible Generates a (in)visible snippet
b4:spacing Generates a Spacing options snippet
b4:spacing:centered Generates a Spacing centered snippet

Content

Typography

Snippets Descriptions
b4:blockquote Generates a blockquote
b4:description_list Generates a list of terms and descriptions
b4:display_heading Generates a display header
b4:lead Generates a lead paragraph
b4:list-inline Generates a list of inlined elements
b4:list-unstyled Generates a list of itens without any bullet
b4:text-muted Generates a text-muted element for secondary text

Tables

Snippets Descriptions
b4:table Generates a simple table markup
b4:table:bordered Generates a table with borders
b4:table:head Generates a table colored in the header
b4:table:hover Generates a table with hover behavior
b4:table:responsive Generates a responsive table
b4:table:small Generates a table with condensed lines
b4:table:striped Generates a table with stripes

Images

Snippets Descriptions
b4:image-fluid Generates a responsive image
b4:figure Generates figure with caption

Back to Top

License

Bootstrap 4 - Sublime Plugin is open-sourced software licensed under the MIT license.

sublime-bootstrap4's People

Contributors

alexanderankin avatar claudsonm avatar degouville avatar francois-auclair avatar hassanazimi avatar jamesray avatar shian48263 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

levifite pierregsd shian48263 zeshanshani christophermoura ngangchill quintusrise allen1973 trinhdung0911 bluedem0n k-lu leninalbertolp chenchaohan webhostfly mustafa9140 jamesray mwc320 francois-auclair magarrent hieuhuynh93 kayot88 joshuaneedham v02m inkluna elvinz alexanderankin ehab-ahmad maxororo arleym ibrahimcheik 1621740748 tebogosewape ramzanansari76 kahatami

sublime-bootstrap4's Issues

input-group expand does not work

Hey I'm not sure if this is still actively maintained. I found a bug where when I type

input-group

and tab to expand the abbreviation, nothing happens. Let me know what else I can provide to help out. I'll take a look when I get off of work if I can do some more debugging.

snippet issue

I think it's hard to get used to the "b4" prefix. How can i go back to old version?

'<' remain in the file

When you type in <th5 for example it will expand to the correct template but it keeps a < at the beginning. and ideas to avoid that? thanks.

New release to fix startup prompts?

After merging PR #8, I think a new release should be issued to fix the startup errors prompt.

Maybe 0.1.2.1? Else those prompts will still show up every time Sublime Text is launched.

Thanks.

Readme

A little introduction on how to use it would be nice...

I can't find many snippets, most of the folders are empty?

2 errors prompt after update

There're 2 errors prompt popping up after the update 3 hours ago.
They're showing up in the console too.

error: Error parsing snippet xml: expected < in file Packages/Bootstrap 4 Snippets/snippets/components/button_dropdown/button_dropdown.sublime-snippet on line: 91
error: Error parsing snippet xml: expected < in file Packages/Bootstrap 4 Snippets/snippets/components/navbar/navbar.sublime-snippet on line: 40

Contributing to sublime-bootstrap4

I'd like to contribute regularly to sublime-bootstrap4. I started working on my own snippets when I came across yours. You can see mine here:

https://github.com/jhuebel/sublime-bootstrap4-snippets/tree/master/bootstrap4

I'd like to combine my efforts with yours, rather than have a second Bootstrap 4 snippet package in Package Control.

How would you prefer me to go about that? Would you prefer I fork and submit pull requests? Or would you be willing to allow me to join as a contributor?

template:dashboard

In the template there is a to a dashboard.css file. Where is this file located?

Utility classes

In HTML5 & perhaps other snippets class of say "text-xs-center" rather than the depreciated "text-center"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.