This is a SCSS library to convert your starter web projects into beautifull mockup site. Responsive, Light and Dark themes and fully combinable styles to play with!
- Install the package npm i swish-css
- Import the index.scss file to your project supporting sass
- Play with the class names!
You can try different styles for Heros Sections, Logos & Brands, Cards, Footers and so on.
- $nav[0-4]
- $hero[0-4]
- $brand
- $card
- $footer
Try any of the following web-styles to match what you're looking for, or just for fun and get inspired
- $rounded[0-3]
- $glossy[0-3]
- $luxury
- $fancy
It will generate different encoded assets, for example, in mobile devices, the navs component will be wrapped as a dropdown menu with the tipic menu icon automaticlly.
](https://postimg.cc/yJgn1kkQ)
The same exact HTML code with the index.scss imported (the project must support sass), $hero-1 and $nav-1 class added to corresponding tags.
Same as before with $hero-3 on section tag and $luxury class added to body tag.
Scrolling to Cards Section with $glossy class on body tag (try the $fancy style for this section, it's cool and has animations).
Scrolling to Footer section with $fancy class on body tag.
And so on...
You can play with the HTML structure provided in the package.
Oh, and remember all this snaps, are responsive and has Light/Dark support
You can combine multiple styles applying the mentioned classes on different sections/divs/articles etc. Also, there are few components customizables like $buttons[0-5] and $badges[0-5]
This is a side-personal project, I'll try to give love to it from time to time. Enjoy it!