Skip to content

Commit 1ee2d37

Browse files
sesemayasesemaya
committed
add a very basic doc page
1 parent 4aea7f8 commit 1ee2d37

File tree

9 files changed

+211
-6
lines changed

9 files changed

+211
-6
lines changed

‎assets/js-project/project.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
$(function () {
22

33
// project js
4+
if ($('.doc-toolbar').length) {
5+
var docToolbarHeight = $('.doc-toolbar').outerHeight();
6+
7+
$(window).on('scroll', function () {
8+
if ($(this).scrollTop() > docToolbarHeight) {
9+
$('.doc-toolbar').addClass('waterfall');
10+
} else {
11+
$('.doc-toolbar').removeClass('waterfall');
12+
}
13+
});
14+
}
415

516
});

‎assets/sass-project/project.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,28 @@
22
@import "../sass/variables";
33

44
// project css
5+
.doc-jumbotron {
6+
background-image: url(#{$css-path}/images/doc-jumbotron-bg.jpg);
7+
background-position: 50% 50%;
8+
background-repeat: no-repeat;
9+
background-size: cover;
10+
padding-top: ($toolbar-height * 2);
11+
12+
@include media-breakpoint-up(lg) {
13+
margin-left: $navdrawer-width-mobile;
14+
}
15+
}
16+
17+
.doc-main {
18+
@include media-breakpoint-up(lg) {
19+
margin-left: $navdrawer-width-mobile;
20+
}
21+
}
22+
23+
.doc-toolbar {
24+
position: fixed;
25+
26+
@include media-breakpoint-up(lg) {
27+
margin-left: $navdrawer-width-mobile;
28+
}
29+
}

‎css/images/doc-jumbotron-bg.jpg‎

79 KB
Loading

‎css/project.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,28 @@
1+
.doc-jumbotron {
2+
background-image: url(./images/doc-jumbotron-bg.jpg);
3+
background-position: 50% 50%;
4+
background-repeat: no-repeat;
5+
-webkit-background-size: cover;
6+
background-size: cover;
7+
padding-top: 7rem;
8+
}
9+
@media (min-width: 1280px) {
10+
.doc-jumbotron {
11+
margin-left: 17.5rem;
12+
}
13+
}
114

15+
@media (min-width: 1280px) {
16+
.doc-main {
17+
margin-left: 17.5rem;
18+
}
19+
}
20+
21+
.doc-toolbar {
22+
position: fixed;
23+
}
24+
@media (min-width: 1280px) {
25+
.doc-toolbar {
26+
margin-left: 17.5rem;
27+
}
28+
}

‎css/project.css.map‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/project.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/project.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
$(function () {
22

33
// project js
4+
if ($('.doc-toolbar').length) {
5+
var docToolbarHeight = $('.doc-toolbar').outerHeight();
6+
7+
$(window).on('scroll', function () {
8+
if ($(this).scrollTop() > docToolbarHeight) {
9+
$('.doc-toolbar').addClass('waterfall');
10+
} else {
11+
$('.doc-toolbar').removeClass('waterfall');
12+
}
13+
});
14+
}
415

516
});

‎js/project.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎templates/index.html‎

Lines changed: 133 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,140 @@
1515

1616
<!-- favicon -->
1717
</head>
18-
<body>
18+
<body class="doc-body" id="doc_index_body">
19+
<div class="toolbar toolbar-waterfall toolbar-dark doc-toolbar" id="doc_index_toolbar">
20+
<a class="toolbar-toggler hidden-lg-up" data-toggle="navdrawer" data-type="permanent" href="#doc_index_navdrawer_menu"><i class="material-icons">menu</i></a>
21+
<a class="toolbar-brand hidden-lg-up" href="index.html">Material</a>
22+
<div class="dropdown pull-xs-right">
23+
<a class="navbar-toggler m-r-no" data-toggle="dropdown" href="javascript:void(0)"><i class="material-icons">more_vert</i></a>
24+
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
25+
<a class="dropdown-item" href="https://github.com/Daemonite/material" target="_blank"><i class="material-icons m-r-md">code</i><span class="m-r-md">Fork me on GitHub</span></a>
26+
<a class="dropdown-item" href="http://labs.daemon.com.au/" target="_blank"><i class="material-icons m-r-md">forum</i><span class="m-r-md">Let us know what you think</span></a>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<nav class="navdrawer navdrawer-permanent" id="doc_index_navdrawer_menu">
32+
<div class="navdrawer-content">
33+
<div class="toolbar toolbar-bordered">
34+
<a class="toolbar-brand" href="index.html">Material</a>
35+
</div>
36+
<p class="navdrawer-subheader">More to come...</p>
37+
</div>
38+
</nav>
39+
40+
<div class="jumbotron jumbotron-fluid m-b-xl doc-jumbotron" id="doc_index_jumbotron">
41+
<div class="container">
42+
<div class="row">
43+
<div class="col-sm-10 col-md-8 col-xl-6 offset-sm-1 offset-md-2 offset-xl-3">
44+
<h1 class="typography-display-4">Material</h1>
45+
<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>
46+
<p><a class="btn btn-lg btn-secondary" data-toggle="modal" href="#doc_index_modal_download">Download Material</a></p>
47+
<p class="m-b-no text-white-hint typography-caption">Currently v4.0.0-alpha.1</p>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<div class="dialog fade" id="doc_index_modal_download" tabindex="-1">
54+
<div class="dialog-dialog">
55+
<div class="dialog-content">
56+
<div class="dialog-header">
57+
<h2 class="dialog-title">Download</h2>
58+
</div>
59+
<div class="dialog-body">
60+
<p>Material v4.0.0-alpha.1 is available for download in several ways, including some of the favourite package managers.</p>
61+
<h3 class="m-t-lg typography-subheading">Material CSS and JS</h3>
62+
<p>Download Material's ready-to-use code to easily drop into any project. Includes compiled and minified versions of CSS and JS plugins.</p>
63+
<p><a class="btn btn-flat-primary" href="https://github.com/Daemonite/material/releases" target="_blank">Download Material</a></p>
64+
<h3 class="m-t-lg typography-subheading">Package Managers</h3>
65+
<p>Pull in Material's source files into nearly any project with some of the most popular package managers.</p>
66+
<pre class="p-a-md">
67+
<code>npm install daemonite-material@4.0.0-alpha.1</code>
68+
</pre>
69+
<pre class="p-a-md">
70+
<code>bower install daemonite-material#4.0.0-alpha.1</code>
71+
</pre>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<main class="doc-main" id="doc_index_main" role="main">
78+
<div class="container">
79+
<div class="row">
80+
<div class="col-sm-10 col-md-8 col-xl-6 offset-sm-1 offset-md-2 offset-xl-3">
81+
<div class="m-b-xl">
82+
<h2 class="text-primary">Introduction</h2>
83+
<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>
84+
</div>
85+
86+
<div class="blockquote m-b-xl">
87+
<p class="font-weight-light text-muted">Contents</p>
88+
<p><a href="#doc_index_content_goals">Goals</a></p>
89+
<p><a href="#doc_index_content_principles">Principles</a></p>
90+
<p><a href="#doc_index_content_roadmap">Roadmap</a></p>
91+
</div>
92+
93+
<div class="m-b-xl" id="doc_index_content_goals">
94+
<h3 class="text-primary">Goals</h3>
95+
<div class="row">
96+
<div class="col-md-6 m-t-lg">
97+
<h4 class="text-secondary typography-subheading">Primary</h4>
98+
<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 a final outcome that is in line with the principles and specifics of Google Material Design.</p>
99+
<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>
100+
</div>
101+
<div class="col-md-6 m-t-lg">
102+
<h4 class="text-secondary typography-subheading">Secondary</h4>
103+
<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>
104+
<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>
105+
</div>
106+
</div>
107+
</div>
108+
109+
<div class="m-b-xl" id="doc_index_content_principles">
110+
<h3 class="text-primary">Principles</h3>
111+
<div class="row">
112+
<div class="col-md-6 m-t-lg">
113+
<h4 class="text-secondary typography-subheading">CSS &amp; HTML</h4>
114+
<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>
115+
<p>Some of the Bootstrap components seem to lack an exact match in Google Material Design, but this may simply due to different naming conventions. In this case, this project will not only style this Bootstrap component based on the specifications laid out in Google Material Design Guidelines, it will also add an additional CSS selector that is in line with Google Material Design naming convention on top of Bootstrap's CSS selector. For example, Bootstrap's navbars = Google Material Design's toolbars, so <code>.navbar</code> &amp; <code>.navbar-*</code> will act the same as <code>.toolbar</code> &amp; <code>.toolbar-*</code> respectively.</p>
116+
<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 tags = Google Material Design's chips.</p>
117+
<p>If a Bootstrap component lacks a related counterpart in Google Material Design completely, this project will style this component based on custom iteration of Google Material Design Guidelines. For example, Bootstrap's button groups, jumbotrons and paginations, etc.</p>
118+
</div>
119+
<div class="col-md-6 m-t-lg">
120+
<h4 class="text-secondary typography-subheading">JavaScript</h4>
121+
<p>No modification has been made to Bootstrap's JavaScript. It is safe to use Bootstrap's JavaScript as it is.</p>
122+
<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>
123+
</div>
124+
</div>
125+
</div>
126+
127+
<div class="m-b-xl" id="doc_index_content_roadmap">
128+
<h3 class="text-primary">Roadmap</h3>
129+
<div class="row">
130+
<div class="col-md-4 m-t-lg">
131+
<h4 class="text-secondary typography-subheading">Near-term</h4>
132+
<p>Bug fixes and updates alongside Bootstrap 4's continuous releases.</p>
133+
</div>
134+
<div class="col-md-4 m-t-lg">
135+
<h4 class="text-secondary typography-subheading">Mid-term</h4>
136+
<p>Add missing support for some Google Material Design components (e.g. snackbars).</p>
137+
</div>
138+
<div class="col-md-4 m-t-lg">
139+
<h4 class="text-secondary typography-subheading">Long-term</h4>
140+
<p>Rewrite all JavaScript plugins in ES6 to take advantage of the newest JavaScript enhancements.</p>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
</main>
148+
19149
<!-- js -->
20-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
21-
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
150+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
151+
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
22152
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>
23153
<script src="../js/material.min.js"></script>
24154
<script src="../js/project.min.js"></script>

0 commit comments

Comments
 (0)