Chris Soueidan loogart
loogart
/ bootstrap-4-sass-mixins-cheat-sheet.scss
Created
March 27, 2019 16:51
— forked from anschaef/bootstrap-4-sass-mixins-cheat-sheet.scss
Bootstrap 4 Sass Mixins [Cheat sheet with examples]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* -------------------------------------------------------------------------- */ | |
| // All Bootstrap 4 Sass Mixins [Cheat sheet] | |
| // Updated to Bootstrap v4.1.x | |
| // @author https://anschaef.de | |
| // @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins | |
| /* -------------------------------------------------------------------------- */ | |
| // Grid variables | |
| $grid-columns: 12 !default; | |
| $grid-gutter-width: 30px !default; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="modal-container"> | |
| <div class="modal-background"> | |
| <div class="modal"> | |
| <h2>I'm a Modal</h2> | |
| <p>Hear me roar.</p> | |
| <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none"> | |
| <rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect> | |
| </svg> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="wrap-3d"> | |
| <div class="intro"> | |
| <h1>Perspective Scrolling in CSS</h1> | |
| <p>A 3 dimensional scrolling experience built in CSS only. The trick is to rotate a single element around its x-axis, while its parent provides the perspective environment and a special perspective-origin.</p> | |
| <p>Best viewed in Chrome/Safari on your desktop. Passed my test on Android, but lacks performance. Test failed on IOS7.</p> | |
| </div> | |
| <div class="item-3d"> | |
| <span class="ground"></span> |
This is the base skin of Video.js that can be modified to make custom skins.
The great thing about Video.js skins is they work in both HTML5 video AND Flash!
A Pen by Steve Heffernan on CodePen.
loogart
/ materialDesignShadowHelper.less
Created
February 24, 2016 16:29
— forked from gefangenimnetz/materialDesignShadowHelper.less
Less css box-shadow helper for cards & modals according to Googles Material Design spec.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * A mixin which helps you to add depth to elements according to the Google Material Design spec: | |
| * http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality | |
| * | |
| * Please note that the values given in the specification cannot be used as is. To create the same visual experience | |
| * the blur parameter has to be doubled. | |
| * | |
| * Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp) | |
| * | |
| * Example usage: |