/
index.html
149 lines (141 loc) · 8 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
---
layout: base
---
<header class="navbar navbar-dark fixed-top toolbar-waterfall">
<button aria-controls="{{ site.id.navdrawer }}" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler mr-3" data-target="#{{ site.id.navdrawer }}" data-toggle="navdrawer">
<span class="navbar-toggler-icon"></span>
</button>
<a aria-label="Daemonite Material" class="mr-auto doc-logo" href="{{ site.baseurl }}/">M</a>
<div class="ml-3">
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="navbar-toggler" data-toggle="dropdown" id="doc-dropdown-versions" type="button"><i class="material-icons mx-auto">history</i></button>
<div aria-labelledby="doc-dropdown-versions" class="dropdown-menu dropdown-menu-right">
<span class="dropdown-header">Versions</span>
<a class="dropdown-item active" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/">Latest (v4.1.X)</a>
<a class="dropdown-item" href="http://daemonite.github.io/material/docs/4.0/">v4.0.0</a>
</div>
</div>
</div>
</header>
{% include nav-navdrawer.html %}
<div class="jumbotron jumbotron-fluid mb-5 doc-jumbotron">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8">
<h1 class="typography-display-4" id="{{ site.id.main }}">Material</h1>
<p class="font-weight-light typography-title">{{ site.description }}</p>
<div class="d-flex flex-wrap">
<a class="btn btn-lg btn-secondary mb-3 mr-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/">
<i class="material-icons mr-2">code</i>Documentation
</a>
<a class="btn btn-lg btn-light mb-3" data-toggle="modal" href="#doc-modal-download">
<i class="material-icons mr-2">cloud_download</i>Download
</a>
</div>
<p class="text-white-hint typography-caption">Currently v{{ site.current_version }}<br>(Based on Bootstrap v{{ site.current_version }})</p>
<hr class="mb-0">
<div class="d-flex flex-wrap justify-content-end">
<a class="btn btn-outline-light btn-sm mt-3" href="{{ site.repo }}" target="_blank">
<i class="material-icons mr-2">code</i>Fork me on GitHub
</a>
<a class="btn btn-outline-light btn-sm mt-3" href="http://www.daemon.com.au/" target="_blank">
<i class="material-icons mr-2 text-danger">favorite</i>Made by Daemon
</a>
</div>
</div>
</div>
</div>
</div>
<div aria-hidden="true" aria-labelledby="doc-modal-download-label" class="modal fade" id="doc-modal-download" role="dialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="doc-modal-download-label">Download</h2>
<button aria-label="Close" class="close material-icons" data-dismiss="modal" type="button">close</button>
</div>
<div class="modal-body">
<p>Material v{{ site.current_version }} is available for download in several ways, including some of the favourite package managers.</p>
<h3 class="mt-4 typography-body-2">Material CSS and JavaScript</h3>
<p>
<a href="{{ site.repo }}/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 JavaScript plugins.
</p>
<h3 class="mt-4 typography-body-2">Package Managers</h3>
<p>Pull in Material's source files with some of the most popular package managers.</p>
<pre class="bg-light p-3">
<code>bower install daemonite-material#{{ site.current_version }}</code>
</pre>
<pre class="bg-light p-3">
<code>npm install daemonite-material@{{ site.current_version }}</code>
</pre>
</div>
</div>
</div>
</div>
<main class="doc-main">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="mb-5">
<h2 class="text-primary">Introduction</h2>
<p class="typography-subheading">
The basic idea behind this project is to combine the front-end technology of the popular
<a href="https://getbootstrap.com/" target="_blank">Bootstrap
<sup>
<i class="material-icons material-icons-inline">open_in_new</i>
</sup>
</a>
framework with 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>.
</p>
</div>
<div class="blockquote mb-5">
<p class="text-muted typography-body-1">Contents</p>
<p>
<a href="#doc_index_content_goals">Goals</a>
</p>
<p>
<a href="#doc_index_content_principles">Principles</a>
</p>
</div>
<div class="mb-5" id="doc_index_content_goals">
<h3 class="text-primary">Goals</h3>
<div class="row">
<div class="col-md-6 mt-4">
<h4 class="text-secondary typography-subheading">Primary</h4>
<p>The primary goal of this project is to give all Bootstrap components and elements a Google 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>
</div>
<div class="col-md-6 mt-4">
<h4 class="text-secondary typography-subheading">Secondary</h4>
<p>A secondary goal of this project is to add support for some unique Google Material Design components such as floating buttons, pickers, and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components.</p>
<p>Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation.</p>
</div>
</div>
</div>
<div class="mb-5" id="doc_index_content_principles">
<h3 class="text-primary">Principles</h3>
<div class="row">
<div class="col-md-6 mt-4">
<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 <code>button</code> = Google Material Design's <code>button</code>.</p>
<p>If a Bootstrap component lacks 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 <code>navbar</code> = Google Material Design's <code>toolbar</code>.</p>
<p>If a Bootstrap component lacks a related counterpart completely in Google Material Design, this project will style this component based on our own iteration of Google Material Design guidelines. For example, Bootstrap's jumbotron and pagination, etc.</p>
</div>
<div class="col-md-6 mt-4">
<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 unique Material look such as floating labels, Material includes a handful of additional JavaScript to help bring some of the components to life.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>