Getting Started

Installation Guide for ModulateCSS

Welcome to the ModulateCSS installation guide. This guide provides clear instructions to help you deploy ModulateCSS either via npm or directly through a CDN, depending on your project's needs.

Install via CDN

For quick testing or when not using npm packages, you can use the ModulateCSS CDN link.

Open the HTML file where ModulateCSS will be includedand insert the CDN link in the <head> section of your HTML file:

modulatecss

<link href="https://cdn.jsdelivr.net/npm/modulatecss" rel="stylesheet">

Install Specific Features

Fluid Sizing Full

Use if you need fluid sizing with classic CSS properties (left, right, top, bottom etc.) and CSS logical properties and values and additional features like fluid typography, fluid spacing, and fluid grid.

modulate-fluid-sizing.min.css

<link href="https://cdn.jsdelivr.net/npm/modulatecss@latest/dist/css/modulate-fluid-sizing.min.css" rel="stylesheet">

Fluid Sizing Classic

Use if you need fluid sizing without CSS logical properties and values. So if you like to use width: 100% instead of inline-size: 100% and height: 100% instead of block-size: 100%.

modulate-fluid-sizing-classic.min.css

<link href="https://cdn.jsdelivr.net/npm/modulatecss@latest/dist/css/modulate-fluid-sizing-classic.min.css" rel="stylesheet">

Fluid Sizing Modern (recommended!)

Use if you need fluid sizing with CSS logical properties and values. So if you like to use inline-size: 100% instead of width: 100% and block-size: 100% instead of height: 100%.

modulate-fluid-sizing-modern.min.css

<link href="https://cdn.jsdelivr.net/npm/modulatecss@latest/dist/css/modulate-fluid-sizing-modern.min.css" rel="stylesheet">

Advanced Module Grid

modulate-grid.min.css

<link href="https://cdn.jsdelivr.net/npm/modulatecss@latest/dist/css/modulate-grid.min.css" rel="stylesheet">

Advanced Header

modulate-header.min.css

<link href="https://cdn.jsdelivr.net/npm/modulatecss@latest/dist/css/modulate-header.min.css" rel="stylesheet">

Install via npm

To incorporate ModulateCSS in a Node.js project or any platform supporting npm.

Open your terminal, navigate to your project's root directory and run the installation command:

Terminal Command

npm install modulatecss

Integrate Specific Features only

All:

index.js

import 'modulatecss/dist/css/modulate.min.css';

Fluid Sizing Full:

index.js

import 'modulatecss/dist/css/modulate-fluid-sizing.min.css';

Fluid Sizing Classic:

index.js

import 'modulatecss/dist/css/modulate-fluid-sizing-classic.min.css';

Fluid Sizing Modern:

index.js

import 'modulatecss/dist/css/modulate-fluid-sizing-modern.min.css';

Advanced Module Grid:

index.js

import 'modulatecss/dist/css/modulate-grid.min.css';

Advanced Header:

index.js

import 'modulatecss/dist/css/modulate-header.min.css';

Integration with Frameworks

Integrate ModulateCSS globally in various frameworks to ensure consistent styling:

Next.js

In projects using _app.tsx:

pages/_app.tsx

import 'modulatecss/dist/css/modulate.min.css';
import '@styles/theme.css';
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
export default MyApp;

With the App Router:

app/layout.tsx

import 'modulatecss/dist/css/modulate.min.css';
import '@styles/theme.css';
export default function RootLayout({ children }) {
  return <>{children}</>;
}

Angular

Add styles in the angular.json file:

angular.json

{
    "projects": {
        "your-project-name": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "node_modules/modulatecss/dist/css/modulate.min.css",
                            "styles/theme.css"
                        ],
                    }
                }
            }
        }
    }
}

Vue.js

Include styles in your main entry file:

main.ts

import 'modulatecss/dist/css/modulate.min.css';
import 'stylestheme.css';
import Vue from 'vue';
import App from './App.vue';
new Vue({
    render: h => h(App),
}).$mount('#app');

Svelte

Incorporate styles at the component level:

src/main.ts

import 'modulatecss/dist/css/modulate.min.css';
import 'stylestheme.css';
import App from './App.svelte';
const app = new App({
    target: document.body,
});
export default app;

Gatsby

Include styles using gatsby-browser.js:

gatsby-browser.js

import 'modulatecss/dist/css/modulate.min.css';
import 'stylestheme.css';

By following these instructions, ModulateCSS will be ready to enhance your web designs. Stay tuned for our next article, "Basic Concepts of ModulateCSS," to learn more about efficient and scalable web designs.