![]() fab-buttons-right - buttons will appear on right of FAB.fab-buttons-top - buttons will appear on top of FAB.Speed dial buttons container position is configured via additional class: ![]() In this case we need to add additional element with buttons: plus xmark 1 2 3 Tapping in the same spot should either activate the most commonly used action or close the open menu. The button should remain on screen after the menu is invoked. The floating action button can fling out related actions upon press. To make extended FAB we need to add additional fab-extended class to FAB element and put its extra text in element inside: plus Create Speed Dial The extended FAB is wider, and it includes a text label. To change its color just add color- class to FAB element. The following clases are avaialble:įAB supports all default colors. Just put it as the direct child of page or view: Floating Action Button plus plus įAB position is configured via additional fab- class. Layout of floating action button is very simple. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point. if you want to change the look of the page, you can find more information in src/scss/7-utilities/your-theme.Floating action button (FAB) is used for a promoted action.Do you want every link to be opened in a new tab? Change the value of linktarget in /data/data.json to a desired value.Change the Wallpaper by changing the value of variable wallpaper in /data/data.json (at the top of the document).use gulp reboot restart the server and build assetsĪlways run gulp buildbefore deploying assets Hints & Tips.use gulp serve start the server for local development (localhost:8080).use gulp update to compile the css and Javascript for development.use gulp build to compile the css and minify Javascript for production (without sourcemaps) and imagemin.run npm install to install gulp in your project.run npm install gulp-cli -g to install gulp.Make sure, you have node.js installed on your computer ( ).head to your local repository an enter vagrant up.Wait a while until all components are loaded an the box is running.head to the local repository and run docker-compose up./htdocs/assets/thumbnails store your link-images here./htdocs/assets/js compiled js-files (uesd live)./htdocs/assets/css compiled css-files (uesd live). ![]() /htdocs/ automatic generation of application cache.Use /htdocs/data/data.json for local development /src/js the development JS to compile the JS (via gulp)./src/scss the development files to build the CSS (via gulp)./src/manifests Docker is used as a local development-environment.allow static export of content to sync via Dropbox, iCloud or watheverįurther insights (want to help building this?).allow onsite-editing so you don't have to fiddle with the json-file.uses localStorage to store last opened tab.uses apllicationCache to minimize traffic (it even works offline, after first visit).You can just click on the desired tab and copy the url. NewĪdd a hash to the url to open tabs via direct call like so: yourUrl#tab-1 You can setup the usage of serviceworkers or define your own wallpaper in the json (on the top of the file). All you need to do is to create images for your links and place them on your server too. Just play with it - it's quite self explanatory. ![]() You can edit the tabs and links to your own liking. Just head over to /htdocs/data/data.json and play with that file. It shows up with a list of popular browsers and some development-ressources. The browserStartpage comes with a default list of links, to show you how it works. Make sure it supports php - this is the only requirement. Just place the folder /htdocs on your own webserver. This is especially useful if you need/want to share a of bunch links with friends or colleagues. ![]() The solution: host your own speeddial with this repo! Are you tired, that every browser uses it's own speeddial and you can't import that in your new browser? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |