Skip to content

squidit/css

Repository files navigation

Squid logo

CSS - Components Squid Style

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 Install

Use React-CSS

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