Community Examples

Examples from people just like you!

If you've got an example of something that you've done with glamorous that doesn't really work on one of the other pages, then please feel free to open a pull request on this page!

CSS Grid

The best solution for CSS layout

CSS Grid Layout is a relatively new layout tool for the web. It's incredibly powerful and expressive and enables new layouts that were previously very difficult or altogether impossible.

In this example, we use the @supports feature of CSS to opt-into CSS Grid in browsers where this is available. Be warned that not all browsers will support @supports.


Accept style overrides

How to expose an API to override styles in a component

This demonstrates one way that you could take a reusable component and expose a mechanism for overriding styles for components within the component using a prop called styleOverrides.

The key bit here is passing styleOverrides to the theme prop of the glamorous ThemeProvider. Because you may still need to use the theme for other things, it's nice to namespace these (like this example does).

Then you can write a little helper function (getStyleOverrides) to make adding this overrides capability to each of your glamorous components. It even works with the css prop!



Simple styled button

Something as simple as a button can have a lot of style packed into it. This example shows how to isolate all the style logic using glamorous so you can easily use your beautiful button anywhere in your app.



kentcdodds's GitHub avatardanseethaler's GitHub avatar