| linter: | |
| rules: | |
| - always_declare_return_types | |
| - always_put_control_body_on_new_line | |
| - always_put_required_named_parameters_first | |
| - always_require_non_null_named_parameters | |
| - always_specify_types | |
| - always_use_package_imports | |
| - annotate_overrides | |
| - avoid_annotating_with_dynamic |
Add kiosk.js file with the content below to your www folder in config.
Like any other custom script, use ui-lovelace.yaml resources section to reference the kiosk.js file.
Make sure you add kiosk somewhere in your URL. You can use it in the id of your view or in the query string.
A responsive grid based on flexbox. Requires only two classes to function, and is infinitely expandable! I also added a semantic version.
A Pen by Tania Rascia on CodePen.
| // Ensure CSS grid works with IE 11 spec. | |
| // https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/ | |
| // sass-lint:disable no-vendor-prefixes, no-duplicate-properties | |
| @mixin display-grid { | |
| display: -ms-grid; | |
| display: grid; | |
| } | |
| // $columns values should be delimited by a space | |
| @mixin grid-template-columns($columns...) { |
It uses CSS transform and perspective to create a unique hololens-like animation effect.
Can be used for many more use cases, you will probably have your own ideas.
This is an experimental idea, you may want to flesh it out for use in production.
| <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> | |
| <section> | |
| <div class="nav"> | |
| <ul class="radial-nav"> | |
| <li data-content="js"><a href="#">JS</a></li> | |
| <li data-content="css"><a href="#">CSS</a></li> | |
| <li data-content="html5"><a href="#">HTML5</a></li> | |
| <li data-content="jade"><a href="#">JADE</a></li> | |
| <li data-content="git"><a href="#">GIT</a></li> | |
| <li data-content="grunt"><a href="#">GRUNT</a></li> |
| <div class="untitled"> | |
| <div class="untitled__slides"> | |
| <div class="untitled__slide"> | |
| <div class="untitled__slideBg"></div> | |
| <div class="untitled__slideContent"> | |
| <span>London</span> | |
| <span>Scout</span> | |
| <a class="button" href="https://unsplash.com/@scoutthecity" target="/black">Unsplash Profile</a> | |
| </div> |
Summerbird's logo (SVG) animated in CSS
A Pen by Joseph Martinez on CodePen.
Simple floating CSS animation using transform and box-shadow.
A Pen by Joseph Martinez on CodePen.
| #!/usr/bin/env ruby | |
| require 'tmpdir' | |
| require 'fileutils' | |
| dir = Dir.tmpdir() | |
| if File.directory?("#{dir}/bulma") | |
| FileUtils.remove_dir("#{dir}/bulma") | |
| end |