This file contains 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
<figure role="group"> | |
<p>Here is a chat message from us.</p> | |
<ul> | |
<li>add actions, sliders, etc.</li> | |
</ul> | |
<figcaption>Name of Chatbot – <time datetime="2018–04–27T13:32:05">13:32</time></figcaption> | |
</figure> | |
<figure role="group"> | |
<p>Customer message</p> |
This file contains 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 class="fb" href="https://www.facebook.com/[pagename]/"><div class="fb-like" data-href="https://www.facebook.com/[pagename]/" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false">Like!</div></a> | |
<!-- | |
Since Facebook does not allow customisation for their like button and does not provide any fall back (twitter and pinterest use <a>!!), here is a workaround. | |
You cannot change the contents of the <div>, so the only way is to wrap it into a link, which links to the profile you would like your visitors to like. Styling can be difficult, but its doable! | |
--> |
This file contains 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
<!-- This gist discribes a workaround for Android <4.4 and iOS <7. | |
The problem is that those iOS and Android versions do not support | |
flexbox wrapping and make (in the case I was working on) them invisible. | |
The goal is to flex a list of items with a fixed width and in case of floating a fixed height. | |
The workaround uses Modernizr to check if modernflexbox is available. | |
If not or JS is turned off, everything will be floated. |
This file contains 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
$disable-magic-sprite-selectors: true; | |
$icons-inline: false; | |
$icons-sprite-base-class: "%icons-sprite"; | |
$icons-layout: vertical; //must in order to get the correct position! -> this appears to be a bug in Compass 0.12.2; @include background-size gives the correct posititon, $var-sprite-position($img) does not. | |
$icons: sprite-map("folder-name/*.png"); | |
@import "folder-name/*.png"; | |
@each $img in sprite-names($icons) { | |
%icon-#{$img} { | |
@extend %icons-sprite; |
This file contains 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
$sprites: sprite-map("sprites/*.png"); | |
$sprites-retina: sprite-map("sprites-retina/*.png"); | |
@mixin sprite-background($name) { | |
background-image: sprite-url($sprites); | |
background-position: sprite-position($sprites, $name); | |
background-repeat: no-repeat; | |
display: block; | |
height: image-height(sprite-file($sprites, $name)); | |
width: image-width(sprite-file($sprites, $name)); |
This file contains 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
element { | |
background:url("path/to/image-1x") no-repeat; | |
} | |
@media (min--moz-device-pixel-ratio: 1.3), | |
(-o-min-device-pixel-ratio: 2.6 / 2), | |
(-webkit-min-device-pixel-ratio: 1.3), | |
(min-device-pixel-ratio: 1.3), | |
(min-resolution: 1.3dppx) { | |
element { | |
background-image: url("path/to/image-2x"); |
This file contains 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
<header> | |
<h1>Fake Gradient Borders</h1> | |
</header> | |
<article> | |
<section> | |
<h2>Default Style</h2> | |
<button class="default">Some Text</button> | |
</section> | |
<section> | |
<h2>Black Style</h2> |
This file contains 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 class="pattern"> | |
<a data-caption="Light, it is!" href="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" class="let-there-be-light"> | |
<span class="msg">Let there be light</span> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="" /> | |
</a> | |
<div> | |
</div> | |
<!--End Pattern HTML--> | |
<div class="container"> |