Better visualization of CSS Flexbox and Grid properties, color-coded for easy identification of containers and children, including shared properties.
Rule of thumb:
- Blue background = is a flexbox property
- Red background = is a grid property
- Yellow background = is a shared property (flexbox & grid)
- Dotted border = is a container/parent property
- Open any CSS, SCSS, or LESS file.
- The extension automatically highlights flex/grid properties according to the above scheme.
- Shared properties (
align-items,justify-content, etc.) are highlighted in yellow.
I often find myself confused about whether a property applies to flexbox or grid, so I created this extension to help me quickly identify them while coding. Feel free to use it if you find it helpful!
layoutLens.enableCommon: Toggle the visibility of shared properties among flex and grid (default:false).layoutLens.enableFlexbox: Toggle the visibility of flexbox properties (default:true).layoutLens.enableGrid: Toggle the visibility of grid properties (default:true).
The terrific icon used in this extension was made by me, and I hereby release it into the public domain. Feel free to use it for any purpose, if you have a better one, please open a PR.
All notable changes to the "layout-lens" extension will be documented in the file CHANGELOG.md.
Please report any issues or feature requests on the GitHub repository.
MIT