Uimini

# Download

Learn where to download and how to compile the Uimini sources.

Here's ways how you can download uimini:

Everybody knows that developing runs on coffee!
Thanks for your support!

Buy me a coffee (opens new window)

Uimini - Uimini modern and lightweight CSS framework | Product Hunt

# CDN

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uimini@2.0.8/dist/uimini.min.css" integrity="sha256-h8u2/mt0aoFKmyVNtIVA0u65MdOePGkIhenx9fW6n9E=" crossorigin="anonymous">

# Or compiled CSS

Download ready-to-use compiled code for Uimini to easily drop into your project

This doesn’t include configs, scss source file.

Download Compiled CSS

Content:

uimini/
├── uimini.css                # default uimini
├── uimini.min.css            # same but .min version
├── uimini_no_reset.css       # uimini without rest (read 'Reset' section bellow for more info)
├── uimini_no_reset.min.css   # same but .min version

# optional build with support old browsers like ie10
# (read 'Legacy browser support' section bellow for more info)
├── ie-10/
│   ├── uimini.css
│   ├── uimini.min.css
│   ├── uimini_no_reset.css
│   ├── uimini_no_reset.min.css

# Or download source

Compile Uimini with your own asset pipeline by downloading our source Sass. For download last realize with all new feature click here (opens new window) or follow button bellow.

You can also choice specific realize if you need in realizes page (opens new window). All realizes are stable.

Download source

Content:

uimini/
├── dist/
│   ├── uimini.css
│   ├── ...
├── src/
│   ├── builds/              # build options
│   ├── components/          # buttons, inputs, etc
│   ├── theme/               # theme config
│   ├── typography/          # lists, title, etc
│   ├── utils/               # vars, mixains, etc
│   ├── uimini-core.scss     # core import
│   ├── uimini-body.scss     # body styles

# Or use package managers

Pull in Uimini source files into nearly any project with some of the most popular package managers like webpack or gulp.

# NPM

Install Uimini in your Node.js with the npm package (opens new window):

npm install uimini

# Yarn

Install Uimini in your Node.js with the yarn package (opens new window):

yarn add uimini

# Usage Uimini

After installation via npm or yarn pull in Uimini source or dist files into nearly any project with imports or required (depend of package manager).

With webpack: make import of uimini from node_modules inside main entry of webpack (usually it's app.js or index.js):

// Default import uimini:
// will be same as `uimini/dist/uimini.css`
import 'uimini'

// Or import specific css file:
import 'uimini/dist/uimini.css'
import 'uimini/dist/uimini_no_reset.css' // Not recommended. Cause inconsistencies across browsers / devices will works incorrect

// Or imports specific scss files:
import 'uimini/src/utils/reset.scss' // reset
import 'uimini/src/uimini-core.scss' // core of uimini

// Or you can also import only components that you need (for less build size).
// For example:
import 'uimini/src/theme/default-theme.scss' // theme is required
import 'uimini/src/components/button.scss'

Remember to use helpers classes: .ui-html and .ui-body for better responsive and smooth scroll. Visit the Layout docs (opens new window) for know more.

# Build From Source

Optionally, you can build Uimini from source on Github (opens new window). To do this, you'll need to have Node.js and npm installed (opens new window).

Build From Source with npm:

git clone https://github.com/uimini/uimini.git
cd uimini
npm install
npm start

Build From Source with yarn:

git clone https://github.com/uimini/uimini.git
cd uimini
yarn && yarn start

# Reset (reboot)

For improved cross-browser rendering, we use Reset by default to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Inside css folder two types of uimini:

  1. uimini.css - reset included (highly recommend to use)
  2. uimini_no_reset.css - Without reset styles (Be careful cause with no_reset option inconsistencies across browsers and devices will works incorrect)

# Legacy browser support

Сss in uimini-ie10 folder builded with: "browserslist": "last 3 versions",

Build size with extra browser support increased by ~22% (from 19kb to 23kb)

# Extra browsers supported:

  • Ie 10 - 11;
  • Firefox 2-21, 22-27 (2006-2012);
  • Chrome 4-20 (2010-2012);
  • Safari iOS 3.2-6.1 (2010-2013);
  • Android browser 2.1-4.3 (2009-2013).

# When to use extra browsers support

For e-commerce, state projects etc.

Summing up: for e-commerce which using jquery and polyfills it's a good solution to use uimini with extra browsers support.

# When NOT TO USE extra browsers support

For example:

  1. If you gonna use Vue.js 3 which not supported ie 11 then you don't need extra browser support.
  2. If you gonna use React.js + Mobx 4+ (also not supported ie 11) then you don't need extra browser support.
  3. When you using es6+ feature without bable and extra polyfills. Cause that's means you don't support old browsers then you don't need extra browser support.

Summing up: if you using modern JavaScript (or modern css like grids) then you don't need uimini with extra browser support.

# Uimini v1

Since 2020 uimini v1 is not supported. But if you still want to use first version follow one of this options:

Additional links for uimini v1:

← Layout →