├── .gitattributes ├── .gitignore ├── .npmignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── demo ├── index.css └── index.html ├── dist ├── lib │ └── modernizr.touch.js ├── mfb.css ├── mfb.css.map ├── mfb.js ├── mfb.min.css └── mfb.min.js ├── package.json ├── src ├── _ │ ├── _fountain.scss │ ├── _slidein-spring.scss │ ├── _slidein.scss │ └── _zoomin.scss ├── closure │ ├── bottom.js │ └── top.js ├── mfb.css.map ├── mfb.js └── mfb.scss └── test └── unit.js /.gitattributes: -------------------------------------------------------------------------------- 1 | **/*.css linguist-vendored=true 2 | **/*.scss linguist-vendored=true 3 | **/*.html linguist-vendored=true 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .sass-cache/ 4 | .grunt 5 | ga.html 6 | gh-pages 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test/ 2 | index.css 3 | index.html 4 | showcase.html 5 | .sass-cache/ 6 | .jshintrc 7 | .gitignore 8 | .grunt 9 | demo 10 | gh-pages 11 | ga.html 12 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // Project configuration. 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch: { 7 | css: { 8 | files: 'src/**/*.scss', 9 | tasks: ['sass:base', 'cssmin'] 10 | }, 11 | js: { 12 | files: 'src/**/*.js', 13 | tasks: ['copy:js', 'preprocess:closure', 'uglify'] 14 | } 15 | }, 16 | sass: { 17 | base: { 18 | files: { 19 | 'dist/mfb.css': 'src/mfb.scss' 20 | } 21 | } 22 | }, 23 | 24 | clean: { 25 | check: ['.grunt/grunt-gh-pages/gh-pages/check'], 26 | live: ['.grunt/grunt-gh-pages/gh-pages/live'] 27 | }, 28 | 29 | cssmin: { 30 | main: { 31 | files: [{ 32 | expand: true, 33 | cwd: 'src', 34 | src: ['mfb.css', '!*.min.css'], 35 | dest: 'dist', 36 | ext: '.min.css' 37 | }] 38 | } 39 | }, 40 | 41 | uglify: { 42 | main: { 43 | files: { 44 | 'dist/mfb.min.js': ['dist/mfb.js'] 45 | } 46 | } 47 | }, 48 | 49 | preprocess: { 50 | inline : { 51 | src : [ 'gh-pages/index.html' ], 52 | options: { 53 | inline : true, 54 | context : { 55 | DEBUG: false 56 | } 57 | } 58 | }, 59 | closure: { 60 | src : [ 'dist/*.js' ], 61 | options: { 62 | inline : true 63 | } 64 | } 65 | }, 66 | 67 | copy: { 68 | live: { 69 | files: [{ 70 | src: ['demo/*', 'dist/**/*'], 71 | dest: 'gh-pages', 72 | expand: true, flatten: true 73 | }] 74 | }, 75 | js: { 76 | src: ['src/*.js'], 77 | dest: 'dist', 78 | expand: true, flatten: true 79 | } 80 | }, 81 | 82 | useminPrepare: { 83 | html: 'demo/index.html', 84 | options: { 85 | dest: 'gh-pages/live/' 86 | } 87 | }, 88 | 89 | usemin: { 90 | html: ['gh-pages/index.html'] 91 | }, 92 | 93 | livePages: [ 94 | 'index.html', 95 | 'index.css', 96 | '*.css', 97 | '**/*.map', 98 | 'mfb.js', 99 | 'modernizr.touch.js'], 100 | 'gh-pages': { 101 | options: { 102 | base: 'gh-pages', 103 | }, 104 | 'live': { 105 | src: ['<%= livePages %>'] 106 | }, 107 | 'check': { 108 | options: { 109 | push: false 110 | }, 111 | src: ['<%= livePages %>'] 112 | } 113 | } 114 | }); 115 | 116 | grunt.loadNpmTasks('grunt-gh-pages'); 117 | grunt.loadNpmTasks('grunt-contrib-watch'); 118 | grunt.loadNpmTasks('grunt-contrib-sass'); 119 | grunt.loadNpmTasks('grunt-contrib-clean'); 120 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 121 | grunt.loadNpmTasks('grunt-contrib-uglify'); 122 | grunt.loadNpmTasks('grunt-preprocess'); 123 | grunt.loadNpmTasks('grunt-usemin'); 124 | grunt.loadNpmTasks('grunt-contrib-copy'); 125 | 126 | // Publish this to live site 127 | grunt.registerTask('live', 128 | ['clean:live', 129 | 'copy:live', 130 | 'useminPrepare', 131 | 'preprocess:inline', 132 | 'usemin', 133 | 'gh-pages:live']); 134 | // Live site dry run 135 | grunt.registerTask('livecheck', [ 136 | 'clean:check', 137 | 'copy:live', 138 | 'useminPrepare', 139 | 'preprocess:inline', 140 | 'usemin', 141 | 'gh-pages:check']); 142 | 143 | grunt.registerTask('build', [ 144 | 'sass', 145 | 'cssmin', 146 | 'uglify' 147 | ]); 148 | 149 | grunt.registerTask('watch-css', ['watch:css']); 150 | grunt.registerTask('watch-js', ['watch:js']); 151 | grunt.registerTask('default', []); 152 | }; 153 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright Nobitagit https://github.com/nobitagit (c) 2015 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Material Floating Button 2 | ======================== 3 | 4 | Material design floating button action implementation. 5 | 6 | Made to be semantic, fast and easy to customize. 7 | ~~Shamelessly~~ inspired by action buttons from Google Inbox, Evernote and Path. 8 | 9 | See a demo [here](http://nobitagit.github.io/material-floating-button/) to see it in action or just take a look at this awesome gif: 10 | 11 | 12 | 13 | Test all the available effects to date in the [demo](http://nobitagit.github.io/material-floating-button/). 14 | 15 | ##Other versions## 16 | Also available as: 17 | 18 | - [Angular directive](https://github.com/nobitagit/ng-material-floating-button) 19 | - [React Component](https://github.com/nobitagit/react-material-floating-button) 20 | 21 | ##How to use## 22 | ###Basic usage### 23 | Clone/download the repo from Github or just use npm: 24 | ``` 25 | npm install mfb --save 26 | ``` 27 | 28 | (Optionally) run `npm install` to have access to the configured Grunt tasks if you use them, then reference the basic css styles in your `` like so: 29 | 30 | ```html 31 | 32 | ``` 33 | 34 | Use the appropriate html structure (better explained later), for example: 35 | 36 | ```html 37 | 40 | ``` 41 | Everything should already work fine. 42 | 43 | You may or may not want to include the provided `mfb.js` script depending on the need to support click/touch. 44 | 45 | ```html 46 | 47 | ``` 48 | 49 | For a breakdown on why and when you need to include the script please refer to [Toggling options and touch devices support](#toggling-opts). 50 | 51 | ###Customising the component### 52 | ####HTML#### 53 | The basic structure of the component is the following (the customisable classes/attributes are in curly braces): 54 | 55 | ```html 56 | 75 | ``` 76 | 77 | ####SCSS/CSS#### 78 | 79 | Although you can use the provided css as is, it's highly likely that you will want to customise the looks and behavior of the component by changing its underlying css. A number of variables is provided for your convenience in the SASS file. 80 | 81 | The best way to tweak them is leave the `src/mfb.scss` source as is, import it in your own style sheet and define your custom variables before the `@import` statement right there. For example: 82 | 83 | ```scss 84 | // your .scss working file 85 | $main-color: #4991EF; 86 | 87 | @import "path/to/src/mfb.scss"; 88 | ``` 89 | 90 | This will leave the core files unchanged from the source. You will then be able to keep this repo as upstream and pull in any future changes without having to worry about overwriting your changes. 91 | 92 | Here below is a breakdown of all the variables currently available, along with their defaults. 93 | 94 | #####Basic##### 95 | 96 | Variable name | Default value | Explanation 97 | --- | --- | --- 98 | $main-color | #E40A5D | main/primary color of the component 99 | $bright-text | rgba(255, 255, 255, 0.8) | color of icons and text 100 | $number-of-child-buttons | 4 | how many child buttons the component supports 101 | 102 | #####Effects##### 103 | **n.b.** - set to true to include the effect styles in the compiled .css file. To actually activate the desired effect you need to reference the corresponding class in the markup (see [here](#html)) 104 | 105 | Variable name | Default value 106 | --- | --- 107 | $effects-zoomin | true 108 | $effects-slidein | true 109 | $effects-slidein-spring | true 110 | $effects-fountain | true 111 | 112 | As a suggestion, try to only include the animation you're using in production in order to have a much lighter css. 113 | 114 | #####Speeds##### 115 | 116 | Variable name | Default value | Explanation 117 | --- | --- | --- 118 | $delay-staggering-inflate | 0.1s | each child button can appear with a slight, more natural delay (set to 0 for no-delay) 119 | $slide-speed | 0.5s | the child buttons animate at this speed 120 | $label-hover-off | 0.5s | the child buttons labels fade *in* at this speed 121 | $label-hover-on | 0.3s | the child buttons labels fade *out* at this speed 122 | 123 | #####Sizes##### 124 | 125 | Variable name | Default value | Explanation 126 | --- | --- | --- 127 | $main_button_size | 25px | the distance of the main button from the closest corners of the screen 128 | $labels-font-size | 13px |font-size for all labels 129 | $labels-padding-vertical | 4px | top & bottom padding for the labels 130 | $labels-padding-horizontal | 10px | left & right padding for the labels 131 | 132 | You can compile the final css on your own or use the provided, pre-configured Grunt tasks for it. After installing all dependencies (by running `npm install` from the terminal) type `grunt sass` (on time compilation) or `grunt watch-css` (live reload triggered after the scss files are changed). 133 | 134 | 135 | ####Toggling options and touch devices support#### 136 | The menu can be customised to be activated either on hover or on click/tap. To assign the desired toggling method the component provides some attributes to add this functionality in a declarative way right from the markup. 137 | 138 | #####Hover toggling##### 139 | 140 | If you're only interested in desktop support and want the menu to be activated on hover you won't need to include any scripts as that animation is CSS-based and included in the stylesheet provided. Just set the `data-mfb-toggle` attribute to `hover` like so: 141 | 142 | ```html 143 |