Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theriturajps/html-snippets-pro
Complete HTML & HTML5 code snippets for faster development
https://github.com/theriturajps/html-snippets-pro
extension html html-snippet html5 snippets theriturajps vscode vscode-extension vscode-snippets
Last synced: 2 months ago
JSON representation
Complete HTML & HTML5 code snippets for faster development
- Host: GitHub
- URL: https://github.com/theriturajps/html-snippets-pro
- Owner: theriturajps
- License: other
- Created: 2024-10-23T19:53:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T02:50:30.000Z (4 months ago)
- Last Synced: 2024-10-28T06:31:37.464Z (4 months ago)
- Topics: extension, html, html-snippet, html5, snippets, theriturajps, vscode, vscode-extension, vscode-snippets
- Homepage: https://marketplace.visualstudio.com/items?itemName=riturajps.html-snippets-pro
- Size: 19.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/funding.yml
- License: LICENSE
Awesome Lists containing this project
README
# HTML Snippets Pro
### Complete HTML & HTML5 code snippets for faster development
[](https://marketplace.visualstudio.com/items?itemName=riturajps.html-snippets-pro)
[](LICENSE)
## ✨ Features
Transform your HTML coding experience with powerful features:
### Core Features
- 🏃♂️ **Lightning Fast Snippets**: Type and insert common HTML patterns instantly
- 📱 **Responsive Templates**: Mobile-first design patterns
- ♿ **Accessibility Ready**: ARIA landmarks and semantic HTML included
- 🎨 **Modern Markup**: Latest HTML5 elements and structures
### Developer Experience
- 📝 **IntelliSense Support**: Smart suggestions as you type
- 🔍 **Smart Completion**: Context-aware code completion
- 🎯 **Tab Stops**: Quickly navigate through important code points
- 🔄 **Dynamic Updates**: Regular new snippet additions
## 📚 Available Snippets
| Prefix | Description |
| ------------------ | ----------------------------------------------------------------------- |
| `!` | HTML5 basic structure |
| `html5:full` | HTML5 complete structure with header, main, footer |
| `meta:all` | Complete set of common meta tags including SEO and social media |
| `nav:responsive` | Responsive navigation bar with toggle button |
| `form:contact` | Contact form with common fields and styling classes |
| `cards` | Card component with image, title, text, and button |
| `hero` | Hero section with title, text, and CTA buttons |
| `table:responsive` | Responsive table with wrapper |
| `modal` | Accessible modal dialog |
| `grid` | CSS Grid container with items |
| `flex` | Flexbox container with items |
| `input:group` | Input group with label and help text |
| `video:responsive` | Responsive video container |
| `footer:full` | Full footer with multiple sections |
| `script:all` | Common script tag variations with best practices |
| `a11y:landmarks` | Common accessibility landmarks with ARIA roles |
| `cookie:banner` | GDPR compliant cookie consent banner |
| `skeleton` | Loading skeleton placeholder |
| `search:advanced` | Advanced search bar with suggestions support |
| `accordion` | Accessible accordion component |
| `testimonial-card` | Testimonial card with quote and author |
| `pricing-table` | Pricing table card |
| `timeline` | Vertical timeline component |
| `stats-counter` | Animated statistics counter |
| `image-gallery` | Responsive image gallery with lightbox |
| `file-upload` | Drag and drop file upload component |
| `breadcrumbs` | Accessible breadcrumb navigation |
| `error-404` | 404 error page template |
| `doctype` | the document type |
| `a` | a hyperlink |
| `abbr` | an abbreviation |
| `address` | an address element |
| `area` | an area inside an image map |
| `article` | an article |
| `aside` | content aside from the page content |
| `audio` | sounds content |
| `b` | bold text |
| `base` | a base URL for all the links in a page |
| `bdi` | Used to isolate text that is of unknown directionality |
| `bdo` | the direction of text display |
| `big` | Used to make text bigger |
| `blockquote` | a long quotation |
| `body` | the body element |
| `br` | Inserts a single line break |
| `button` | a push button |
| `canvas` | graphics |
| `caption` | a table caption |
| `cite` | a citation |
| `code` | computer code text |
| `col` | attributes for table columns |
| `colgroup` | group of table columns |
| `command` | a command button [not supported] |
| `datalist` | a dropdown list |
| `dd` | a definition description |
| `del` | deleted text |
| `details` | details of an element |
| `dialog` | a dialog (conversation) |
| `dfn` | a definition term |
| `div` | a section in a document |
| `dl` | a definition list |
| `dt` | a definition term |
| `em` | emphasized text |
| `embed` | external interactive content or plugin |
| `fieldset` | a fieldset |
| `figcaption` | a caption for a figure |
| `figure` | a group of media content, and their caption |
| `footer` | a footer for a section or page |
| `form` | a form |
| `h1` | header 1 |
| `h2` | header 2 |
| `h3` | header 3 |
| `h4` | header 4 |
| `h5` | header 5 |
| `h6` | header 6 |
| `head` | information about the document |
| `header` | a header for a section or page |
| `hgroup` | information about a section in a document |
| `hr` | a horizontal rule |
| `html` | an html document |
| `i` | italic text |
| `iframe` | an inline sub window |
| `img` | an image |
| `input` | an input field |
| `ins` | inserted text |
| `keygen` | a generated key in a form |
| `kbd` | keyboard text |
| `label` | an inline window |
| `legend` | a title in a fieldset |
| `li` | a list item |
| `link` | a resource reference |
| `main` | the main content of a document |
| `map` | an image map |
| `mark` | marked text |
| `menu` | a menu list |
| `menuitem` | a menu item [Firefox only] |
| `meta` | meta information |
| `meter` | measurement within a predefined range |
| `nav` | navigation links |
| `noscript` | a noscript section |
| `object` | an embedded object |
| `ol` | an ordered list |
| `optgroup` | an option group |
| `option` | an option in a drop-down list |
| `output` | some types of output |
| `p` | a paragraph |
| `param` | a parameter for an object |
| `pre` | preformatted text |
| `progress` | progress of a task |
| `q` | a short quotation |
| `rp` | Used in ruby annotations to define what to show in unsupported browsers |
| `rt` | explanation to ruby annotations |
| `ruby` | ruby annotations |
| `s` | Used to define strikethrough text |
| `samp` | sample computer code |
| `script` | a script |
| `section` | a section |
| `select` | a selectable list |
| `small` | small text |
| `source` | media resource |
| `span` | a section in a document |
| `strong` | strong text |
| `style` | a style definition |
| `sub` | sub-scripted text |
| `sup` | super-scripted text |
| `summary` | a visible heading for the detail element [limited support] |
| `table` | a table |
| `tbody` | a table body |
| `td` | a table cell |
| `textarea` | a text area |
| `tfoot` | a table footer |
| `thead` | a table head |
| `th` | a table header |
| `time` | a date/time |
| `title` | the document title |
| `tr` | a table row |
| `track` | a track for media files |
| `u` | Used to define underlined text |
| `ul` | an unordered list |
| `var` | a variable |
| `video` | a video |
[View All Snippet List →](https://github.com/theriturajps/html-snippets-pro/wiki/snippets)
## ⚡ Quick Start
Get started in 3 easy steps:
1. Install the extension
2. Open an HTML file
3. Type `!` and press `Tab` for basic HTML5 boilerplate
## 📦 Installation
### Via VS Code (Smart Way)
1. Launch VSCode
2. Press `Ctrl+P` / `Cmd+P`
3. Run: `ext install riturajps.html-snippets-pro`
### Via VS Code (Alternate Way)
1. Open **VSCode**.
2. Go to the `Extensions` view by clicking on the Extensions icon in the Activity Bar on the side of the window.
3. Search for `HTML Snippets Pro` (Ritu Raj).
4. Click `Install`.
### Via Marketplace
[](https://marketplace.visualstudio.com/items?itemName=riturajps.html-snippets-pro)
## ⚙️ Configuration
### Extension Settings
```json
{
"html.snippets.triggerOnSpace": true,
"html.snippets.showExpandedAbbreviation": "always"
}
```
### Customization
You can override snippets in your `settings.json`:
```json
{
"html.snippets.customSnippets": {
"!": "Your custom boilerplate"
}
}
```
## 🤝 Contributing
We love your input! Want to contribute?
1. 🍴 Fork the repo
2. 🌿 Create a branch (`git checkout -b feature/amazing`)
3. 📝 Make changes
4. ✅ Commit (`git commit -m 'Added amazing feature'`)
5. 📌 Push (`git push origin feature/amazing`)
6. 🔄 Open a Pull Request
[Contributing Guidelines →](CONTRIBUTING.md)
## 📝 License
Released under the [MIT License](LICENSE).
## 👨💻 Developer
---
### Show your support
⭐️ Star this repo if you found it helpful!
[Report Bug](https://github.com/theriturajps/html-snippets-pro/issues) · [Request Feature](https://github.com/theriturajps/html-snippets-pro/issues) · [Contribute](https://github.com/theriturajps/html-snippets-pro/CONTRIBUTING.md)
