npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

harso-css

v4.0.0

Published

A CSS Framework to make beautiful pages in a few class names

Downloads

27

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

sreehari.ssreehari.s

Keywords

CSScssharsoLibraryJavaJavaScriptjavascriptjava scriptreactReactVueAngularHTMLWebWebsiteA CSS libraryA CSS library to helpyour libraryBoostrapbootstraplanguageCSS3

Readme

Welcome to harso-css

What is this library?

  • This Library is A Superr CSS3 Library
  • A CSS Framework that helps you to make your pages Cool!!

Installation

  • Install via npm: npm i harso-css
  • Install via CDN: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/harso.css">

Documentation

Fonts

The first thing that this library include is it will automatically gives margin and padding as 0

This can change your font-family only with a classname

Example :<body class="sans-serif"></body> => This will set the font family to sans-serif for every content inside the body

The fonts that we can use are : sans-serif, cursive, monospace, consolas, fantasy

Colors

Blue Text = <h3 class="blue">Blue Text</h3>

Red Text = <h3 class="red">Red Text</h3>

Yellow Text = <h3 class="yellow">Yellow Text</h3>

White Text = <h3 class="white">White Text</h3>

Green Text = <h3 class="green">Green Text</h3>

Light Green Text = <h3 class="light-green">Light Green Text</h3>

There are more colors like this, that light-blue, royal-blue, dark, brown, pink, plum, violet, purple, and orange

Note: You can just add the prefix bg- to the color classnames for getting that bg(background) instead of color

Some Others...

Give this classname to an a tag : a-no-decr, then it don't have any text-decoration

Look that how you can create a nav-bar with harso-css in the Examples\NavBar\index.html

class name text-center will make the text in the center

class name center will gives you display as flex, align-items as center, justify-content as center and min-height as 100vh

Animations

Give this classname to a tag : rainbow-bg-infinite, then the bg of that element will have a rainbow animation forever

Give this classname to a tag : rainbow-bg-one-time-only, then the bg of that element will have a rainbow animation for one time

Give this classname to a tag : rainbow-text-infinite, then the color of that element will have a rainbow animation forever

Give this classname to a tag : rainbow-text-one-time-only, then the color of that element will have a rainbow animation for one time

Buttons

We have many buttons, you can look it in here

<button class="btn btn-danger">Hi</button>

<button class="btn btn-info">Hi</button>

<button class="btn btn-warning">Hi</button>

<button class="btn btn-fill">Hi</button>

<button class="btn btn-border">Hi</button>

Transitions

class name trans-0 = transition: 0s;

class name trans-0dot1 = transition: 0.1s;

like this we have trans-0dot2, trans-0dot3, trans-0dot4, trans-0dot5, trans-0dot6, trans-0dot7, trans-0dot8, trans-0dot9, trans-1, trans-1dot1, trans1dot2, trans-1dot3, trans-1dot4, trans-1dot5, trans-1dot6, trans-0dot7, trans-1dot8, trans-1dot9, trans-2, trans-2dot1 trans-2dot2, trans-2dot3, tans-2dot4, trans-2dot5, trans-2dot6, trans-2dot7, trans-2dot9, trans-3

Opacity

class name op-0 = opacity: 0s;

class name op-0dot1 = opacity: 0.1s;

class name op-0dot2 = opacity: 0.2s;

class name op-0dot3 = opacity: 0.3s;

class name op-0dot4 = opacity: 0.4s;

class name op-0dot5 = opacity: 0.5s;

class name op-0dot6 = opacity: 0.6s;

class name op-0dot7 = opacity: 0.7s;

class name op-0dot8 = opacity: 0.8s;

class name op-0dot9 = opacity: 0.9s;

class name op-1 = opacity: 1s;

Our contributers...