swish-css

1.0.2 • Public • Published

Swish-CSS, quick mockups with classes

npm package

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

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.

Hero Section with Nav example

Same as before with $hero-3 on section tag and $luxury class added to body tag.

Luxury class styles applied

Scrolling to Cards Section with $glossy class on body tag (try the $fancy style for this section, it's cool and has animations).

Glossy class styles applied

Scrolling to Footer section with $fancy class on body tag.

Fancy class styles applied

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

Mobile Fancy class styles view in Light Mode

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!

Package Sidebar

Install

npm i swish-css

Weekly Downloads

1

Version

1.0.2

License

ISC

Unpacked Size

270 kB

Total Files

91

Last publish

Collaborators

  • giustiro