Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 17 days 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 (20 days ago)
Default Branch: main
Last Pushed: 2024-10-24T02:50:30.000Z (20 days ago)
Last Synced: 2024-10-24T07:20:19.488Z (20 days 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

[![Version](https://img.shields.io/visual-studio-marketplace/v/riturajps.html-snippets-pro?color=blue&label=VS%20Code%20Marketplace&logo=visual-studio-code&style=flat)](https://marketplace.visualstudio.com/items?itemName=riturajps.html-snippets-pro)

[![License](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat)](LICENSE)

![HTML Snippets Pro Banner](assets/logo.png)



## ✨ 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                                  |

[View Full 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

[![Install from Marketplace](https://img.shields.io/badge/Install%20from-Marketplace-blue.svg)](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



  

    

      

    

    

      


        

Name : Ritu Raj Pratap Singh

        

GitHub : @theriturajps



        

VS Code Marketplace : riturajps



      

    

  



---



### 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)