Skip to content

Commit 2321144

Browse files
Simply CodinSimply Codin
Simply Codin
authored and
Simply Codin
committed
Base Component Completed
0 parents  commit 2321144

6 files changed

Lines changed: 272 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (http://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
39+
# Typescript v1 declaration files
40+
typings/
41+
42+
# Optional npm cache directory
43+
.npm
44+
45+
# Optional eslint cache
46+
.eslintcache
47+
48+
# Optional REPL history
49+
.node_repl_history
50+
51+
# Output of 'npm pack'
52+
*.tgz
53+
54+
# Yarn Integrity file
55+
.yarn-integrity
56+
57+
# dotenv environment variables file
58+
.env
59+
60+
#Sass Cache
61+
.sass-cache/

‎MatNav.css‎

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

‎MatNav.css.map‎

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

‎MatNav.sass‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
$menuitemwidth: 25%
2+
$iconcolor: #ffffff
3+
$menuheight: 75px
4+
$navcolor: red
5+
6+
html, body
7+
padding: 0px
8+
margin: 0px
9+
width: 100%
10+
height: 100%
11+
font-family: Arial
12+
icon
13+
font-family: "Material Icons"
14+
15+
.MatNav
16+
display: flex
17+
position: absolute
18+
width: 100%
19+
height: $menuheight
20+
margin: 0px
21+
bottom: 0
22+
padding: 0px
23+
background-color: $navcolor
24+
.MatNav-Item-Container
25+
display: flex
26+
flex-direction: column
27+
text-align: center
28+
justify-content: center
29+
margin: 0px
30+
list-style-type: none
31+
width: $menuitemwidth
32+
.MatNav-Item
33+
color: $iconcolor
34+
text-decoration: none
35+
padding: 9.5px 0px
36+
.MatNav-Item>p
37+
margin: 5px
38+
39+
@media screen and (min-width: 1024px)
40+
.MatNav
41+
display: flex
42+
flex-flow: column
43+
position: absolute
44+
width: 75px
45+
height: 100%
46+
margin: 0px
47+
left: 0
48+
padding: 0px
49+
background-color: $navcolor
50+
.MatNav-Item-Container
51+
display: flex
52+
flex-direction: column
53+
text-align: center
54+
background-color: red
55+
justify-content: center
56+
margin: 0px
57+
list-style-type: none
58+
width: $menuheight
59+
height: $menuheight
60+
.MatNav-Item
61+
color: $iconcolor
62+
text-decoration: none
63+
padding: 9.5px 0px
64+
.MatNav-Item>p
65+
margin: 5px

‎demo.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title></title>
7+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
8+
<link href="MatNav.css" rel="stylesheet">
9+
<style>
10+
hidden{
11+
display: none;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<main>
17+
<nav class="MatNav">
18+
<ul class="MatNav">
19+
<li class="MatNav-Item-Container">
20+
<a class="MatNav-Item" href="#D">
21+
<i class="material-icons">home</i>
22+
<p>Home</p>
23+
</a>
24+
</li>
25+
<li class="MatNav-Item-Container">
26+
<a class="MatNav-Item" href="#A">
27+
<i class="material-icons">search</i>
28+
<p>Search</p>
29+
</a>
30+
</li>
31+
<li class="MatNav-Item-Container">
32+
<a class="MatNav-Item" href="#N">
33+
<i class="material-icons">explore</i>
34+
<p>Discover</p>
35+
</a>
36+
</li>
37+
<li class="MatNav-Item-Container">
38+
<a class="MatNav-Item" href="#K">
39+
<i class="material-icons">more_vert</i>
40+
<p>More</p>
41+
</a>
42+
</li>
43+
</ul>
44+
</nav>
45+
</main>
46+
<footer hidden>
47+
© Created by SimplyCodin <icon></icon>
48+
</footer>
49+
</body>
50+
</html>

‎gulpfile.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var gulp = require('gulp');
2+
var browserSync = require('browser-sync').create();
3+
var reload = browserSync.reload;
4+
5+
// Save a reference to the `reload` method
6+
7+
// Watch scss AND html files, doing different things with each.
8+
gulp.task('serve', function () {
9+
10+
// Serve files from the root of this project
11+
browserSync.init({
12+
server: {
13+
baseDir: "./"
14+
},
15+
port:8080
16+
});
17+
18+
gulp.watch("*.html").on("change", reload);
19+
gulp.watch("*.css").on("change", reload);
20+
});

0 commit comments

Comments
 (0)