Skip to content

Commit c647645

Browse files
committed
Fixed a minor issue w.r.t help gif
1 parent 5d5009f commit c647645

File tree

6 files changed

+17
-396
lines changed

6 files changed

+17
-396
lines changed

README.md

+6-389
Original file line numberDiff line numberDiff line change
@@ -1,392 +1,9 @@
1-
Visual studio code (vscode) plugin/extension containing snippets for Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets/live templates
2-
=================================================================================================================================================
1+
Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets/live templates
2+
==========================================================================================
33

4-
This plugin works in both in the stable & the insiders build
4+
This repository contains source for both [intellij](/intellij) & [vscode](/vscode) plugins.
55

6-
![Plugin in action](help.gif)
6+
Refer to the read me of each of the sub repositories for the complete documentation & contribution guidelines
77

8-
The detailed list of supported template triggers are listed [below](#documentation)
9-
10-
Feel free to let me know what else you want added via the [issues](https://github.com/1tontech/bootstrap4-snippets/issues)
11-
12-
Suggestions, feedback and other comments welcome via [@1tontech](https://twitter.com/1tontech) on Twitter.
13-
14-
## Usage
15-
16-
17-
Create a new HTML document and
18-
19-
1. Type `mat-` for all material components. Use `@mat` for all material attribute directives. `mat` comes from `*mat*erial design`
20-
2. Type `@fx` for all flex layout attribute directives. `fx` comes from `flex layout`
21-
3. Type `td-` for all teradata covalent components. Use `@td` for all teradata covalent attribute directives. `td` comes from `tera data` which is the company responsible for covalent development. `td` is quite similar to `mat`
22-
23-
`Ctrl+Space` will trigger autocomplete dialog for snippet selection
24-
25-
> 1. For autocompletion of components, use hyphen `-` format. i.e for material button, type `mat-button`
26-
> 2. For autocompletion of attribute directives, use `@` format. i.e for flex layout, use `@fxLayout` (or) use `@matTooltip` for material tooltip
27-
28-
Here are the conventions that will make it easy to lookup templates
29-
30-
1. If a tag supports multiple children, the template trigger version with `*` implies the template uses dynamic number of children `*ngFor` variation. The `*` comes from `*ngFor`
31-
2. If a template trigger has `$` variation, this snippet gives you the reactive variation of an input component (or) observable variation if not an input. `$` comes from the fact each reactive component acts as observable source & observable variable names usually end with a `$`)
32-
3. If a template trigger has `@` variation, this snippet targets the attribute of an html element in your markup. Think of `@` as `html attribute`
33-
4. If a template trigger has `:**` variation, this means this variation contains the maximum number of options for that component. `**` comes from [ant](https://ant.apache.org/manual/dirtasks.html) which matches all the files under folder & sub folders
34-
5. If a template trigger has `_`(underscore) variation, this is a snippet(partial) that can be added to the component. This exists mainly to avoid creating variations of all permutations for the base component
35-
6. If a template trigger has `+` variation, this snippet allows you to specify responsive variation
36-
7. If a template trigger has `:?` variation, the template contains additional help that helps you completely utilize the existing templates
37-
38-
## Mind map
39-
1. `*` => `*ngFor` variation
40-
2. `$` => Reactive version of input (or) Observable variation if component is not an input
41-
3. `@` => Targets html attribute
42-
4. `:**` => maximum variations
43-
5. `_` => Html snippet
44-
6. `+` => Responsive variations
45-
7. `:?` => Help
46-
47-
## Installation (in 2 easy steps)
48-
49-
1. Install plugin
50-
1. Press `F1`, paste `ext install angular-material` & then press `enter` (or)
51-
2. Goto extensions by pressing `Ctrl-Shift-X` (Windows/Linux) or `Cmd-Shift-X` (Mac) & Search for `Angular material v2`, click on install
52-
2. Reload your editor
53-
54-
You are good to go
55-
56-
## Contribution guidelines
57-
58-
1. Clone this repo
59-
2. To modify material templates, you can find the templates for each snippet under `snippets/material`. These html templates must follow [sublime text snippet](http://docs.sublimetext.info/en/latest/extensibility/snippets.html) format.
60-
5. If you need to change `README.md` (or) `package.json`, you should modify their templates (which are used to generate the actual files) under `src/util/resources`. For eg., If you want `package.json` within plugin to be modified, you should change `package-template.json` under `src/util/resources`. A new `package.json` & `README.md` are regenerated for every build from their corresponding templates.
61-
6. Send me a pull request
62-
63-
## Changelog
64-
65-
See [here](CHANGELOG.md)
66-
67-
## Documentation
68-
Here are available live templates
69-
70-
### Bootstrap 4 snippets
71-
72-
#### Bootstrap
73-
74-
Trigger | Description
75-
--- | ---
76-
b4-**bootstrap$** | Reactive form variation of Bootstrap
77-
78-
#### Alert
79-
80-
Trigger | Description
81-
--- | ---
82-
b4-**alert-additional-content** | Alert additional content
83-
b4-**alert-closable** | Alert closable
84-
b4-**alert-default** | Alert default
85-
b4-**alert-dismissible** | Alert dismissible
86-
b4-**alert-link** | Alert link
87-
88-
#### Badge
89-
90-
Trigger | Description
91-
--- | ---
92-
b4-**badge-button** | Badge button
93-
b4-**badge-default** | Badge default
94-
b4-**badge-heading** | Badge heading
95-
b4-**badge-link** | Badge link
96-
b4-**badge-pill** | Badge pill
97-
98-
#### Bgroup
99-
100-
Trigger | Description
101-
--- | ---
102-
b4-**bgroup-default** | Bgroup default
103-
b4-**bgroup-dropdown-vertical** | Bgroup dropdown vertical
104-
b4-**bgroup-dropdown** | Bgroup dropdown
105-
b4-**bgroup-size** | Bgroup size
106-
b4-**bgroup-toolbar** | Bgroup toolbar
107-
108-
#### Breadcrumb
109-
110-
Trigger | Description
111-
--- | ---
112-
b4-**breadcrumb-default** | Breadcrumb default
113-
b4-**breadcrumb-list** | Breadcrumb list
114-
115-
#### Button
116-
117-
Trigger | Description
118-
--- | ---
119-
b4-**button-a** | Button with link
120-
b4-**button-block** | Button block
121-
b4-**button-checkbox** | Button checkbox
122-
b4-**button-default** | Button default
123-
b4-**button-disabled-a** | Button disabled with link
124-
b4-**button-input** | Button input
125-
b4-**button-outline** | Button outline
126-
b4-**button-radio** | Button radio
127-
b4-**button-sizes** | Button sizes
128-
b4-**button-toggle** | Button toggle
129-
130-
#### Card
131-
132-
Trigger | Description
133-
--- | ---
134-
b4-**card-align** | Card align
135-
b4-**card-background-custom** | Card background custom
136-
b4-**card-background** | Card background
137-
b4-**card-blockquote** | Card blockquote
138-
b4-**card-border** | Card border
139-
b4-**card-columns** | Card columns
140-
b4-**card-decks** | Card decks
141-
b4-**card-default** | Card default
142-
b4-**card-grid** | Card grid
143-
b4-**card-groups** | Card groups
144-
b4-**card-head-foot** | Card head foot
145-
b4-**card-links** | Card links
146-
b4-**card-list** | Card list
147-
b4-**card-overlay** | Card overlay
148-
b4-**card-pill-head** | Card pill head
149-
b4-**card-subtitle** | Card subtitle
150-
b4-**card-tab-head** | Card tab head
151-
152-
#### Carousel
153-
154-
Trigger | Description
155-
--- | ---
156-
b4-**carousel-caption** | Carousel caption
157-
b4-**carousel-default** | Carousel default
158-
159-
#### Collapse
160-
161-
Trigger | Description
162-
--- | ---
163-
b4-**collapse-accordion** | Collapse accordion
164-
b4-**collapse-button** | Collapse button
165-
b4-**collapse-default** | Collapse default
166-
167-
#### Dropdown
168-
169-
Trigger | Description
170-
--- | ---
171-
b4-**dropdown-alignment** | Dropdown alignment
172-
b4-**dropdown-anchor** | Dropdown anchor
173-
b4-**dropdown-button** | Dropdown button
174-
b4-**dropdown-colored** | Dropdown colored
175-
b4-**dropdown-default** | Dropdown default
176-
b4-**dropdown-sized** | Dropdown sized
177-
b4-**dropdown-split** | Dropdown split
178-
b4-**dropdown-up-split** | Dropdown up split
179-
b4-**dropdown-up** | Dropdown up
180-
181-
#### Form
182-
183-
Trigger | Description
184-
--- | ---
185-
b4-**form-checkbox-custom** | Form checkbox custom
186-
b4-**form-checkbox-inline** | Form checkbox inline
187-
b4-**form-checkbox-nolabel** | Form checkbox nolabel
188-
b4-**form-checkbox** | Form checkbox
189-
b4-**form-email** | Form email
190-
b4-**form-file-custom** | Form file custom
191-
b4-**form-file** | Form file
192-
b4-**form-grid** | Form grid
193-
b4-**form-group-text** | Form group text
194-
b4-**form-group** | Form group
195-
b4-**form-help-text-inline** | Form help text inline
196-
b4-**form-help-text** | Form help text
197-
b4-**form-hidden** | Form hidden
198-
b4-**form-inline** | Form inline
199-
b4-**form-input-sizing** | Form input sizing
200-
b4-**form-input-text** | Form input text
201-
b4-**form-input** | Form input
202-
b4-**form-multi-select-custom** | Form multi select custom
203-
b4-**form-multi-select** | Form multi select
204-
b4-**form-multil-select-sizing** | Form multil select sizing
205-
b4-**form-password** | Form password
206-
b4-**form-radio-custom** | Form radio custom
207-
b4-**form-radio-inline** | Form radio inline
208-
b4-**form-radio-nolabel** | Form radio nolabel
209-
b4-**form-radio** | Form radio
210-
b4-**form-reset** | Form reset
211-
b4-**form-select-custom** | Form select custom
212-
b4-**form-select-sizing** | Form select sizing
213-
b4-**form-select** | Form select
214-
b4-**form-submit** | Form submit
215-
b4-**form-textarea** | Form textarea
216-
b4-**form-validation** | Form validation
217-
218-
#### Igroup
219-
220-
Trigger | Description
221-
--- | ---
222-
b4-**igroup-button** | Igroup button
223-
b4-**igroup-checkbox-radio** | Igroup checkbox radio
224-
b4-**igroup-dropdown-segmented** | Igroup dropdown segmented
225-
b4-**igroup-dropdown** | Igroup dropdown
226-
b4-**igroup-size** | Igroup size
227-
b4-**igroup-text-both** | Igroup text both
228-
b4-**igroup-text-prefix** | Igroup text prefix
229-
b4-**igroup-text-sufix** | Igroup text sufix
230-
231-
#### Jumbotron
232-
233-
Trigger | Description
234-
--- | ---
235-
b4-**jumbotron-default** | Jumbotron default
236-
b4-**jumbotron-fluid** | Jumbotron fluid
237-
238-
#### List
239-
240-
Trigger | Description
241-
--- | ---
242-
b4-**list-a** | List with link
243-
b4-**list-badge** | List badge
244-
b4-**list-button** | List button
245-
b4-**list-colors** | List colors
246-
b4-**list-custom** | List custom
247-
b4-**list-default** | List default
248-
249-
#### Modal
250-
251-
Trigger | Description
252-
--- | ---
253-
b4-**modal-customize** | Modal customize
254-
b4-**modal-default** | Modal default
255-
b4-**modal-grid** | Modal grid
256-
b4-**modal-sizes** | Modal sizes
257-
258-
#### Nav
259-
260-
Trigger | Description
261-
--- | ---
262-
b4-**nav-a** | Nav with link
263-
b4-**nav-complete** | Nav complete
264-
b4-**nav-tabs-pills-a-variation** | Nav tabs pills with link variation
265-
b4-**nav-tabs-pills-dropdown** | Nav tabs pills dropdown
266-
b4-**nav-tabs-pills-ul-variation** | Nav tabs pills ul variation
267-
b4-**nav-ul** | Nav ul
268-
269-
#### Navbar
270-
271-
Trigger | Description
272-
--- | ---
273-
b4-**navbar-background-color** | Navbar background color
274-
b4-**navbar-background** | Navbar background
275-
b4-**navbar-default** | Navbar default
276-
b4-**navbar-minimal-a** | Navbar minimal with link
277-
b4-**navbar-minimal-ul** | Navbar minimal ul
278-
b4-**navbar-non-responsive** | Navbar non responsive
279-
b4-**navbar-placement** | Navbar placement
280-
281-
#### Pagination
282-
283-
Trigger | Description
284-
--- | ---
285-
b4-**pagination-alignment** | Pagination alignment
286-
b4-**pagination-default** | Pagination default
287-
b4-**pagination-sized** | Pagination sized
288-
289-
#### Popover
290-
291-
Trigger | Description
292-
--- | ---
293-
b4-**popover-default** | Popover default
294-
b4-**popover-direction** | Popover direction
295-
b4-**popover-dismissable** | Popover dismissable
296-
297-
#### Progress
298-
299-
Trigger | Description
300-
--- | ---
301-
b4-**progress-colored** | Progress colored
302-
b4-**progress-default** | Progress default
303-
b4-**progress-ie9** | Progress ie9
304-
b4-**progress-striped** | Progress striped
305-
306-
#### Scrollspy
307-
308-
Trigger | Description
309-
--- | ---
310-
b4-**scrollspy-default** | Scrollspy default
311-
312-
#### Tooltip
313-
314-
Trigger | Description
315-
--- | ---
316-
b4-**tooltip-default** | Tooltip default
317-
318-
#### Figure
319-
320-
Trigger | Description
321-
--- | ---
322-
b4-**figure-default** | Figure default
323-
324-
#### Image
325-
326-
Trigger | Description
327-
--- | ---
328-
b4-**image-default** | Image default
329-
330-
#### Table
331-
332-
Trigger | Description
333-
--- | ---
334-
b4-**table-default** | Table default
335-
b4-**table-special** | Table special
336-
337-
#### Typography
338-
339-
Trigger | Description
340-
--- | ---
341-
b4-**typography-blockquote-reverse** | Typography blockquote reverse
342-
b4-**typography-blockquote** | Typography blockquote
343-
b4-**typography-description-list** | Typography description list
344-
b4-**typography-display-heading** | Typography display heading
345-
b4-**typography-lead** | Typography lead
346-
b4-**typography-list-inline** | Typography list inline
347-
b4-**typography-list-unstyled** | Typography list unstyled
348-
b4-**typography-muted-text** | Typography muted text
349-
350-
#### Grid
351-
352-
Trigger | Description
353-
--- | ---
354-
b4-**grid-col** | Grid col
355-
b4-**grid-container-fluid** | Grid container fluid
356-
b4-**grid-container** | Grid container
357-
b4-**grid-default** | Grid default
358-
b4-**grid-row** | Grid row
359-
360-
#### Media
361-
362-
Trigger | Description
363-
--- | ---
364-
b4-**media-bottom** | Media bottom
365-
b4-**media-default** | Media default
366-
b4-**media-list** | Media list
367-
b4-**media-middle** | Media middle
368-
b4-**media-nesting** | Media nesting
369-
b4-**media-right** | Media right
370-
b4-**media-top** | Media top
371-
372-
#### Responsive
373-
374-
Trigger | Description
375-
--- | ---
376-
b4-**responsive-hide-down** | Responsive hide down
377-
b4-**responsive-hide-up** | Responsive hide up
378-
b4-**responsive-print-show** | Responsive print show
379-
380-
381-
### Font Awesome 4 icon snippets
382-
@@@GENERATED_FONT_AWESOME4_ICON_SNIPPETS@@@
383-
384-
### Font Awesome 5 Free icon snippets
385-
@@@GENERATED_FONT_AWESOME5_FREE_ICON_SNIPPETS@@@
386-
387-
### Font Awesome 5 Pro icon snippets
388-
@@@GENERATED_FONT_AWESOME5_PRO_ICON_SNIPPETS@@@
389-
390-
## License
391-
392-
Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro - Visual studio code plugin is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
8+
1. [intellij](/intellij)
9+
2. [vscode](/vscode)

0 commit comments

Comments
 (0)