Swish-CSS, quick mockups with classes

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!

How to use it

1. Install the package npm i swish-css
2. Import the index.scss file to your project supporting sass
3. Play with the class names!

Semantics covered

You can try different styles for Heros Sections, Logos & Brands, Cards, Footers and so on.

• $nav[0-4]
• $hero[0-4]
• $brand
• $card
• $footer

Combine different styles

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.

Examples

Raw Site

Posibilities

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]

Work In Progress

This is a side-personal project, I'll try to give love to it from time to time. Enjoy it!