HTML5 & CSS Snippets for VS Code

⚠️ Disclaimer ⚠️

This is not the official Visual Studio Code extension. This is a community-created extension that provides HTML5 and CSS snippets to enhance your development workflow.

A comprehensive collection of HTML5 and CSS snippets for Visual Studio Code, designed to boost your productivity and follow modern web development best practices.

Features

HTML Snippets

Prefix	Description	Tab stops
`html5`	Basic HTML5 boilerplate	`$1`: Document title, `$2`: CSS file, `$3`: JS file, `$0`: Body content
`html5full`	Complete HTML5 page structure	`$1`: Document title, `$2`: CSS file, `$3-6`: Section content, `$7`: Year, `$8`: Company name, `$9`: JS file
`meta`	Complete set of meta tags	`$1`: Description, `$2`: Keywords, `$3`: Author, `$4`: Robots, `$5-8`: Open Graph tags, `$9`: Twitter card
`favicon`	Favicon and app icon links	`$1`: Safari icon color, `$2`: MS tile color, `$3`: Theme color
`form`	Basic HTML form structure	`$1`: Action URL, `$2`: Method, `$3`: Input ID, `$4`: Label text, `$5`: Input type, `$6`: Input name, `$7`: Required, `$8`: Submit text
`inputgroup`	Input group with label	`$1`: Input ID, `$2`: Label text, `$3`: Input type, `$4`: Placeholder
`textarea`	Textarea element	`$1`: Textarea ID, `$2`: Label text, `$3`: Rows, `$4`: Cols, `$5`: Content
`img`	Image tag	`$1`: Image source, `$2`: Alt text, `$3`: Title
`figimg`	Image with figure	`$1`: Image source, `$2`: Alt text, `$3`: Caption text
`video`	HTML5 video player	`$1`: Width, `$2`: Height, `$3`: Poster, `$4-5`: Video sources, `$6-7`: Subtitle tracks, `$8`: Fallback text
`audio`	HTML5 audio player	`$1-2`: Audio sources, `$3`: Lyrics track, `$4`: Fallback text
`nav`	Navigation menu	`$1,3,5`: Link URLs, `$2,4,6`: Link text
`breadcrumbs`	Breadcrumb navigation	`$1,3`: Link URLs, `$2,4`: Link text, `$5`: Current page
`pagination`	Pagination navigation	`$1,8`: Prev/Next URLs, `$2,4,6`: Page URLs, `$3,5,7`: Page numbers
`social`	Social media links	`$1,4,7`: Link URLs, `$2,5,8`: Link labels, `$3,6,9`: Icon names
`card`	Card component	`$1`: Image source, `$2`: Alt text, `$3`: Title, `$4`: Description, `$5`: Link URL, `$6`: Link text
`modal`	Modal dialog	`$1`: Modal ID, `$2`: Title, `$3`: Content, `$4`: Close text, `$5`: Action handler, `$6`: Confirm text, `$7`: Open text
`accordion`	Accordion component	`$1`: Title, `$2`: Content
`table`	Basic table	`$1-3`: Header text, `$4-6`: Cell data
`table:data`	Data table	`$1`: Table title, `$2-4`: Header text, `$5-7`: Cell data, `$8`: Footer content
`dl`	Definition list	`$1,3,5`: Terms, `$2,4,6`: Definitions
`progress`	Progress bar	`$1`: Progress ID, `$2`: Label text, `$3`: Value, `$4`: Max, `$5`: Text content
`meter`	Meter element	`$1`: Meter ID, `$2`: Label text, `$3`: Value, `$4`: Min, `$5`: Max, `$6`: Low, `$7`: High, `$8`: Optimum, `$9`: Text content
`details`	Details element	`$1`: Summary text, `$2`: Content
`blockquote`	Blockquote	`$1`: Source URL, `$2`: Quote text, `$3`: Author name
`code:block`	Code block	`$1`: Language, `$2`: Code content
`code:inline`	Inline code	`$1`: Code content
`kbd`	Keyboard input	`$1-2`: Key names
`samp`	Sample output	`$1`: Output text
`var`	Variable element	`$1`: Variable name
`mark`	Mark element	`$1`: Text content
`abbr`	Abbreviation	`$1`: Full text, `$2`: Abbreviation
`time`	Time element	`$1`: Datetime, `$2`: Display text
`ruby`	Ruby annotation	`$1`: Base text, `$2`: Ruby text
`aria`	ARIA attributes	`$1`: Role, `$2`: Label, `$3`: Description ID, `$4`: Hidden state, `$0`: Content
`data`	Data attributes	`$1`: Data type, `$2`: Type value, `$3`: Data ID, `$4`: ID value, `$0`: Content

CSS Snippets

Prefix	Description	Tab stops
`flex`	Flexbox container	`$1`: Direction, `$2`: Justify, `$3`: Align, `$4`: Wrap
`flex:center`	Center with flexbox	`$1`: Justify, `$2`: Align
`flex:item`	Flex item	`$1`: Grow, `$2`: Shrink, `$3`: Basis, `$4`: Align, `$5`: Order
`flex:wrap`	Flex wrap container	`$1`: Wrap type, `$2`: Gap, `$3`: Justify, `$4`: Align, `$5`: Align content
`flex:dir`	Flex direction	`$1`: Direction, `$2`: Wrap, `$3`: Justify, `$4`: Align
`grid`	Grid container	`$1`: Columns, `$2`: Rows, `$3`: Gap
`grid:center`	Center with grid	`$1`: Place items
`grid:areas`	Grid template areas	`$1-5`: Area names, `$6`: Columns, `$7`: Rows, `$8`: Gap
`grid:auto`	Grid auto flow	`$1`: Flow direction, `$2`: Dense, `$3`: Auto columns, `$4`: Auto rows
`grid:item`	Grid item	`$1-2`: Column span, `$3-4`: Row span, `$5`: Area name, `$6`: Justify, `$7`: Align
`media`	Media query	`$1`: Query type, `$2`: Breakpoint, `$0`: Content
`media:print`	Print media query	`$1`: Page size, `$2`: Orientation, `$3`: Margin, `$4`: Font size, `$5`: Line height, `$0`: Content
`media:dark`	Dark mode query	`$1`: Background, `$2`: Text, `$3`: Link, `$0`: Content
`media:motion`	Reduced motion	No tab stops
`container`	Container query	`$1`: Query type, `$2`: Breakpoint, `$0`: Content
`container:type`	Container type	`$1`: Type, `$2`: Name
`css:vars`	CSS variables	`$1,5,9,13,15,19,22`: Variable prefixes, `$2-4,6-8,10-12,14,16-18,20-21,23-24`: Values
`var`	CSS variable usage	`$1`: Variable name, `$2`: Fallback value
`reset`	CSS reset	`$1`: Base font size, `$2`: Line height
`text:gradient`	Text gradient	`$1`: Direction, `$2-3`: Colors
`text:stroke`	Text stroke	`$1`: Stroke width, `$2`: Stroke color
`text:shadow`	Text shadow	`$1-4`: Shadow values
`ellipsis`	Text ellipsis	`$1`: Max width
`clampfont`	Clamp font size	`$1`: Min size, `$2`: Preferred size, `$3`: Max size
`shadow`	Box shadow	`$1-4`: Shadow values
`radius`	Border radius	`$1`: Radius value
`glass`	Glass effect	`$1`: Background, `$2`: Blur, `$3`: Border width, `$4`: Border color, `$5`: Shadow
`neomorph`	Neumorphism	`$1`: Background, `$2-4`: Shadow values, `$5-6`: Shadow colors, `$7`: Radius
`filter`	Filter effects	`$1-18`: Filter values
`backdrop`	Backdrop filter	`$1-18`: Filter values
`clip`	Clip path	`$1`: Path value
`mask`	Mask image	`$1`: Image URL, `$2`: Size, `$3`: Position, `$4`: Repeat
`transition`	Transition	`$1`: Property, `$2`: Duration, `$3`: Timing
`transform`	Transform	`$1-10`: Transform values
`scale`	Scale	`$1`: Scale value
`rotate`	Rotate	`$1`: Angle
`animation`	Keyframes	`$1`: Name, `$2-4`: Keyframe values
`animate`	Animation	`$1`: Name, `$2`: Duration, `$3`: Timing, `$4`: Iteration, `$5`: Direction
`skeleton`	Skeleton loading	`$1`: Name, `$2-3`: Positions, `$4-5`: Colors, `$6`: Size, `$7`: Duration, `$8`: Iteration
`pos:abs`	Position absolute	`$1-4`: Position values
`pos:fix`	Position fixed	`$1-4`: Position values, `$5`: Z-index
`abscenter`	Absolute center	`$1-2`: Position values
`zidx`	Z-index	`$1`: Z-index value
`grid:masonry`	Masonry grid	`$1`: Column width, `$2`: Row height, `$3`: Gap, `$4`: Row span
`grid:calendar`	Calendar grid	`$1`: Days, `$2-3`: Rows, `$4`: Gap, `$5-6`: Colors, `$7`: Padding, `$8`: Height
`grid:dashboard`	Dashboard grid	`$1-5`: Area names, `$6-7`: Column sizes, `$8-9`: Row sizes, `$10`: Gap, `$11`: Height
`grid:gallery`	Gallery grid	`$1`: Column width, `$2`: Row height, `$3`: Gap, `$4-5`: Span values
`grid:form`	Form grid	`$1`: Label width, `$2-3`: Gaps, `$4`: Align, `$5`: Label align
`grid:cards`	Cards grid	`$1`: Card width, `$2`: Gap, `$3`: Padding, `$4-5`: Row sizes, `$6`: Content gap, `$7`: Card padding, `$8`: Radius, `$9`: Shadow
`grid:timeline`	Timeline grid	`$1`: Label width, `$2`: Gap, `$3-4`: Line position, `$5`: Line width, `$6`: Line color, `$7`: Item padding, `$8`: Background, `$9`: Radius, `$10`: Shadow
`grid:pricing`	Pricing grid	`$1`: Card width, `$2`: Gap, `$3`: Padding, `$4-5`: Row sizes, `$6`: Content gap, `$7`: Card padding, `$8`: Text align, `$9`: Radius, `$10`: Shadow, `$11`: Transition, `$12`: Hover transform
`grid:testimonials`	Testimonials grid	`$1`: Card width, `$2`: Gap, `$3`: Padding, `$4-5`: Row sizes, `$6`: Content gap, `$7`: Card padding, `$8`: Background, `$9`: Radius, `$10`: Shadow, `$11`: Quote mark, `$12`: Quote size, `$13`: Quote color
`visually-hidden`	Visually hidden	`$1-6`: Position values
`focus`	Focus styles	`$1-4`: Outline values
`print`	Print styles	`$1-8`: Print values
`selection`	Selection styles	`$1-3`: Selection values
`placeholder`	Placeholder styles	`$1-2`: Placeholder values
`scrollbar:custom`	Custom scrollbar	`$1-6`: Scrollbar values
`counter`	CSS counter	`$1`: Counter name
`aspect`	Aspect ratio	`$1-2`: Ratio values
`opacity`	Opacity	`$1`: Opacity value

Usage

Install the extension
Open an HTML or CSS file
Type the prefix of the snippet you want to use
Press Tab or Enter to insert the snippet
Use Tab to navigate through the placeholders

Requirements

Visual Studio Code 1.60.0 or higher

Known Issues

None at the moment

Release Notes

See CHANGELOG.md for a complete list of changes.

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Inspired by various web development best practices and modern design patterns
Special thanks to the VS Code team for their excellent extension API
Gratitude to the web development community for sharing knowledge and best practices
Thanks to all users who have provided feedback and suggestions
Inspired by popular frameworks and libraries that have shaped modern web development

HTML5 & CSS Snippets

SMIT_PATEL_SP