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.
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 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.
img folder.
m-icons.css, m-forms.css, m-normalize.css, and m-buttons.css.
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:
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.
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:
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: