Skip to content

Commit 75afb60

Browse files
liciolentimoliciolentimo
committed
Released v2.0.0
1 parent ade0a17 commit 75afb60

File tree

2 files changed

+115
-2
lines changed

2 files changed

+115
-2
lines changed

‎README.md‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# semantic-ui-snippets
22

3-
This extension will solve the issue for you with a simple `!semh` + `TAB` and your up and running with a full template.
3+
This extension provides snippets for popular Semantic-UI elements.
44

55
[![Visual Studio Marketplace](https://img.shields.io/vscode-marketplace/v/Licio.semantic-ui-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=Licio.semantic-ui-snippets) [![Visual Studio Marketplace](https://img.shields.io/vscode-marketplace/d/Licio.semantic-ui-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=Licio.semantic-ui-snippets) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg)](https://github.com/liciolentimo/semantic-ui-snippets)
66

@@ -9,9 +9,27 @@ This extension will solve the issue for you with a simple `!semh` + `TAB` and yo
99

1010
Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.
1111

12+
| **Shortcut Prefix** | **Description** |
13+
|---|---|
14+
| **Buttons** | |
15+
|`std-button` | `button`|
16+
|`std-button-tooltip` | `button` with a tooltip|
17+
|`std-button-disabled-tooltip` | `button` with class `disabled` and tooltip on a surrounding `span`|
18+
|`ui-button-deny` | `div` with class `ui black deny button`|
19+
|`ui-button-approve` | `div` with class `ui green approve right button`|
20+
| **Elements** | |
21+
|`ui-segment` | `div` with class `ui segment`|
22+
|`ui-form` | `form` with class `ui form` and method `post`|
23+
|`ui-header` | `div` with class `ui header`|
24+
|`ui-clearing` | `div` with class `ui clearing divider`|
25+
|`ui-modal` | `div` with class `ui modal`|
26+
1227
## Release Notes
1328

14-
Starter template for Semantic-UI snippet for the <head> tag
29+
Starter template for Semantic-UI snippets.
30+
31+
### 2.0.0
32+
Added buttons and divider elements.
1533

1634
### 1.0.3
1735
Added form control snippets

‎snippets/snippets.json‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,100 @@
3838
"</div>"
3939
],
4040
"description": "Semantic-UI Form Control"
41+
},
42+
"std-button": {
43+
"prefix": "std-button",
44+
"body": [
45+
"<button class=\"ui button\" aria-label=\"${1:label}\">",
46+
" ${1:label}",
47+
"</button>"
48+
]
49+
},
50+
"std-button-tooltip": {
51+
"prefix": "ui-button-tooltip",
52+
"body": [
53+
"<button class=\"ui button\" data-tooltip=\"${1:content}\" aria-label=\"${2:label}\">",
54+
" ${2:label}",
55+
"</button>"
56+
]
57+
},
58+
"std-button-disabled-tooltip": {
59+
"prefix": "ui-button-disabled-tooltip",
60+
"body": [
61+
"<span data-tooltip=\"${1:tooltip-content}\">",
62+
" <button class=\"ui button disabled\" aria-label=\"${2:button-label}\">",
63+
" ${2:button-label}",
64+
" </button>",
65+
"</span>"
66+
]
67+
},
68+
"ui-button-deny": {
69+
"prefix": "ui-button-deny",
70+
"body": [
71+
"<div class=\"ui black deny button\">",
72+
" ${1:label}",
73+
"</div>"
74+
],
75+
"description": "ui-button-deny"
76+
},
77+
"ui-button-approve": {
78+
"prefix": "ui-button-approve",
79+
"body": [
80+
"<div class=\"ui green approve right button\">",
81+
" ${1:label}",
82+
"</div>"
83+
],
84+
"description": "ui-button-approve"
85+
},
86+
"ui-segment": {
87+
"prefix": "ui-segment",
88+
"body": [
89+
"<div class=\"ui segment\">",
90+
" ${1:contents}",
91+
"</div>"
92+
],
93+
"description": "ui-segment"
94+
},
95+
"ui-form": {
96+
"prefix": "ui-form",
97+
"body": [
98+
"<form class=\"ui form\" method=\"post\">",
99+
" ${1:contents}",
100+
"</form>"
101+
],
102+
"description": "ui-form"
103+
},
104+
"ui-header": {
105+
"prefix": "ui-header",
106+
"body": [
107+
"<div class=\"ui header\">${1:name}</div>"
108+
],
109+
"description": "ui-header"
110+
},
111+
"ui-clearing": {
112+
"prefix": "ui-clearing",
113+
"body": [
114+
"<div class=\"ui clearing divider\"></div>"
115+
],
116+
"description": "ui-clearing divider"
117+
},
118+
"ui-modal": {
119+
"prefix": "ui-modal",
120+
"body": [
121+
"<div class=\"ui modal\">",
122+
" <div class=\"header\">",
123+
" ${1:header}",
124+
" </div>",
125+
" <div class=\"content\">",
126+
" <div class=\"description\">",
127+
" ${2:content}",
128+
" </div>",
129+
" </div>",
130+
" <div class=\"actions\">",
131+
" ${3:actions}",
132+
" </div>",
133+
"</div>"
134+
],
135+
"description": "ui-modal"
41136
}
42137
}

0 commit comments

Comments
 (0)