RocketUI - Snippets of common UI elements

Raw HTML + CSS snippets of common UI components. No frameworks nor libraries needed.

Features

• Ready-to-use snippets to easily insert common UI components in your front-end projects.
• UI library reference available on inarocket.com/resources.
• Figma file available on inarocket.com/resources.

Quick start

1. Open or create an HTML file and start coding.
2. Start typing 're-' and a list of snippets will show up.
3. Select the snippet you need. Its code will be inserted at cursor position.
4. Move the code marked as CSS to your project's stylesheet.

Using RocketUI on Visual Studio Code:

RocketUI library reference screenshot:

Figma file screenshot:

The goal of this extension is to help:

• front-end development beginners to learn how to build common UI with raw HTML & CSS.
• front-end development professionals that don't want/need a CSS framework to quickly build web interfaces being more productive.

Known Issues

The element 'Form: Multiple options' does not work properly yet. Will be fixed in future releases. Sorry for the inconvenience.

Release Notes

1.0.1

• Layout snippets removed. They will be available in our new extension RocketGrids (common CSS Grid layouts snippets).
• Icon changed. Now is better identified as a UI building tool.
• Readme improved. 'Quick start' steps are now clearer.
• Screenshots updated.

1.0.0

Initial release of this extension.

About

• Web: In a Rocket: Learn front-end development at rocket speed.
• Author: Miguel Sánchez.