css-fx-layout Snippets for VS Code

This extension provides a set of handy snippets for css-fx-layout, a lightweight and modular SCSS flexbox library inspired by Angular's Flex-Layout.

Features

• Rapid Development: Speed up your coding process with easy-to-use snippets.
• Flexbox Made Simple: Utilize CSS classes or data-attributes to quickly implement flexbox designs.
• Responsive Layouts: Create responsive layouts with predefined breakpoints.
• Versatile Selectors: Choose between CSS classes and HTML data-attributes for layout control.

Installation

1. Open VS Code.
2. Go to the Extensions view by clicking on the square icon in the sidebar or pressing Ctrl+Shift+X.
3. Search for css-fx-layout Snippets.
4. Click on the install button.

Snippets

Here are some of the snippets provided by this extension:

• data-layout, data-layout-align: HTML attributes for flexbox control.
• data-layout-gap: Attribute for gaps in flex containers.
• data-hide-, data-show-: Control visibility based on screen size.
• data-flex: Control flex behavior of an element.

Usage

To use a snippet, start typing the prefix in your HTML or CSS file, and the corresponding snippet suggestions will appear. Select the one you need and press Enter to insert it.

Contributing

Contributions to enhance these snippets or add new ones are welcome. Please submit your pull requests or issues on the GitHub repository.

License

This extension is released under the MIT License.

Enjoy!