1. Download

Download the zip file. You'll get both the compiled and minified versions along with the original files.

After downloading the zip file, extract it to a place in your application. The zip file follows a file structure and it contains the files for the library. They're bundled together under three folders. You'll see the files structured like this:

  css3-microsoft-modern-buttons/
  ├── css/
  │   ├── m-buttons.css
  │   ├── m-buttons.min.css
  │   ├── m-forms.css
  │   ├── m-forms.min.css
  │   ├── m-icons.css
  │   ├── m-icons.min.css
  │   ├── m-normalize.css
  │   ├── m-normalize.min.css
  │   ├── m-styles.min.css
  ├── js/
  │   ├── m-dropdown.js
  │   ├── m-dropdown.min.js
  │   ├── m-radio.js
  │   ├── m-radio.min.js
  ├── img/
  │   ├── glyphicons-halflings.png
  │   ├── glyphicons-halflings-white.png
  │   ├── syncfusion-icons-white.png
  │   ├── syncfusion-icons.png
  └── readme.md

These are the contents of this library. The compiled and minified CSS and JS (.min.*) files are included, and the original files (.*) are within the zip file. Do note that all the Javascript files require jQuery included in your application.

2. Contents

Now that we've gone over the downloaded zip file and the extracted files. I'm going to give a brief overview of the files:

  • m-dropdown.js / m-dropdown.min.js - This is the Dropdown Button Javascript component (see Button docs for more details on its usage).
  • m-radio.js / m-radio.min.js - This is the Radio Behavior Javascript component (see Button docs for more details on its usage).
  • m-buttons.css / m-buttons.min.css - These files contain all the necessary CSS markups for creating modern-styled buttons. A few buttons in this file require some of the javascript components, specifically m-dropdown.js/m-dropdown.min.js and m-radio.js/m-radio.min.js to create radio-style button groups and buttons that trigger dropdown menus. Do note that jQuery is required for these Javascript components to run.
  • m-forms.css / m-forms.min.css - This file contains all the necessary CSS markups for creating modern-styled form elements and form layouts.
  • m-normalize.css / m-normalize.min.css - This file contains all the necessary CSS markups for normalizing browser elements.
  • m-buttons.css / m-buttons.min.css - This file contains all the necessary CSS markups for creating icons from Glyphicons and the swap-arrows from Syncfusion. The image sprite for the icons are found under the img folder.
  • m-styles.min.css - This file contains all the CSS markups from m-icons.css, m-forms.css, m-normalize.css, and m-buttons.css.

3. Usage

Now that we've already tackled the files and its contents, it's time to drop it in our web-applications for use. To do that here are two scenarios on how we can use these files:


Using it on its own

To use both the button and form styles in this library, just drop in the m-styles.min.css. Take in for example a usual HTML template for a view engine:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World! - Home</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <script src="js/latestjquery.js"></script>
  </body>
</html>

Just drop in the m-styles.min.css file so that it can create modern-styled buttons and forms:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World! - Home</title>
    <link href="css/m-styles.min.css" rel="stylesheet"> 
  </head>
  <body>
    <h1>Hello world!</h1>
    <script src="js/latestjquery.js"></script>
    <script src="js/m-dropdown.min.js"></script>
    <script src="js/m-radio.min.js"></script>
  </body>
</html>

Now you're set! :) With these files included we can now create modern-styled buttons and forms.


Using it with Twitter Bootstrap

This library can be used safely with Twitter Bootstrap. Just so you know, this documentation site is using the full Twitter Bootstrap CSS file set with the CSS3 Microsoft Modern Buttons working beside it. So let's go over on how to do that with our previous HTML template example above:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World! - Home</title>
    <link href="css/m-styles.min.css" rel="stylesheet"> 
  </head>
  <body>
    <h1>Hello world!</h1>
    <script src="js/latestjquery.js"></script>
    <script src="js/m-dropdown.min.js"></script>
    <script src="js/m-radio.min.js"></script>
  </body>
</html>

Now add the bootstrap files to the HTML template:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World! - Home</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/m-styles.min.css" rel="stylesheet"> 
  </head>
  <body>
    <h1>Hello world!</h1>
    <script src="js/latestjquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/m-radio.min.js"></script>
  </body>
</html>

A single note here:

  • What happened to m-dropdown.min.js? - CSS3 Microsoft Modern Buttons' Dropdown Button Javascript component is also using Twitter Bootstraps' Dropdown Button Javascript component. It's compatible as of Twitter Bootstrap 2.0.4 to 2.1.1, we can use the Dropdown Button Javascript inside bootstrap.min.js instead of rolling out ours.

Head over to the documentation section of this site for more information on how to use it, examples of its usage and some code snippets. Drop in to these parts of this site and enjoy building stuff that makes your users happy: