Skip to content

Airmime/minstyle.io

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

minstyle.io

A simple & Lightweight CSS Framework, including dark mode.

MIT Licence npm version

minstyle.io

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.1

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

Layout

Content

Elements

Components

Helpers

License

Designed by RΓ©mi MARION. Licensed under MIT License.

Links