minstyle.io

A simple & Lightweight CSS Framework, including dark mode.

Informations

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.

Version

minstyle.io V2.0.2

Get Started

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.css file 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.

jsdelivr

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/minstyle.io@2.0.1/dist/css/minstyle.io.min.css">

npm

minstyle.io is also available under npm.

npm i minstyle.io

Yarn

minstyle.io is also available under yarn.

yarn add minstyle.io

Dark mode

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.

Get started

• Installation

Layout

• Color
• Dark Mode
• Footer
• Generator
• Grid

Content

• Blockquote
• Forms
• Icons
• Table
• Titles
• Typography

Elements

• Alerts
• Breadcrumb
• Button
• Button Group
• Dropdown
• Label
• Loading
• Pagination
• Progress-bar

Components

• Article
• Avatar
• Browser
• Card
• Hero
• Menu
• Tab
• User

Helpers

• Colors
• Display
• Flexbox
• Margin / Padding
• Position
• Shadow
• Shape

License

Designed by Rémi MARION. Licensed under MIT License.

Links

• Website / Documentation
• Website Repository