8 Maj 2019

Prosty hamburger w js

Dzisiaj coś prostego, czyli hamburger menu.

Najpierw html:

<button class="hamburger">
  <div class="hamburger-center"></div>
</button>

Następnie style. Tutaj wykorzystam jak zwykle scss bo niech ktoś mi powie czy jest jeszcze jakaś osoba na Świecie nie korzystająca z preprocesorów css 😉

.hamburger {
  position: relative;
  padding: 35px;
  background-color: #00aeff;
  border: 1px solid lighten(#000, 90%);
  cursor: pointer;

  &.is-open {
    .hamburger-center {
      background-color: transparent;
      transition: background-color 0.25s ease-in;
    }

    &::before {
      transform: translateY(0) rotate(45deg);
      transition: transform 0.25s ease-in;
    }

    &::after {
      transform: translateY(0) rotate(-45deg);
      transition: transform 0.25s ease-in;
    }

  }

  .hamburger-center {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    transition: background-color 0.5s ease-in;
    z-index: 9999;
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    left: 15px;
    top: 50%;
    margin: auto;
    background-color: #fff;
    z-index: 9999;
  }

  &::before {
    transform: translateY(10px) rotate(0);
    transition: transform 0.25s ease-in;
  }

  &::after {
    transform: translateY(-10px) rotate(0);
    transition: transform 0.25s ease-in;
  }
}
11 Lut 2019

Breakpoints w Sass

W dzisiejszym świecie css nie obejdzie się bez breakpointów do RWD. Praktycznie wszyscy używają scss a w takim razie możemy użyć mixin.

Najpierw tworzę listę breakpoints jako mapę, którą będziemy wykorzystywać w naszych stylach. Poniżej przykładowa lista, do własnych projektów użyj własnej listy.

$breakpoints: (
  xs: 512px,
  sm: 768px,
  md: 896px,
  lg: 1152px,
  xl: 1280px
);

Następna czynność to użycie mixin i expression. Użyłem w tym przykładzie min-width ale również można użyć max-width. Dokładnie chodzi o @media (min-width: 512px) {} lub @media (max-width: 512px) {} wybór należy już tylko od Ciebie.

@mixin breakpoint( $breakpoint ) {
  @if map-has-key( $breakpoints, $breakpoint ) {
     @media ( min-width: #{ map-get( $breakpoints, $breakpoint ) } ) {
       @content;
     }
  } @else if type_of( $breakpoint ) == number and unit( $breakpoint ) == px or unit( $breakpoint ) == em or unit( $breakpoint ) == rem {
     @media (min-width: $breakpoint ) {
       @content;
     }
   } @else {
     @warn "Nie można pobrać żadnej wartości z `#{$breakpoint}`. Nie jest zdefiniowany w mapie `$breakpoints` lub jest nieprawidłową liczbą px, em, lub rem.";
  }
}
8 Gru 2018

Mapowanie kolorów scss

Zaczynamy od deklaracji kolorów które będą nam potrzebne w projekcie.

$colors: (
  grey: (
    base: #4d4e55,
    light: #c8c8ce
  ),
  yellow: (
    base: #ffae00
  ),
  green: (
    base: #00ff15
  )
);

Oczywiście nic nie stoi na przeszkodzie aby modyfikować naszą deklarację dodając następne nazwy kolorów light, lighter, lightest, dark, darker, darkest
Mniej więcej wyglądało by tak.

$colors: (
  grey: (
    base: #4d4e55,
    light: xxxx,
    lighter: xxxx,
    lightest: xxxx,
    dark: xxxx
    darker: xxxx
    darkest: xxxx
  ),
  yellow: (
    base: #ffae00
  ),
  green: (
    base: #00ff15
  )
);