Ming-CSS

Lightweight, color-scheme friendly CSS for quickly designing website content provided ready to use and customize as open source assets or using CDN with no download required.

Shared for use under a MIT license.

Demo pages (anchor)

The website showcases the styles available with HTML examples and basic usage info where required, and provides links to the individual source CSS documents to view the code.

Colors & styles

Components

Using the assets (anchor)

The boilerplate demonstrates how to include the assets in a HTML template, the only requirement is the theme-switch JS must be loaded before the CSS as shown below.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bitz CSS demo</title>
  <script src="/assets/js/ming.theme-switch.min.js"></script>
  <link href="/assets/css/ming.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello world!</h1>
  <script src="/assets/js/ming.dropdowns.min.js"></script>
</body>
</html>

The shared assets with the different style sheet options as noted below:

[assets/css]: ming.css; ming.min.css; ming.mono.css*; ming.mono.min.css; ming.restart.css**; ming.restart.min.css

[assets/js]: ming.theme-switch.js; ming.theme-switch.min.js; ming.dropdowns.js; ming.dropdowns.min.js

*Everything without the primary color variables, styles or utilities.
**Typography, forms, buttons, tables and color-scheme variables only.

Using a CDN (anchor)

The latest release assets are also available ready to use via jsDelivr CDN:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bitz CSS demo</title>
  <script src="https://cdn.jsdelivr.net/gh/pmbrown/ming-css@v0.1.4/assets/js/ming.theme-switch.min.js" integrity="sha384-spkcUWJZ18/6wGiazgdmFJexVHNw4BQU34oHGd1tCj95A3zLNFB0+OU2Q1Yzet0D" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/gh/pmbrown/ming-css@v0.1.4/assets/css/ming.min.css" rel="stylesheet" integrity="sha384-+UZn5Mdv2DprHcyxnmr5UqNRg2WHQzl9OpIhMLZJzTgf5xDOm0IS3zYqe8Q9w03o" crossorigin="anonymous">
</head>
<body>
  <h1>Hello world!</h1>
  <script src="https://cdn.jsdelivr.net/gh/pmbrown/ming-css@v0.1.4/assets/js/ming.dropdowns.min.js" integrity="sha384-i84dKqaQCfpStCeHFRbjiZj3vIbsWgC8GQO7x2ZsiiUcKidHZBI3MP8n39kvm68c" crossorigin="anonymous"></script>
</body>
</html>

Customizing (anchor)

Ming-CSS assets and source files are regular CSS documents written and designed following consistent methods for customizing and expanding by anyone familiar with writing CSS:

Global color-scheme variables for customizing the default theme colors.
Style properties designed via fallbacks for CSS variables for customizing the default values.
Component styles written with wildcard classes for creating modifier utilities.
Variable utility classes for customizing content inline or in custom style sheets.

How to customize the styles is up to the users imagination and experience, Ming-CSS is shared as-is without documentation and the website currently provided for demonstrative purposes only.