Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@g-loot/css-framework

Package Overview
Dependencies
Maintainers
5
Versions
95
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@g-loot/css-framework

![Stryda CSS Framework](https://res.cloudinary.com/gloot/image/upload/v1673531083/Stryda/logos/stryda-logo-dark-png.png)

  • 1.0.113
  • npm
  • Socket score

Version published
Weekly downloads
101
increased by1022.22%
Maintainers
5
Weekly downloads
 
Created
Source

Stryda CSS Framework

👉 A CSS Framework built on Tailwind CSS to bring consistency and speed to Stryda products.


Documentation

For full documentation, visit stryda.netlify.app.

Using the framework

1. Install tailwindcss

Install tailwindcss and its peer dependencies via npm.

npm install -D tailwindcss postcss autoprefixer

2. Install the framework

Install @g-loot/css-framework via npm.

npm install @g-loot/css-framework

3. Import the css

Import the Framework CSS into your project stylesheet.

@import '@g-loot/css-framework/styles/globals.css';

4. Adapt webpack config.

Add postcss-loader to webpack.config.js.

module: {
  rules: [
    {
      test: /\.(css)$/,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
    }
  ]
}

5. Import and adapt tailwind config.

Import the framework config into your project tailwind.config.js and indicate which files Tailwind should scan.

const tailwindConfig = require('@g-loot/css-framework/tailwind.config');
module.exports = {
  ...tailwindConfig,
  content: [
    "./pages/*.{js,ts,jsx,tsx,json}",
  ],
};

Example repository

Check this example setup of the Stryda Framework and Tailwind CSS on React (webpack).

That's it!

Your projects can now consume the Stryda theme and components. ✨

FAQs

Package last updated on 30 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc