othersmallcities

<figure role="group">
  <p>Here is a chat message from us.</p>
  <ul>
    <li>add actions, sliders, etc.</li>
  </ul>
  <figcaption>Name of Chatbot &ndash; <time datetime="2018–04–27T13:32:05">13:32</time></figcaption>
</figure>

<figure role="group">
  <p>Customer message</p>

othersmallcities

<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!
-->

othersmallcities

<!-- 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.

othersmallcities

$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;

othersmallcities

$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));

othersmallcities

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");

othersmallcities

<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>

othersmallcities

<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">