Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wscats/html-snippets
Full HTML tags including HTML5 Snippets.
https://github.com/wscats/html-snippets
html html5-canvas snippets vscode-extension
Last synced: about 1 month ago
JSON representation
Full HTML tags including HTML5 Snippets.
- Host: GitHub
- URL: https://github.com/wscats/html-snippets
- Owner: Wscats
- License: mit
- Created: 2020-12-02T07:03:54.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2020-12-11T12:50:45.000Z (almost 4 years ago)
- Last Synced: 2024-10-02T08:13:00.559Z (about 1 month ago)
- Topics: html, html5-canvas, snippets, vscode-extension
- Homepage:
- Size: 188 KB
- Stars: 50
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Using
Just enter the prefix name, and the complete code snippet will be automatically completed.
```html
div →
doc →
```
```javascript
imp → import xxx from xxx;
clo → console.log(xxx);
```
```css
col → color: #000;
bg → background: #fff;
```
# HTML/Pug/Jade
| Prefix | Snippets |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| doctype | `$1` |
| a | `$2$3` |
| abbr | `$2$3` |
| address | `
$1` |
| area | `$5` |
| article | `$1` |
| aside | `$1$2` |
| audio | `$1` |
| b | `$1$2` |
| base | `$3` |
| bdi | `$1$2` |
| bdo | `$2` |
| big | `$1$2` |
| blockquote | `$1
` |
| body | `$1` |
| br | `
` |
| button | `$2$3` |
| canvas | `$2$3` |
| caption | `$1$2` |
| cite | `$1$2` |
| code | `$1$2` |
| col | `$2` |
| colgroup | `$1` |
| command | `$1$2` |
| datalist | `$1` |
| dd | `| del | `
| details | `$1` |
| dialog | `$1$2` |
| dfn | `$1$2` |
| div | `
| dl | `
- $1
| dt | `
| em | `$1$2` |
| embed | `$2` |
| fieldset | `$1` |
| figcaption | `$1$2` |
| figure | `$1` |
| footer | `$1` |
| form | `$1` |
| h1 | `
$1
$2` || h2 | `
$1
$2` || h3 | `
$1
$2` || h4 | `
$1
$2` || h5 | `
$1
$2` || h6 | `
$1
$2` || head | `$1` |
| header | `$1` |
| hgroup | `$1` |
| hr | `
` |
| html | `$1` |
| html5 | `$2$4` |
| i | `$1$2` |
| iframe | `$2$3` |
| img | `
| input | `$4` |
| ins | `$1$2` |
| keygen | `$2` |
| kbd | `$1$2` |
| label | `$2$3` |
| legend | `$1$2` |
| li | `
| link | `$4` |
| main | `$1` |
| map | `$2` |
| mark | `$1$2` |
| menu | `$1` |
| menuitem | `$1$2` |
| meta | `$3` |
| meter | `$2$3` |
| nav | `$1` |
| noscript | `$1` |
| object | `$4$5` |
| ol | `
- $1
| optgroup | `$1` |
| option | `$2$3` |
| output | `$3$4` |
| p | `
$1
$2` || param | `$3` |
| pre | `
$1` |
| progress | `$3$4` |
| q | `$1$2` |
| rp | `$1$2` |
| rt | `$1$2` |
| ruby | `$1` |
| s | `$1$2` |
| samp | `$1$2` |
| script | `$1` |
| section | `$1` |
| select | `$1` |
| small | `$1$2` |
| source | `$3` |
| span | `$1$2` |
| strong | `$1$2` |
| style | `$1` |
| sub | `$1$2` |
| sup | `$1$2` |
| summary | `$1$2` |
| table | `$1` |
| tbody | `$1` |
| td | `$1$2` |
| textarea | `$3$4` |
| tfoot | `$1` |
| thead | `$1` |
| th | `$1$2` |
| time | `$3` |
| title | `$1$2` |
| tr | `$1$2` |
| track | `$5` |
| u | `$1$2` |
| ul | `
- $1
| var | `$1$2` |
| video | `$3` |
# JavaScript/Typescript
| Prefix | Snippets |
| -------- | ------------------------------------------------------------------------- |
| `imp→` | `import fs from 'fs';` |
| `imn→` | `import 'animate.css'` |
| `imd→` | `import {rename} from 'fs';` |
| `ime→` | `import * as localAlias from 'fs';` |
| `ima→` | `import { rename as localRename } from 'fs';` |
| `rqr→` | `require('');` |
| `req→` | `const packageName = require('packageName');` |
| `mde→` | `module.exports = {};` |
| `env→` | `export const nameVariable = localVariable;` |
| `enf→` | `export const log = (parameter) => { console.log(parameter);};` |
| `edf→` | `export default function fileName (parameter){ console.log(parameter);};` |
| `ecl→` | `export default class Calculator { };` |
| `ece→` | `export default class Calculator extends BaseClass { };` |
| `con→` | `constructor() {}` |
| `met→` | `add() {}` |
| `pge→` | `get propertyName() {return value;}` |
| `pse→` | `set propertyName(value) {}` |
| `fre→` | `array.forEach(currentItem => {})` |
| `fof→` | `for(const item of object) {}` |
| `fin→` | `for(const item in object) {}` |
| `anfn→` | `(params) => {}` |
| `nfn→` | `const add = (params) => {}` |
| `dob→` | `const {rename} = fs` |
| `dar→` | `const [first, second] = [1,2]` |
| `sti→` | `setInterval(() => {});` |
| `sto→` | `setTimeout(() => {});` |
| `prom→` | `return new Promise((resolve, reject) => {});` |
| `thenc→` | `.then((res) => {}).catch((err) => {});` |
| `cas→` | `console.assert(expression, object)` |
| `ccl→` | `console.clear()` |
| `cco→` | `console.count(label)` |
| `cdb→` | `console.debug(object)` |
| `cdi→` | `console.dir` |
| `cer→` | `console.error(object)` |
| `cgr→` | `console.group(label)` |
| `cge→` | `console.groupEnd()` |
| `clg→` | `console.log(object)` |
| `clo→` | `console.log('object :>> ', object);` |
| `ctr→` | `console.trace(object)` |
| `cwa→` | `console.warn` |
| `cin→` | `console.info` |
| `clt→` | `console.table` |
| `cti→` | `console.time` |
| `cte→` | `console.timeEnd` |
# CSS/Sass/Less/Stylus
| Prefix | Snippets |
| -------- | -------------------------------------------------- |
| `ai` | `align-items : flex-start;` |
| `aib` | `align-items : baseline;` |
| `aic` | `align-items : center;` |
| `aifs` | `align-items : flex-start;` |
| `aife` | `align-items : flex-end;` |
| `ais` | `align-items : stretch;` |
| `as` | `align-self : flex-start;` |
| `ani` | `animation : name 1s linear;` |
| `anide` | `animation-delay : 1s;` |
| `anidi` | `animation-direction : alternate;` |
| `anidu` | `animation-duratuion : 1s;` |
| `anifm` | `animation-fill-mode : forwards;` |
| `aniic` | `animation-iteration-count: infinite;` |
| `anin` | `animation-name : name;` |
| `anips` | `animation-play-state : paused;` |
| `anitf` | `animation-timing-function: linear;` |
| `bg` | `background : #fff;` |
| `bga` | `background-attachment : fixed;` |
| `bgc` | `background-color : #fff;` |
| `bgcl` | `background-clip : border-box;` |
| `bgi` | `background-image : url("background.jpg");` |
| `bgo` | `background-origin : border-box;` |
| `bgp` | `background-position : left top;` |
| `bgr` | `background-repeat : no-repeat;` |
| `bgrr` | `background-repeat : repeat;` |
| `bgrx` | `background-repeat : repeat-x;` |
| `bgry` | `background-repeat : repeat-y;` |
| `bgrn` | `background-repeat : no-repeat;` |
| `bgs` | `background-size : cover;` |
| `bor` | `border : 1px solid #000;` |
| `born` | `border : none;` |
| `borc` | `border-color : #000;` |
| `bors` | `border-style : solid;` |
| `borw` | `border-width : 1px;` |
| `borb` | `border-bottom : 1px solid #000;` |
| `borl` | `border-left : 1px solid #000;` |
| `borr` | `border-right : 1px solid #000;` |
| `bort` | `border-top : 1px solid #000;` |
| `br` | `border-radius : 2px;` |
| `bot` | `bottom : 0;` |
| `bos` | `box-shadow : 1px 1px 1px 1px rgba(0, 0, 0, .5);` |
| `boz` | `box-sizing : border-box;` |
| `clr` | `clear : both;` |
| `col` | `color : #000;` |
| `con` | `content : '';` |
| `cur` | `cursor : auto;` |
| `curp` | `cursor : pointer;` |
| `curd` | `cursor : default;` |
| `dis` | `display : none;` |
| `disb` | `display : block;` |
| `disi` | `display : inline-block;` |
| `disn` | `display : none;` |
| `disf` | `display : flex;` |
| `flex` | `flex : 1 1 auto;` |
| `fle` | `flex : 1 1 auto;` |
| `fld` | `flex-direction : row;` |
| `fldr` | `flex-direction : row;` |
| `fldc` | `flex-direction : column;` |
| `flf` | `flex-flow : row, wrap;` |
| `flw` | `flex-wrap : wrap;` |
| `fl` | `float : left;` |
| `fll` | `float : left;` |
| `flr` | `float : right;` |
| `fln` | `float : none;` |
| `ff` | `font-family : arial;` |
| `fz` | `font-size : 12px;` |
| `fst` | `font-style : italic;` |
| `fsti` | `font-style : italic;` |
| `fstn` | `font-style : normal;` |
| `fsto` | `font-style : oblique;` |
| `fw` | `font-weight : bold;` |
| `fwb` | `font-weight : bold;` |
| `fwl` | `font-weight : light;` |
| `fwn` | `font-weight : normal;` |
| `ft` | `font : 12px/1.5;` |
| `hei` | `height : 1px;` |
| `jc` | `justify-content : flex-start;` |
| `jcfe` | `justify-content : flex-end;` |
| `jcfs` | `justify-content : flex-start;` |
| `jcc` | `justify-content : center;` |
| `jcsa` | `justify-content : space-around;` |
| `jcsb` | `justify-content : space-between;` |
| `lis` | `list-style : disc outside;` |
| `lisp` | `list-style-position : outside;` |
| `list` | `list-style-type : disc;` |
| `listc` | `list-style-type : circle;` |
| `listd` | `list-style-type : disc;` |
| `listlr` | `list-style-type : lower-roman;` |
| `listn` | `list-style-type : none;` |
| `lists` | `list-style-type : square;` |
| `listur` | `list-style-type : upper-roman;` |
| `lef` | `left : 0;` |
| `lh` | `line-height : 1.5;` |
| `ls` | `letter-spacing : 2px;` |
| `lsn` | `letter-spacing : normal;` |
| `mar` | `margin : 0;` |
| `marb` | `margin-bottom : 0;` |
| `marl` | `margin-left : 0;` |
| `marr` | `margin-right : 0;` |
| `mart` | `margin-top : 0;` |
| `mara` | `margin : 0 auto;` |
| `mih` | `min-height : 1px;` |
| `miw` | `min-width : 1px;` |
| `mah` | `max-height : 1px;` |
| `maw` | `max-width : 1px;` |
| `opa` | `opacity : 0;` |
| `ov` | `overflow : visible;` |
| `ova` | `overflow : auto;` |
| `ovh` | `overflow : hidden;` |
| `ovs` | `overflow : scroll;` |
| `ovv` | `overflow : visible;` |
| `pad` | `padding : 0;` |
| `padb` | `padding-bottom : 0;` |
| `padl` | `padding-left : 0;` |
| `padr` | `padding-right : 0;` |
| `padt` | `padding-top : 0;` |
| `pos` | `position : relative;` |
| `posa` | `position : absolute;` |
| `posf` | `position : fixed;` |
| `posr` | `position : relative;` |
| `poss` | `position : sticky;` |
| `rig` | `right : 0;` |
| `ta` | `text-align : center;` |
| `tac` | `text-align : center;` |
| `tal` | `text-align : left;` |
| `tar` | `text-align : right;` |
| `td` | `text-decoration : none;` |
| `tdu` | `text-decoration : underline;` |
| `tdn` | `text-decoration : none;` |
| `tdl` | `text-decoration : line-through;` |
| `ti` | `text-indent : 2em;` |
| `ts` | `text-shadow : 1px 1px 1px 1px rgba(0, 0, 0, .5);` |
| `tt` | `text-transform : capitalize;` |
| `top` | `top : 0;` |
| `va` | `vertical-align : baseline;` |
| `vab` | `vertical-align : bottom;` |
| `vam` | `vertical-align : middle;` |
| `vat` | `vertical-align : top;` |
| `vis` | `visibility : visible;` |
| `visv` | `visibility : visible;` |
| `vish` | `visibility : hidden;` |
| `wb` | `word-break : break-all;` |
| `wid` | `width : 0;` |
| `wida` | `width : auto;` |
| `ws` | `white-space : nowrap;` |
| `wsn` | `white-space : nowrap;` |
| `wsp` | `white-space : pre;` |
| `ww` | `word-wrap : break-word;` |
| `zi` | `z-index : -1;` |
| `imp` | `@import 'filename';` |
| `inc` | `@include mixin;` |
| `key` | `@keyframes name {};` |
| `med` | `@media screen and (max-width: 300px) {}` |
| `mix` | `@mixin name {}` |
| `!` | `!important` |
| `i` | `!important` |
## License
[HTML/CSS/JavaScript Snippets](https://github.com/Wscats/html-snippets) is released under the MIT.