-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
about.html
141 lines (131 loc) · 5.77 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
</head>
<body>
{{> navbar }}
<main>
{{> intro}}
<div class="container">
<!-- Outer row -->
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1 center-on-small-only">
<!-- Material Design -->
<div id="materialdesign" class="section scrollspy">
<h2 class="header">Material Design</h2>
<p class="caption">
Created and designed by Google, Material Design is a design
language that combines the classic principles of successful
design along with innovation and technology. Google's goal is to
develop a system of design that allows for a unified user
experience across all their products on any platform.
</p>
<div class="video-container">
<iframe
width="853"
height="480"
src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
frameborder="0"
allowfullscreen
></iframe>
</div>
<div class="section">
<h3 class="header light">Principles</h3>
<div class="row">
<div class="col s12 l4">
<img class="promo" src="images/metaphor.png" />
<h4 class="center">Material is the metaphor</h4>
<p>
The metaphor of material defines the relationship between
space and motion. The idea is that the technology is
inspired by paper and ink and is utilized to facilitate
creativity and innovation. Surfaces and edges provide
familiar visual cues that allow users to quickly
understand the technology beyond the physical world.
</p>
</div>
<div class="col s12 l4">
<img class="promo" src="images/bold.png" />
<h4 class="center">Bold, graphic, intentional</h4>
<p>
Elements and components such as grids, typography, color,
and imagery are not only visually pleasing, but also
create a sense of hierarchy, meaning, and focus. Emphasis
on different actions and components create a visual guide
for users.
</p>
</div>
<div class="col s12 l4">
<img class="promo" src="images/motion.png" />
<h4 class="center">Motion provides meaning</h4>
<p>
Motion allows the user to draw a parallel between what
they see on the screen and in real life. By providing both
feedback and familiarity, this allows the user to fully
immerse him or herself into unfamiliar technology. Motion
contains consistency and continuity in addition to giving
users additional subconscious information about objects
and transformations.
</p>
</div>
</div>
</div>
</div>
<!-- About the Team-->
<div id="team" class="section scrollspy">
<h2 class="header">Meet the Team</h2>
<h5>The community</h5>
<p class="caption">
Due to inactivity of the original developers, MaterializeCSS has
been forked by a community of enthusiasts, which continues to be
fully maintained by open source principes since 2021. Without
the many contributors who participated in this fork, this
project would probably not have received any updates anymore.
</p>
<div class="center">
<div class="image-container">
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
</div>
</div>
<h5>The original team</h5>
<p class="caption">
<a href="https://www.materializecss.com" target="_blank"
>MaterializeCSS</a
>
was originally launched in 2014 by a team of students from
Carnegie Mellon University. After 4 years of development, the
latest official release was released in September 2018 and
received more than 38K stars on GitHub.
</p>
<div class="center">
<div class="image-container">
<img src="images/materialize_team.jpeg" style="width:100%;" />
</div>
</div>
</div>
</div>
<!-- Table of Contents -->
<div class="col hide-on-small-only m3 xl3">
<div class="toc-wrapper">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#materialdesign">Material Design</a></li>
<li><a href="#team">Meet the Team</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Container -->
</main>
{{> footer }}
<script type="module" src="/src/main.ts"></script>
</body>
</html>