forked from Daemonite/material
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (134 loc) · 9.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
<title>Material</title>
<!-- css -->
<!-- add material font (roboto) and material icon as needed -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- add material css | replace bootstrap.css -->
<link href="css/material.min.css" rel="stylesheet">
<!-- additional css for documentation -->
<link href="https://v4-alpha.getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
<link href="css/project.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse toolbar-waterfall doc-navbar" id="doc_navbar">
<span class="navbar-brand">Material</span>
</div>
<div class="jumbotron jumbotron-fluid mb-xl doc-jumbotron" id="doc_index_jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-10 col-md-8 col-xl-6 offset-sm-1 offset-md-2 offset-xl-3">
<h1 class="typography-display-4">Material</h1>
<p class="font-weight-light typography-title">Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design, built using Bootstrap 4.</p>
<p>
<a class="btn btn-lg btn-secondary" data-toggle="modal" href="#doc_modal">Download Material</a>
<a class="btn btn-lg bg-faded" href="gh-pages/components/cards/index.html">Documentation</a>
</p>
<p class="mb-no text-white-hint typography-caption">Currently v4.0.0-alpha.6<br>(based on Bootstrap v4.0.0-alpha.6)</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="doc_modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Download</h2>
</div>
<div class="modal-body">
<p>Material v4.0.0-alpha.6 is available for download in several ways, including some of the favourite package managers.</p>
<h3 class="mt-lg typography-subheading">Material CSS and JS</h3>
<p><a href="https://github.com/Daemonite/material/releases" target="_blank"><small class="align-text-top"><i class="material-icons">cloud_download</i></small> Download</a> Material's ready-to-use code to easily drop into any project. Includes compiled and minified versions of CSS and JS plugins.</p>
<h3 class="mt-lg typography-subheading">Package Managers</h3>
<p>Pull in Material's source files into nearly any project with some of the most popular package managers.</p>
<pre class="p-md">
<code>bower install daemonite-material#4.0.0-alpha.6</code>
</pre>
<pre class="p-md">
<code>npm install [email protected]</code>
</pre>
</div>
</div>
</div>
</div>
<main class="doc-main" id="doc_main">
<div class="container">
<div class="row">
<div class="col-sm-10 col-md-8 col-xl-6 offset-sm-1 offset-md-2 offset-xl-3">
<div class="mb-xl">
<h2 class="text-primary">Introduction</h2>
<p class="typography-subheading">The basic idea behind this project is to combine the visual language of <a href="https://material.google.com/" target="_blank">Google Material Design<sup><i class="material-icons material-icons-inline">open_in_new</i></sup></a> with the front-end technology of the popular <a href="https://v4-alpha.getbootstrap.com/" target="_blank">Bootstrap<sup><i class="material-icons material-icons-inline">open_in_new</i></sup></a> framework.</p>
</div>
<div class="blockquote mb-xl">
<p class="font-weight-light text-muted">Contents</p>
<p><a href="#doc_index_content_goals">Goals</a></p>
<p><a href="#doc_index_content_principles">Principles</a></p>
<p><a href="#doc_index_content_roadmap">Roadmap</a></p>
</div>
<div class="mb-xl" id="doc_index_content_goals">
<h3 class="text-primary">Goals</h3>
<div class="row">
<div class="col-md-6 mt-lg">
<h4 class="text-secondary typography-subheading">Primary</h4>
<p>The primary goal of this project is to give all Bootstrap components and elements a Material Design look, so it allows web developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design.</p>
<p>Therefore, the Bootstrap's <a href="https://v4-alpha.getbootstrap.com/getting-started/introduction/" target="_blank">documentation<sup><i class="material-icons material-icons-inline">open_in_new</i></sup></a> can serve as a valid documentation for this project as well. Replacing <code>bootstrap.min.css</code> on the site with <code>material.min.css</code> from this project without any other changes will transform all components and elements into a materialised look.</p>
</div>
<div class="col-md-6 mt-lg">
<h4 class="text-secondary typography-subheading">Secondary</h4>
<p>A secondary goal of this project is to add support of some unique Material Design components such as floating action buttons, pickers and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components or elements.</p>
<p>Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation (work-in-progress).</p>
</div>
</div>
</div>
<div class="mb-xl" id="doc_index_content_principles">
<h3 class="text-primary">Principles</h3>
<div class="row">
<div class="col-md-6 mt-lg">
<h4 class="text-secondary typography-subheading">CSS & HTML</h4>
<p>If a Bootstrap component has an exact match in Google Material Design, this project will style this Bootstrap component based on the specifications laid out in Google Material Design Guidelines. For example, Bootstrap's buttons = Google Material Design's buttons.</p>
<p>Some of the Bootstrap components seem to lack an exact match in Google Material Design, but this may be simply due to different naming conventions. For example, Bootstrap's navbars is very much the same as Google Material Design's toolbars.</p>
<p>If a Bootstrap component does not have an exact match in Google Material Design, the specifications of a closest matching component in Google Material Design Guidelines will be used to style this Bootstrap component. For example, Bootstrap's badges = Google Material Design's chips.</p>
<p>If a Bootstrap component lacks a related counterpart in Google Material Design completely, this project will style this component based on our own iteration of Google Material Design Guidelines. For example, Bootstrap's button groups, jumbotrons and paginations, etc.</p>
</div>
<div class="col-md-6 mt-lg">
<h4 class="text-secondary typography-subheading">JavaScript</h4>
<p>No modification has been made to Bootstrap's JavaScript. It is safe to use Bootstrap's JavaScript as it is.</p>
<p>However, in order to achieve some Material feel and look, Material includes a handful of additional JavaScript to help bring some of the components to life.</p>
</div>
</div>
</div>
<div class="mb-xl" id="doc_index_content_roadmap">
<h3 class="text-primary">Roadmap</h3>
<div class="row">
<div class="col-md-4 mt-lg">
<h4 class="text-secondary typography-subheading">Near-term</h4>
<p>Bug fixes and updates alongside Bootstrap 4's continuous releases.</p>
</div>
<div class="col-md-4 mt-lg">
<h4 class="text-secondary typography-subheading">Mid-term</h4>
<p>Add missing support for some Google Material Design components (e.g. snackbars).</p>
</div>
<div class="col-md-4 mt-lg">
<h4 class="text-secondary typography-subheading">Long-term</h4>
<p>Rewrite all JavaScript plugins in ES6 to take advantage of the newest JavaScript enhancements.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- js -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- add material js on top of bootstrap.js -->
<script src="js/material.min.js"></script>
<!-- additional js for documentation -->
<script src="js/project.min.js"></script>
</body>
</html>