dyarfi

/* -------------------------------------------------------------------------- */
// All Bootstrap 4 Sass Mixins [Cheat sheet]
// @author http://anschaef.de
// @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
/* -------------------------------------------------------------------------- */

// Grid variables
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

dyarfi

Docker Commands, Help & Tips

Show commands & management commands

$ docker

Docker version info

dyarfi

/*global require*/
"use strict";

var gulp = require('gulp'),
    gulpCopy = require('gulp-copy'),
    path = require('path'),
    data = require('gulp-data'),
    // pug = require('gulp-pug'),
    twig = require('gulp-twig'), // Decided to use twig, because already familiar with it
    prefix = require('gulp-autoprefixer'),

dyarfi

const { src, dest, parallel, series, watch } = require('gulp');
// const pug = require('gulp-pug'); // Pug default view template
const twig = require('gulp-twig');
const sass = require('gulp-sass');
const prefix = require('gulp-autoprefixer');
const data = require('gulp-data');
//const minifyCSS = require('gulp-csso');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const plumber = require('gulp-plumber');

dyarfi

<div class="container">
   <div class="row">
      <h1 class="headline">Headline Website</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
   <div class="row">
      <h2 class="title">Headline Website</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>

dyarfi

// Our font
@import url('https://fonts.googleapis.com/css?family=Poppins:200,400,600,800&display=swap');

// Variables
$primary : #2387f3;
$secondary : #666666;
$font-weight-bolder : 600;

// This placeholder can be used in other class
%placeholder {

dyarfi

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Poppins:200,400,600,800&display=swap");
.headline, .title {
  color: #3687de;
  font-weight: 600;
}

.headline ~ p, .title ~ p {
  color: #666666;
  font-style: italic;

dyarfi

<div id="main" class="container">   
   <div class="row">      
      <div class="shape">      
         <div class="shape-body">
            <h1 class="headline">Headline Website</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <h2 class="title">Headline Website</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </div>
      </div>

dyarfi

/* --- Box Shadow --- */
// -- Placeholder -- box shadow default placeholder
%box-shadow-ready { 
   box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1); 
}
%box-shadow-hover { 
   box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .175); 
}
// -- Placeholder -- box-shadow
%box-shadow { 

dyarfi

/* --- Box Shadow --- */
.shape-body {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.shape-body:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.175);
}

.shape-body {