Refactor grid away from flexbox and negative margins #1895
Labels
Comments
sebnitu
changed the title
sebnitu
changed the title
sebnitu
added a commit
that referenced
this issue
Jun 23, 2024
This PR is a complete overhaul of Vrembem's layout components. It removes all previous components that were primarily used as their own layout components for two more generic all purpose Grid and Flex layout components along with some shared use utilities for gap, order, justify, align and place properties. **New components** - `@vrembem/grid` - `@vrembem/flex` **New utilities** - `gap` - `justify` - `align` - `place` - `order` - `spacing` **Component changes** - Improved some menu component and removed some inconsistencies. - Updated form-control var values. - Updated base h1 font-size default. **Deprecated** - `@vrembem/grid` component which used flexbox and negative margins to achieve a column layout. This is now replaced with the grid layout based `grid` component. - `@vrembem/level` component removed in favor of new `flex` component. - `@vrembem/media` component removed in favor of new `flex` component. - `flex` utilities. These have been incorporated into the new `flex` component. - `gap`, `gap-x` and `gap-y` utilities have been refactored to control the gap property for grid and flexbox components. New `spacing` utility has been added as a replacement for vertical top margin spacing and `gap-x` has been deprecated. **Documentation improvements** - Added `demo.js`, a JS module for changing variant classes in code examples. - Added CSS tabs slot option to `<CodeExample>`. - Applied `menu_size_sm` modifier to "On this page" menu. - Added the `layout` status to package docs. - Updated `headerAnchor` module to improve styles and use icon for hash. - Added dark/light themes to box class along with new box-alt class. - Updated layout styles. Fixes: #1895
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Problem
With how well supported the css grid layout property currently is, it's time to see if it is worth refactoring the grid component. Currently
@vrembem/gridis using flexbox and negative margins to create a grid system. This feels a bit clunky, especially having to account for negative margins on the root element.Solution
I think the proper solution is to create a more general grid and flex utility. These should also include common grid/flex style combinations to reduce the amount of classes needed to achieve common layouts. These would behave differently from other utilities and should most likely remove the need for
!importantflag that most utilities have.With this change, we can deprecate the following components in favor of grid and flex utilities:
The text was updated successfully, but these errors were encountered: