A simple & Lightweight CSS Framework, including dark mode.
minstyle.io is a simple and light open source CSS framework. It integrates a set of pre-designed HTML elements, allowing the rapid and simple development of interfaces for all devices.
minstyle.io is entirely designed in CSS (SCSS), no javascript library is developed or required.
The architecture of the framework is based on the concatenation of classes. For example, the ms-btn classe allows to get the default design of a button, the ms-primary classe allows to change background-color, and the ms-rounded classe allows to round the button angles.
The framework is based on 4 colors: primary .ms-primary and secondary ms-secondary being the main colors of the design.
The action colors, .ms-action and .ms-action2, allow you to highlight the elements calling for an action, or define a complementary color to the first two.
Since V2, it is possible to customize the 4 colors via the framework generator.
Each component of the framework is compatible with the dark mode. A dedicated page explains how it works.
minstyle.io V2.0.2
The sources code are available for download in dist/ folder. To integrate it in your project, you just need to add the following tag between your tags, after downloading the .css file.
<link rel="stylesheet" href="css/minstyle.io.css">The
/dist/css/minstyle.io.min.cssfile is a compressed version of the framework, it will be faster to load.
The /dist/css folder contains all compiled CSS files. If you want to modify the framework sources, the /css/scss folder contains all the SASS files. The /css/scss/minstyle.io.scss file contains the variables (colors, shape, etc...) used on the whole framework.
For greater simplicity, you could add the link tag, importing sources from a CDN.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/minstyle.io.min.css">minstyle.io is also available under npm.
npm i minstyle.iominstyle.io is also available under yarn.
yarn add minstyle.iominstyle.io integrates the management of the dark mode. Read how to install dark-mode-switcher.
Full documentation is available on minstyle.io.
Designed by Rémi MARION. Licensed under MIT License.