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

@viewdoc/styles

v0.1.0

Published

<p align="center"> <img src="bahunya-logo.png" alt="bahunya logo"> </p>

Downloads

1

Readme

Bahunya

10KB classless CSS framework with responsive typography, navbar, syntax highlighting, and much more!

To use:

Just include the following in your head

<link rel="stylesheet" href="https://cdn.rawgit.com/kimeiga/bahunya/css/bahunya-0.1.3.css" />

Visit the website for instructions on activating the navbar and syntax highlighting.

If you have semantically correct html, it should just work! No CSS classes needed :).

To develop locally:

npm start

(which runs parcel index.html)

It will be available at localhost:1234

To build:

npm run build

(which runs parcel build index.html --out-dir docs --public-url ./)

Branches

Development is taking place on the master branch. Github Pages website is being served from the docs folder on the master branch for convenience. Minified CSS files for importing are hosted on the css branch and served with RawGit.

Mini Post-mortem

I wrote about this framework in the DevX publication on Medium!

https://medium.com/ucladevx/i-created-a-10kb-classless-css-framework-5d5eff56837d

If you are a computer science student at UCLA looking for a collection software team to hone your skills on a real-world project, feel free to apply!

http://ucladevx.com/

Thanks

Huge thanks to Yegor Bugayenko and Filipe Freire for creating Tacit, a fantastic classless CSS framework that inspired this project. I felt that Tacit was good, but I wanted responsive typography, vertical rhythm, a navbar, better web safe fonts, dark color theme, code syntax highlighting, and more. So I made Bahunya!

Tacit version 1.3.2 is 6kb, and Bahunya is 10kb, so I've only added 4kb for all these other features!

Thanks to Morris Fuller Benton for designing Century Schoolbook in 1919, Bahunya's beautiful web-safe serif headings font.

Thanks to Eric Gill for creating Gill Sans in 1926, Bahunya's elegant web-safe sans-serif body font.

Thanks to Luc(as) de Groot for designing Consolas around 2006, Bahunya's legible monospace font.

All fonts have fallbacks for Windows/Mac/Linux font diversion.