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

@squidit/css

v2.0.28

Published

Squid CSS Styleguide

Downloads

878

Vulnerabilities

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

Links

Git

Maintainers

squidit-developerssquidit-developersvinimarcilivinimarcili

Keywords

csssassresponsivefront-endframeworkweb

Readme

About

Squid CSS Framework

Table of contents

Exemple

See an exemple of all components here

Usage

Install

You can easily install with npm

or download here

or use CDNhttps://www.jsdelivr.com/package/gh/squidit/css*

or use https://css-cdn.squidit.com.br*

-> Use the path from references above on CDN's to find the files. Exemple: https://css-cdn.squidit.com.br/dist/css/squid.min.css

npm install @squidit/css --save

Just reference CSS /dist/css/squid.min.css and Javascript /dist/js/squid.min.js on your page or your framework. If necessary remember to declare the fonts contained in the /dist/fonts folder or change paths on squid.min.css or squid.css

<html>
  <head>
    ...
    <link rel="stylesheet" href="path-to-files/dist/css/squid.min.css">
  </head>
  <body>
    ...
    <script defer src='path-to-files/dist/js/squid.min.js'></script>
  </body>
</html>

Angular Install

Use NGX-CSS

React.js Install

After install, import CSS into your global style:

  // Overwrite default font path
  $fontsFolderPath: '~@squidit/css/dist/fonts';
  // Import all Framework Styles
  @import '~@squidit/css/src/scss/squid.scss';

And in your index.{jsx,tsx} on root just add:

  if (typeof window !== 'undefined') {
    require('@squidit/css/dist/js/squid.min.js')
  }

Obs: Probably components that need javascript will not work as they are loaded in onload event. They need some implementation within React. A library for React will be developed soon.

Vue.js Install

Soon

Development

  1. Install npm dependences

npm install

  1. Run npm start to watch .scss and .js files

Write Documentation

See Intructions here

Deploy on jsdelivr

The official CDN for Squid CSS is jsdelivr, which is even where the framework documentation consumes assets.

On GitHub Releases create a new release, with a new tag version** and using master branch

jsdelivr usage

...
<link src="https://cdn.jsdelivr.net/gh/squidit/css@latest/dist/css/squid.min.css" rel=stylesheet>
...
<script src='https://cdn.jsdelivr.net/gh/squidit/css@latest/dist/js/squid.min.js'></script>

Deploy yo NPM

Just draft a new release here on Github and an actions will starts

**Important to use the same tag as package.json

Documentation

See Docs here

External Libraries and Inspiration

Animate.css

This framework uses Animate.css lib, see docs here

Grid System

This framework uses a Grid based on Boostrap 5 Grid System with modifications, see docs here

Icons

This framework uses Icons from Font Awersome, see here

Toast

This framework uses a adaptation of VanillaToast, see here

Based Styleguide

This framework is based on Squid Styleguide