DEV Community: Stanislav Vranic

Document ready Vanilla JS

Stanislav Vranic — Wed, 23 Dec 2020 12:20:31 +0000

document.addEventListener("DOMContentLoaded", function() {

});

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  /* Custom JS */ 
});

Image HTML as BG image with Caption

Stanislav Vranic — Wed, 09 Sep 2020 11:44:47 +0000

Codepen image HTML as bg of Caption

Used grid: simple-flex-grid

Youtube video iframe responsive

Stanislav Vranic — Wed, 09 Sep 2020 00:58:48 +0000

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  max-width: 1920px;
  margin: 0 auto;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 1080px;
  }
}

Flex Vertical middle position

Stanislav Vranic — Wed, 09 Sep 2020 00:28:58 +0000

display: flex;
justify-content: center;
height: 100%;
flex-direction: column;

Lazy videos and images - lazysizes

Stanislav Vranic — Tue, 08 Sep 2020 10:46:07 +0000

lazysizes github
npm install lazysizes --save

<iframe frameborder="0"
    class="lazyload"
    allowfullscreen=""
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

CSS Media Queries BreakPoints

Stanislav Vranic — Thu, 03 Sep 2020 16:23:07 +0000

@media only screen and (max-width: 991px) {...}

@media only screen and (max-width: 767px) {...}

@media only screen and (min-width: 768px) {...}

@media only screen and (min-width: 992px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}

@media only screen and (max-width: 767px) and (orientation: portrait) {...}
@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

Anchor arrow right

Stanislav Vranic — Wed, 19 Aug 2020 11:33:24 +0000

a {
            position: relative;

            &:after {
              content: "";
              border: solid @mid-blue;
              border-width: 0 2px 2px 0;
              width: 11px;
              height: 11px;
              position: absolute;
              left: auto;
              right: -20px;
              top: 50%;
              transform: rotate(-45deg) translateX(0%) translateY(-60%);
            }
          }

dots

Stanislav Vranic — Wed, 19 Aug 2020 11:20:09 +0000

ul {
    list-style: none;
    padding-left: 35px;

    li {
      position: relative;

      &:before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        height: 10px;
        width: 10px;
        margin-left: -35px;
        background-color: @primary-color;
        border-radius: 50%;
      }
    }
  }

Installing the Pro version of Font Awesome

Stanislav Vranic — Mon, 15 Jun 2020 07:29:53 +0000

Create a .npmrc file in the root of your project (or where you have your package.json file) @fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=TOKEN
After that configuration, you can install the latest Pro version of Font Awesome via npm or yarn: using-package-managers
Implement in app.scss // font awesome 5 pro @import "node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss"; @import "node_modules/@fortawesome/fontawesome-pro/scss/solid.scss"; @import "node_modules/@fortawesome/fontawesome-pro/scss/light.scss"; // and so on - brand etc
Copy webfonts to your directory fonts from node_modules\@fortawesome\fontawesome-pro\webfonts
In variables.scss // font awesome path $fa-font-path: "../fonts/fontawesome-pro/webfonts"; $font-family-font-awesome: 'Font Awesome 5 Pro';
CSS style - To choose solid, or light depends on font-weight content: "\f128"; font-weight: 900; // this is solid