Skip to content

Commit d582f0b

Browse files
author
Fred Heusschen
committed
initiaal commit
0 parents  commit d582f0b

11 files changed

+5150
-0
lines changed

‎.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Ignore Mac system files.
2+
._*
3+
.DS_Store
4+
5+
# Ignore sass-cache files.
6+
*.sass-cache*
7+
*.scssc
8+
9+
# Ignore Gulp modules
10+
node_modules

‎CONTRIBUTING.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Contributing to this project
2+
3+
Please take a moment to review this document in order to make the contribution
4+
process easy and effective for everyone involved.
5+
6+
7+
## Using the issue tracker
8+
9+
The issue tracker is the preferred channel for [bug reports](#bugs) and
10+
[features requests](#features), but please respect the following restrictions:
11+
12+
* Please **do not** use the issue tracker for personal support requests.
13+
14+
* Please keep the discussion **on topic** and respect the opinions of others.
15+
16+
17+
<a name="bugs"></a>
18+
## Bug reports
19+
20+
A bug is a _demonstrable problem_ that is caused by the code in the repository.
21+
Good bug reports are extremely helpful - thank you!
22+
23+
Guidelines for bug reports:
24+
25+
1. **Use the GitHub issue search** &mdash; check if the issue has already been
26+
reported.
27+
28+
2. **Check if the issue has been fixed** &mdash; try to reproduce it using the
29+
latest branch in the repository.
30+
31+
3. **Isolate the problem** &mdash; create a [reduced test
32+
case](http://css-tricks.com/reduced-test-cases/) and a live example.
33+
34+
A good bug report shouldn't leave others needing to chase you up for more
35+
information. Please try to be as detailed as possible in your report. What is
36+
your environment? What steps will reproduce the issue? What browser(s) and OS
37+
experience the problem? What would you expect to be the outcome? All these
38+
details will help people to fix any potential bugs.
39+
40+
41+
<a name="features"></a>
42+
## Feature requests
43+
44+
Feature requests are welcome. But take a moment to find out whether your idea
45+
fits with the scope and aims of the project. It's up to *you* to make a strong
46+
case to convince the project's developers of the merits of this feature. Please
47+
provide as much detail and context as possible.

‎README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
mburger CSS
2+
================
3+
4+
A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.<br />
5+
[Examples](https://www.mmenujs.com/mburger)
6+
7+
<img src="https://mmenujs.com/img/preview-3.png" alt="CSS animated hamburgers" width="100%" />
8+
9+
### Customize the hamburger
10+
By default, the hamburger adopts to its environment pretty good,
11+
the bars scale to fit and inherit their color for the parent element.<br />
12+
13+
Need help? Have a look at [the documentation](http://mmenujs.com/mburger) for examples and documentation.
14+
15+
### Licence
16+
The mburger CSS is licensed under the [CC-BY-4.0 license](http://creativecommons.org/licenses/by/4.0/).
17+
18+
### Development
19+
This project uses [Gulp(4)](http://gulpjs.com/) to transpile and minify SCSS to CSS.
20+
If you are unfamiliar with Gulp, check [this tutorial](https://travismaynard.com/writing/getting-started-with-gulp) on how to get started.<br />
21+
Run `gulp watch` in the command-line to put a watch on the files and run all scripts immediately after saving your changes.

‎bin/demo.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
height: 100%;
6+
}
7+
body {
8+
position: relative;
9+
background-color: #3ea7e1;
10+
-webkit-text-size-adjust: none;
11+
font-family: Arial, Helvetica, Verdana;
12+
font-size: 20px;
13+
line-height: 30px;
14+
color: #fff;
15+
}
16+
h1 {
17+
margin: 0 0 100px;
18+
text-shadow: 8px 10px 1px rgba(0,0,0,.1);
19+
text-transform: lowercase;
20+
font-family: 'Pacifico', Arial, sans-serif;
21+
font-weight: normal;
22+
font-size: 150px;
23+
line-height: 1;
24+
letter-spacing: -6px;
25+
}
26+
27+
@media (max-width: 500px) {
28+
h1 {
29+
font-size: 105px;
30+
letter-spacing: -2px;
31+
}
32+
}
33+
34+
a,
35+
a:hover {
36+
color: #fff;
37+
text-decoration: underline;
38+
}
39+
40+
#page {
41+
max-width: 600px;
42+
min-width: 300px;
43+
width: 90%;
44+
padding: 100px 10px;
45+
margin: auto;
46+
}
47+
48+
.xmpls {
49+
display: flex;
50+
flex-wrap: wrap;
51+
justify-content: center;
52+
margin: 75px -10px;
53+
text-align: center;
54+
}
55+
56+
.xmpl {
57+
position: relative;
58+
box-sizing: border-box;
59+
width: calc( 50% - 20px );
60+
padding-top: calc( 50% - 20px );
61+
margin: 10px;
62+
background: rgba(255, 255, 255, 0.05);
63+
box-shadow: 6px 8px 1px rgba(0,0,0,.1);
64+
transition: none 0.2s ease;
65+
transition-property: background-color, box-shadow, transform;
66+
cursor: pointer;
67+
}
68+
.xmpl:hover {
69+
background: rgba(255, 255, 255, 0.15);
70+
box-shadow: 4px 6px 0 rgba(0,0,0,.15);
71+
transform: translateY(2px);
72+
}
73+
74+
@media (min-width: 1280px) {
75+
.xmpls {
76+
margin-left: -320px;
77+
margin-right: -320px;
78+
}
79+
.xmpl {
80+
width: calc( 25% - 20px );
81+
padding-top: calc( 25% - 20px );
82+
}
83+
}
84+
85+
.xmpl button {
86+
position: absolute;
87+
top: 50%;
88+
left: 50%;
89+
transform: translate(-50%, -50%);
90+
}
91+
.xmpl .mburger {
92+
--mb-bar-height: 5px;
93+
width: 100px;
94+
height: 100px;
95+
}
96+
.xmpl span {
97+
position: absolute;
98+
bottom: 10%;
99+
left: 0;
100+
right: 0;
101+
}
102+

‎composer.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name" : "mburger-css",
3+
"version" : "1.0.0",
4+
"authors" : "Fred Heusschen <[email protected]>",
5+
"license" : "CC-BY-4.0",
6+
"description" : "A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.",
7+
"keywords" : [
8+
"hamburger",
9+
"icon",
10+
"CSS",
11+
"animation",
12+
"animated",
13+
"menu",
14+
"navigation"
15+
]
16+
}

‎dist/mburger.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
Tasks:
3+
4+
$ gulp : Runs "css" tasks.
5+
$ gulp watch : Starts a watch on "css" tasks.
6+
*/
7+
8+
9+
var { src, dest, watch } = require( 'gulp' );
10+
11+
var sass = require( 'gulp-sass' ),
12+
cleancss = require( 'gulp-clean-css' );
13+
14+
15+
var inputDir = 'src',
16+
outputDir = 'dist';
17+
18+
19+
20+
21+
/*
22+
$ gulp
23+
*/
24+
const defaultTask = ( cb ) => {
25+
return css( cb );
26+
};
27+
exports.default = defaultTask;
28+
29+
30+
/*
31+
$ gulp watch
32+
*/
33+
const watchTask = ( cb ) => {
34+
return watch( inputDir + '/**/*.scss', css );
35+
};
36+
exports.watch = watchTask;
37+
38+
39+
40+
/*
41+
CSS tasks.
42+
*/
43+
44+
// Compile and concatenate all SCSS files to CSS.
45+
const css = ( cb ) => {
46+
47+
return src( inputDir + '/*.scss' )
48+
.pipe( sass().on( 'error', sass.logError ) )
49+
.pipe( cleancss() )
50+
.pipe( dest( outputDir ) );
51+
};
52+

‎index.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="author" content="www.frebsite.nl" />
6+
<meta content="width=600px user-scalable=yes" name="viewport" />
7+
<meta name="robots" content="noindex, nofollow" />
8+
9+
<title>mburger, CSS animated hamburgers!</title>
10+
11+
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
12+
<link type="text/css" rel="stylesheet" href="bin/demo.css" />
13+
<link type="text/css" rel="stylesheet" href="dist/mburger.css" />
14+
</head>
15+
<body>
16+
<div id="page">
17+
18+
<h1>mburger</h1>
19+
<p>A small collection of CSS animated hamburgers.
20+
All set up to work out of the box with the mmenu.js plugin.
21+
Click a hamburger to see the animation.
22+
More info <a href="https://www.mmenujs.com/mburger" target="_blank">here</a>.</p>
23+
24+
<div class="xmpls">
25+
26+
<div class="xmpl">
27+
<button class="mburger mburger--collapse">
28+
<span></span>
29+
<span></span>
30+
<span></span>
31+
</button>
32+
<span>collapse</span>
33+
</div>
34+
<div class="xmpl">
35+
<button class="mburger mburger--spin">
36+
<span></span>
37+
<span></span>
38+
<span></span>
39+
</button>
40+
<span>spin</span>
41+
</div>
42+
<div class="xmpl">
43+
<button class="mburger mburger--squeeze">
44+
<span></span>
45+
<span></span>
46+
<span></span>
47+
</button>
48+
<span>squeeze</span>
49+
</div>
50+
<div class="xmpl">
51+
<button class="mburger mburger--tornado">
52+
<span></span>
53+
<span></span>
54+
<span></span>
55+
</button>
56+
<span>tornado</span>
57+
</div>
58+
</div>
59+
60+
<h3>Customize the hamburger</h3>
61+
<p>By default, the hamburger adopts to its environment pretty good,
62+
the bars scale to fit and inherit their <code>color</code> for the parent element.</p>
63+
<p>For more examples and the full documentation please visit: <a href="https://www.mmenujs.com/mburger" target="_blank">mmenujs.com/mburger</a>.</p>
64+
65+
</div>
66+
67+
<script>
68+
document.addEventListener('click', ( evnt ) => {
69+
var target = evnt.target;
70+
if ( target.matches('.xmpl') || target.closest('.xmpl') ) {
71+
target.closest('.xmpl').classList.toggle( 'mm-wrapper_opened' );
72+
}
73+
});
74+
</script>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)