$tool-height: 3em
$ub-fonts: urbane-rounded, sans-serif
$gr-fonts: brandon-grotesque, sans-serif
$fw-heavy: 900
$fw-bold: 700
$fw-dbold: 600
$fw-med: 500
$fw-reg: 400
$fw-light: 300
$fw-ex-light: 200
$fw-thin: 100
$text-right: right
$text-center: center
=type($font: $gr-fonts, $size: 1em, $weight: $fw-reg, $align: left);
font-family: $font;
font-weight: $weight;
text-align: $align;
font-size: $size;
text-rendering: auto;
=text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba($dark, 0.4));
text-shadow: $x $y $blur $color;
=box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba($dark, 0.4), $inset: “”);
@if $inset != “”;
+css3-prefix(“box-shadow”, $inset $x $y $blur $color);
@else;
+css3-prefix(“box-shadow”, $x $y $blur $color);
.cover-image
background: linear-gradient( rgba($dark, 0.25),
rgba($dark, 0.65) ),
url(‘image path’)
With use of gradient overlay technique of CSS background property you can easily avoid:
.cover-image
background: linear-gradient( rgba($dark, 0.25),
rgba($dark, 0.65) ),
url(‘../img/animal_list_page/whiskey_lab.jpg’);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 12vw));
Achievment by image shaping with CSS:
.cover-image
[src^=”map-marker-image"]
border-radius: 50%
Achievment by styling markers with css.
No nee to process image for marker. It will get direct shape with border radius
Styling google map markers with CSS is not possible directly because of the limitations of Google Map API. However, a smart way to do it is by naming the marker images with a specific naming convention in the begining of the image name and selecting with CSS string( ^ ) or substring ( * ) selectors.
=flexbox;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
%flexbox;
+flexbox;
=inline-flex;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
%inline-flex;
+inline-flex;
=flex-none;
flex: none;
.flex-parent;
+flexbox;
.flex-child;
+flex(1, 1, auto);
.flex-none;
+flex-none;
.flex-wrap;
+flex-wrap(wrap);
.flex-vertical;
+flex-direction(column);
// Flex align items;
.flex-align-items-center;
+align-items(center);
.flex-align-items-stretch;
+align-items(stretch);
.flex-align-items-start;
+align-items(flex-start);
.flex-align-items-end;
+align-items(flex-end);
You can grab full plugin here: SASS Flexbox mixin - by liquidcharcoal
The prototype of this app is live here: Malack App To get best out of the link. you might wanna turn on developer mode and choose responive device to make it look like a mobile app.