Squid CSS Framework
- About
- Table of contents
- Exemple
- Usage
- Development
- Production
- Documentation
- External Libraries and Inspiration
See an exemple of all components here
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>Use NGX-CSS
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.
Soon
- Install npm dependences
npm install
- Run
npm startto watch.scssand.jsfiles
See Intructions here
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
...
<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>Just draft a new release here on Github and an actions will starts
**Important to use the same tag as package.json
See Docs here
This framework uses Animate.css lib, see docs here
This framework uses a Grid based on Boostrap 5 Grid System with modifications, see docs here
This framework uses Icons from Font Awersome, see here
This framework uses a adaptation of VanillaToast, see here
This framework is based on Squid Styleguide