Skip to content

Commit a6f9e2c

Browse files
brannondorseybrannondorsey
committed
Add Sublime Text support
1 parent c8c9e27 commit a6f9e2c

14 files changed

+177
-2
lines changed

‎README.md‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# BBElements Code Snippets
22

3-
[BBElements](https://github.com/brangerbriz/BBElements) code snippets for VS Code and Atom editors.
3+
[BBElements](https://github.com/brangerbriz/BBElements) code snippets for VS Code, Atom, and Sublime Text.
44

55
## Installing
66

@@ -20,6 +20,17 @@ Atom saves all user defined snippets in one file, so it's probably safer to copy
2020

2121
See the [Atom snippets documentation](https://flight-manual.atom.io/using-atom/sections/snippets/) for more info.
2222

23+
### Sublime Text
24+
25+
```bash
26+
# clone the repo
27+
git clone https://github.com/brangerbriz/BBElements-code-snippets
28+
29+
# Install path varies dependent on operating system, this is the install path for Linux
30+
INSTALL_PATH="~/.config/sublime-text-3/Packages/User/BBElements-code-snippets"
31+
cp -r BBElements-code-snippets/sublime $INSTALL_PATH
32+
```
33+
2334
## Usage
2435

2536
These code snippets support all tag types specified in the [BBElements README](https://github.com/brangerbriz/bbelements). Here is a list of the snippet names:
@@ -48,6 +59,10 @@ Atom snippets are enabled by default for and should be autosuggested as you type
4859

4960
BBElements snippets are only supported in files with the `.html` and `.md` file extension.
5061

62+
### Sublime Text
63+
64+
Snippets in sublime text are triggered by typing the snippet name (e.g. bb.date, bb.code, etc.) and then pressing the TAB key.
65+
5166
## Info
5267

53-
These snippets were created by manually compiling output from https://snippet-generator.app/ into `vscode/bbelements.code-snippets` and `atom/snippets.cson`. See those source files for links to the original snippet-generator snippets.
68+
These snippets were created by manually compiling output from https://snippet-generator.app/ into `vscode/bbelements.code-snippets`, `atom/snippets.cson`, and `sublime/*.sublime-snippet`. See those source files for links to the original snippet-generator snippets.

‎sublime/bb-code.sublime-snippet‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- https://snippet-generator.app/?description=BBElements+code+snippet&tabtrigger=bb.code&snippet=%3Cpre+class%3D%22code%22%3E%0A++++%3Ccode+class%3D%22%24%7B1%3Ajavascript%7D%22+data-wrap%3D%22%24%7B2%3Afalse%7D%22%3E%0A%24%7B3%3A%2F%2F+code+goes+here%7D%0A++++%3C%2Fcode%3E%0A%3C%2Fpre%3E&mode=sublimetext -->
2+
<snippet>
3+
<content><![CDATA[
4+
<pre class="code">
5+
<code class="${1:javascript}" data-wrap="${2:false}">
6+
${3:// code goes here}
7+
</code>
8+
</pre>
9+
]]></content >
10+
<description>BBElements code snippet</description>
11+
<tabTrigger>bb.code</tabTrigger>
12+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
13+
<!-- <scope >source.python</scope > -->
14+
</snippet >

‎sublime/bb-css.sublime-snippet‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<!-- required: this is all the base64 @font-faces (avoids FOUT) -->
4+
<link rel="stylesheet" href="css/bb-fonts.css">
5+
<!-- required: this is the core styles file -->
6+
<link rel="stylesheet" href="css/bb-styles.css">
7+
<!-- optionally: if you want media-queries for responsive layout -->
8+
<link rel="stylesheet" href="css/bb-responsive.css">
9+
<!-- optionally: if you want code snippets to be syntax highlighted -->
10+
<link rel="stylesheet" href="css/bb-code-colors.css">
11+
<!-- optionally: if you want animations on load -->
12+
<link rel="stylesheet" href="css/bb-animations.css">
13+
]]></content >
14+
<description>BBElements CSS includes snippet</description>
15+
<tabTrigger>bb.css</tabTrigger>
16+
</snippet>
17+

‎sublime/bb-date.sublime-snippet‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!-- https://snippet-generator.app/?description=BBElements+date+snippet&tabtrigger=bb.date&snippet=%3Cdiv+class%3D%22date%22%3E%24%7B0%3AJanuary+1%2C+2045%7D%3C%2Fdiv%3E&mode=sublimetext -->
2+
<snippet>
3+
<content><![CDATA[
4+
<div class="date">${0:January 1, 2045}</div>
5+
]]></content >
6+
<description>BBElements date snippet</description>
7+
<tabTrigger>bb.date</tabTrigger>
8+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
9+
<!-- <scope >source.python</scope > -->
10+
</snippet >

‎sublime/bb-h1.sublime-snippet‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!-- https://snippet-generator.app/?description=BBElements+h1+snippet&tabtrigger=bb.h1&snippet=%3Ch1%3E%24%7B0%3AHeader+1%7D%3C%2Fh1%3E&mode=sublimetext -->
2+
<snippet>
3+
<content><![CDATA[
4+
<h1>${0:Header 1}</h1>
5+
]]></content >
6+
<description>BBElements h1 snippet</description>
7+
<tabTrigger>bb.h1</tabTrigger>
8+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
9+
<!-- <scope >source.python</scope > -->
10+
</snippet >

‎sublime/bb-h2.sublime-snippet‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<h2>${0:Header 2}</h2>
4+
]]></content >
5+
<description>BBElements h2 snippet</description>
6+
<tabTrigger>bb.h2</tabTrigger>
7+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
8+
<!-- <scope >source.python</scope > -->
9+
</snippet >

‎sublime/bb-h3.sublime-snippet‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<h3>${0:Header 3}</h3>
4+
]]></content >
5+
<description>BBElements h3 snippet</description>
6+
<tabTrigger>bb.h3</tabTrigger>
7+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
8+
<!-- <scope >source.python</scope > -->
9+
</snippet >

‎sublime/bb-logo.sublime-snippet‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!-- https://snippet-generator.app/?description=BBElements+logo+snippet&tabtrigger=bb.logo&snippet=%3C%21-+BB+LOGO+OPTIONAL+HTML+ATTRIBUTES%0A++++-+width%3A+changes+the+size+of+the+logo.%0A++++-+href%3A+specifies+where+to+link+the+logo+to.+When+no+href+is+specified+the+link+defaults+to+our+website%2C+when+set+to+href%3D%22false%22+it+won%27t+link+anywhere.%0A++++-+data-sub-title%3A+adds+a+sub-title+below+the+logo.%0A++++-+data-brand-color%3A+which+changes+the+default+pink+color.%0A++++-+data-text-color%3A+which+changes+the+default+black+text+color.%0A++++-+data-fill-color%3A+which+changes+the+white+color+of+the+B+inside+the+circle+mark.%0A++++-+data-mark-only%3A+if+set+to+%22true%22+it+only+renders+the+%28B%29+mark%2C+if+set+to+%22mobile%22+it+only+renders+the+%28B%29+mark+when+innerWidth+is+less+than+767px+%28assuming+you+are+using+bb-responsive-styles.css%29+positioned+on+the+left%2C+or+to+position+the+mobile+%28B%29+on+the+right+you+can+also+set+it+to+%22mobile-right%22%0A--%3E%0A%3Csection+id%3D%22logo%22%3E%3C%2Fsection%3E&mode=sublimetext -->
2+
<snippet>
3+
<content><![CDATA[
4+
<!- BB LOGO OPTIONAL HTML ATTRIBUTES
5+
- width: changes the size of the logo.
6+
- href: specifies where to link the logo to. When no href is specified the link defaults to our website, when set to href="false" it won't link anywhere.
7+
- data-sub-title: adds a sub-title below the logo.
8+
- data-brand-color: which changes the default pink color.
9+
- data-text-color: which changes the default black text color.
10+
- data-fill-color: which changes the white color of the B inside the circle mark.
11+
- data-mark-only: if set to "true" it only renders the (B) mark, if set to "mobile" it only renders the (B) mark when innerWidth is less than 767px (assuming you are using bb-responsive-styles.css) positioned on the left, or to position the mobile (B) on the right you can also set it to "mobile-right"
12+
-->
13+
<section id="logo"></section>
14+
]]></content >
15+
<description>BBElements logo snippet</description>
16+
<tabTrigger>bb.logo</tabTrigger>
17+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
18+
<!-- <scope >source.python</scope > -->
19+
</snippet >

‎sublime/bb-marginal-note.sublime-snippet‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!-- https://snippet-generator.app/?description=BBElements+marginal+note+snippet&tabtrigger=bb.marginal-note&snippet=%3Cspan+class%3D%22marginal-note%22+data-info%3D%22%24%7B0%3Amarginal+note+goes+in+here+as+%5Bmarkdown%5D%28%23%29%7D%22%3E%3C%2Fspan%3E&mode=sublimetext -->
2+
<snippet>
3+
<content><![CDATA[
4+
<span class="marginal-note" data-info="${0:marginal note goes in here as [markdown](#)}"></span>
5+
]]></content >
6+
<description>BBElements marginal note snippet</description>
7+
<tabTrigger>bb.marginal-note</tabTrigger>
8+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
9+
<!-- <scope >source.python</scope > -->
10+
</snippet >

‎sublime/bb-media-block.sublime-snippet‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!-- https://snippet-generator.app/?description=BBElements+media+block+snippet&tabtrigger=bb.media-block&snippet=%3Csection+class%3D%22media%22+data-fullwidth%3D%22%24%7B1%3Atrue%7D%22%3E%0A++++%3Cimg+src%3D%22%24%7B0%3Aimage.jpg%7D%22+alt%3D%22%24%7B2%3AText+that+appears+under+the+%5Bimage%5D%28%23%29%7D%22%3E%0A%3C%2Fsection%3E&mode=sublimetext -->
2+
<snippet>
3+
<content><![CDATA[
4+
<section class="media" data-fullwidth="${1:true}">
5+
<img src="${0:image.jpg}" alt="${2:Text that appears under the [image](#)}">
6+
</section>
7+
]]></content >
8+
<description>BBElements media block snippet</description>
9+
<tabTrigger>bb.media-block</tabTrigger>
10+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
11+
<!-- <scope >source.python</scope > -->
12+
</snippet >

0 commit comments

Comments
 (0)