ModulateCSS is a modern, visionary CSS framework that prioritizes the experience of its key stakeholders: users, editors, and developers.
MIT License
The modulatecss
package is designed to distribute ModulateCSS styles, providing a streamlined and scalable solution for modern web development. It allows developers to integrate a comprehensive CSS framework that enhances design consistency, maintainability, and responsiveness across web applications. This package supports both CDN and npm installation methods, making it versatile for different project setups. ModulateCSS leverages advanced CSS techniques such as Grid, Flexbox, and CSS custom properties, ensuring your web designs are robust and future-proof.
Read the docs under modulatecss.com.
You can install modulatecss
using npm:
npm install modulatecss
Or include it directly via CDN:
<link href="https://cdn.jsdelivr.net/npm/modulate@latest/dist/css/modulate.min.css" rel="stylesheet">
Depending on the features you need, you can import different CSS files:
All:
import 'modulatecss/dist/css/modulate.min.css';
Fluid Sizing Full:
import 'modulatecss/dist/css/modulate-fluid-sizing.min.css';
Fluid Sizing Classic:
import 'modulatecss/dist/css/modulate-fluid-sizing-classic.min.css';
Fluid Sizing Modern:
import 'modulatecss/dist/css/modulate-fluid-sizing-modern.min.css';
Advanced Module Grid:
import 'modulatecss/dist/css/modulate-grid.min.css';
Advanced Header:
import 'modulatecss/dist/css/modulate-header.min.css';
Remember to replace 'modulatecss' with the path to your node_modules directory if you installed via npm, or with the CDN URL if you're using a CDN.
Next.js:
import 'modulatecss/dist/css/modulate.min.css';
import '@styles/theme.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
Angular:
{
"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/modulatecss/dist/css/modulate.min.css",
"styles/theme.css"
]
}
}
}
}
}
}
Vue.js:
import 'modulatecss/dist/css/modulate.min.css';
import 'styles/theme.css';
new Vue({
render: h => h(App),
}).$mount('#app');
Svelte:
import 'modulatecss/dist/css/modulate.min.css';
import 'styles/theme.css';
const app = new App({
target: document.body,
});
export default app;
Gatsby:
import 'modulatecss/dist/css/modulate.min.css';
import 'styles/theme.css';
For more information, visit the GitHub repository.
To report bugs or request features, please use the issue tracker.
This project is licensed under MIT.