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 🙏

© 2025 – Pkg Stats / Ryan Hefner

fyshi.css

v2.0.1

Published

A simple mini CSS-library for Vue and other frontend frameworks.

Downloads

57

Readme

Fyshi.CSS v2.0.0

Fyshi.CSS is a utility-first CSS library designed for rapid development and easy-to-maintain styles. With a focus on lightweight design and powerful utilities, version 2.0.0 introduces breaking changes and new features to enhance usability and maintainability.


What's New in 2.0.0?

Version 2.0.0 introduces several key changes and improvements:

  • Updated Class Naming Conventions: Simplified and more descriptive names for better readability (e.g., ta-lefttext-left).
  • CSS Variables: Introduced spacing variables (--space-xs, --space-sm, etc.) for consistent and scalable design.
  • Improved Flexibility: Consolidated and enhanced flex utilities (fsh-1 now includes min-width and min-height).
  • Responsive Design: Added responsive considerations and improved scalability.
  • Backward-Incompatible Changes: Some class names and functionality have been altered. Refer to the changelog for details.

1. Utility-First Approach

Fyshi.CSS embraces a utility-first philosophy. Each class is narrowly focused on a single property or a small set of related properties. This allows you to build complex layouts and styles directly in your HTML without writing custom CSS. It offers a smaller, simpler alternative to frameworks like Tailwind CSS.


2. Flexibility and Positioning

The library includes a wide range of classes to manage positioning and layout effectively:

Flexbox Utilities

  • dp-flex: Enable flexbox.
  • fd-c: Set flex direction to column.
  • jc-*, ai-*: Align and justify content easily with options like center, start, end, and more.

Sizing Classes

  • expand: Full width and height of the parent container.
  • w-fc, h-fc: Fit content width and height.
  • w100, h100: Full width or height.
  • mw-0, mh-0: Minimum width or height of 0 for better flex compatibility.

Spacing and Gaps

  • gap-*: Control spacing between grid or flex items.
  • p-*, m-*: Padding and margin utilities based on spacing variables (--space-xs, --space-sm, etc.).

3. Responsive and Consistent Design

Fyshi.CSS provides utilities that adapt well across different screen sizes:

  • expand: Ensures elements scale properly.
  • w-fc and h-fc: Fit content while maintaining responsiveness.

Consistency is maintained through the use of CSS variables, ensuring predictable spacing and layout behavior.


4. Visual Customization

The library offers tools for styling and interactivity:

  • Text Styling: font-bold for bold text, text-underline for underlined text.
  • Cursor and Selection: [clickable] for pointer cursor, [no-sel] for disabling text selection.

5. Minimal and Lightweight

Fyshi.CSS avoids the complexity and overhead of full-featured frameworks, making it ideal for projects that need quick setup and a small CSS footprint. It delivers just enough utilities to handle common design patterns efficiently.


How to Use Fyshi.CSS

Installation

Install Fyshi.CSS via npm:

npm i fyshi.css

Import in Your Styles

In your CSS entry file:

@import 'fyshi.css';

Documentation

Refer to the Fyshi.CSS Documentation for detailed usage examples.


GitHub

Explore the repository, report issues, or join discussions: https://github.com/Fysheep/Fyshi.CSS


Contributing

Got ideas for improvements? Share them in the discussions tab or submit a pull request. Your feedback helps shape Fyshi.CSS!


Changelog

See the full changelog here or refer to the latest updates below:

  • 2.0.0: Changed class naming conventions and improved consistency. Refer to the changelog for details on breaking changes.

  • 1.0.x: Various improvements to the library, including flex utilities, wrapping classes, and text alignment.