@guyn-style/patterns
0.1.0-alpha.9 • Public • Published
Patterns
Patterns can be handy for decorational use, thats why it doesn't come by default but you can enable them.
Define the colors and settings with css custom properties.
/* Sizing */
--pattern-size: 0.75rem;
--pattern-spacing: 0.2rem;
/* Color */
--pattern-color-primary: #1eb3e0;
--pattern-color-secondary: #460537;
<style lang="scss">
.patterns{
display: grid;
grid-template-columns: 50% 50%;
--pattern-color-primary: #1eb3e0;
--pattern-color-secondary: #460537;
}
.pattern-1{
--pattern-size: .75rem;
--pattern-spacing: .2rem;
}
div[class^="pattern-"] {
width: 100%; height: 0; padding-bottom: 100%;
}
</style>
Versions
Current Tags
Version History
Package Sidebar
Install
npm i @guyn-style/patterns
Weekly Downloads