dropways

MIXIN: Custom SCSS Responsive Media Queries.

@author Ankit Hingarajiya (https://github.com/dropways)

Creates responsive media queries for different screen resolution.

CSS content goes inside {} brackets.

min-width or max-width mixin

@mixin breakpoint( $max_min , $point ) {

dropways

<div class="Polygon-wrap">
	<div class="container">
		<div class="title text-center">
			<h2><span>Polygon</span> Honeycomb</h2>
		</div>
		<div class="core-features-list">
			<!-- Polygon Shadow -->
			<div class="shadow-svg">
				<svg xmlns="http://www.w3.org/2000/svg">
					<filter id="Polygon-shadow-blue" x="0" y="0" width="342.449" height="372.37" filterUnits="userSpaceOnUse">

dropways

{
    "fas fa-address-book","fas fa-address-card","fas fa-adjust","fas fa-align-center","fas fa-align-justify","fas fa-align-left","fas fa-align-right","fas fa-allergies","fas fa-ambulance","fas fa-american-sign-language-interpreting","fas fa-anchor","fas fa-angle-double-down","fas fa-angle-double-left","fas fa-angle-double-right","fas fa-angle-double-up","fas fa-angle-down","fas fa-angle-left","fas fa-angle-right","fas fa-angle-up","fas fa-archive","fas fa-arrow-alt-circle-down","fas fa-arrow-alt-circle-left","fas fa-arrow-alt-circle-right","fas fa-arrow-alt-circle-up","fas fa-arrow-circle-down","fas fa-arrow-circle-left","fas fa-arrow-circle-right","fas fa-arrow-circle-up","fas fa-arrow-down","fas fa-arrow-left","fas fa-arrow-right","fas fa-arrow-up","fas fa-arrows-alt","fas fa-arrows-alt-h","fas fa-arrows-alt-v","fas fa-assistive-listening-systems","fas fa-asterisk","fas fa-at","fas fa-audio-description","fas fa-backward","fas fa-balance-scale","fas fa-ban","fas fa-band-aid","fas fa-barcode","fas fa-bars",

dropways

<header>
  <h1>SITE TITLE</h1>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>

dropways

RTL Layout Sass/Scss Mixin

We can use that selector to target styles if the HTML element has the dir attribute defined.

@mixin rtl {
    [dir="rtl"] & {
        @content;
    }
}

dropways

Click to scroll section id and window hash id scroll on load

HTML

<ul>
    <li><a href="#section1" class="go-scroll">section1</a></li>
    <li><a href="#section2" class="go-scroll">section2</a></li>
    <li><a href="#section3" class="go-scroll">section3</a></li>
    <li><a href="#section4" class="go-scroll">section4</a></li>
</ul>