Contour offers a set of components, hooks and utility functions, that help give your app some contour. We recommend keeping your layout contour at a minimum. If you feel that you have to adjust Contour's core components, then this is either the wrong tool or you're overthinking it.
Contour was built to allow a KISS solution for layout. It closely follows the recommendations of material design and can be used in combination with Material-ui or similar libraries with ease.
Read more about the core values of Contour: https://contour-rust.vercel.app/?path=/story/introduction--page
We love Material-ui but the Grid implementation doesn't satisfy our expectations.
With v5 Material-ui added a lot of improvements. Contour picked up some beautiful parts of their API, the Grid however still has several disadvantages.
Contour is built for nesting, it inherits valuable information from its ancestor components.
Read more about it here: https://contour-rust.vercel.app/?path=/story/introduction--page#inheritance-of-column-count
Furthermore, contour allows you to switch between grid and flex.
Read more about it here: https://contour-rust.vercel.app/?path=/story/introduction--page#grid-vs-flexbox
Contour has been going through a long process of prototyping. Over ten similar systems taught us
how to build the perfect Grid (don't say perfect, it suggests that you gave up on improvement).
The main idea existed long before Material-design existed, and we are happy that some smart people came to the same conclusion as us.
The latest versions of the prototypes are built on css-variables. Due to this, we were able to keep the CSS logic at a minimum. The Core idea was built in only 11 lines of CSS.
Watch a video about the core of this library:
| version | description |
|---|---|
 |
The core components |
 |
Theming tools |
 |
Utilities tools and types |
 |
Hooks to enhance contour |