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.
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-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.
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">
/dist/css/minstyle.io.min.cssfile is a compressed version of the framework, it will be faster to load.
/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://email@example.com/dist/css/minstyle.io.min.css">
minstyle.io is also available under npm.
npm i minstyle.io
minstyle.io is also available under yarn.
yarn add minstyle.io
minstyle.io integrates the management of the dark mode. Read how to install dark-mode-switcher.
How to use ?
Full documentation is available on minstyle.io.