Project-Natours DEMO

Features

B.E.M
Advanced CSS and SASS
Animations without Javascript
NPM Scripts
Desktop Approach
Modern CSS Properties but before using them always check CanIUse
Responsive Grid System For more Info

SASS/SCSS Lint Installation

Install sass lint extension on VSCode. Install NPM Package sass-lint. Create .sass-lint.yml and add rules. Done.

Implements 7-1 CSS Architecture

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

Principles of Responsive Design and Layout Types

Float Layout [Used in this Project]
FlexBox Layout
CSS Grid Layout
Layout Centering Techniques Guide

A modern UI will combine all of these techniques to create a responsive design - More Info

Dependent Sizes
Columns and flowing
Expanding coverage
Collapsing and hiding
Rearrangement

Responsive images - 3 Use Cases - More Info

Resolution Switching - Large screen to small screen - (Decrease image resolution on smaller screen)

  <!--
    using Width descriptor (w) see Chrome Devtool
    171/900 = 20vw (~20% width of the viewport width 900px)
    171/600 = 30vw (~30% width of the viewport width 600px)
    300px as default size
    sizes use to inform the browser about the approximate width of the image at diff. viewport width,
    and which to use for the current viewport width and the current display resolution.
  -->

  <img srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
      sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
      alt="Photo 1" class="composition__photo composition__photo--p1"
      src="img/nat-1-large.jpg">

Density Switching - @2x screen (high-res) to @1x screen (low res) - (Half the image resolution on @1x screen)

  <!-- using Density descriptor (1x, 2x) see Chrome Devtool -->
  <img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo" class="footer__logo">

Art Direction - Large screen to small screen (Image details were preserved but different image on smaller screen)

  <!--
    Art Direction using picture element
    - basically force browser to use small-1x image in case that this media query applies
  -->
  <picture class="footer__logo">
    <source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x" media="(max-width: 37.5em)">
    <img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo" class="footer__logo">
  </picture>

Animation Syntax

animation-name: keyframe Name
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

More info

INFO/TIPS : FIXES

Tip #1:

  /* fixes problems like animations and translating things */
  backface-visibility: hidden;

Tip #2:

  /* fix video/images occupying other sections, fill entire parent while still maintaining aspect ratio */
  object-fit: cover;

Tip #3:

 /**
   * INFO: :not() select everything except the last child
   * INFO: :last-child selector allows you to target the last element
   * directly inside its containing/parent element.
   */
  &:not(:last-child) {
    margin-bottom: $gutter-vertical;
  }

Tip #4:

  /* NOTE: Below fixes image wiggling after hovering parent element, Browser Bug(Chrome 64.0.3282.167). */
  filter: blur(0.3px); /* the lowest value I could get on my machine: 0.12805650383234025436px */
  image-rendering: -webkit-optimize-contrast; /* just in case quality degrades */

Tip #5: Sibling Selector

  /* element should be after the input/element in order to be selected with the sibling selector ~ */
  &__input:placeholder-shown ~ &__label { }

Tip #6: Adjacent Selector

  /**
    * label/element should be after the input/element in order to be selected
    * with the adjacent sibling selector +
    * label that come immediately after any input of the same parent element
    */
  &__input:placeholder-shown + &__label { }

Tip #6: Child combinator

  /**
    * .section-features > * { } selects direct / first degree child that come across which is row(only)
    * .section-features * { } selects all child and child of child
    */
  & > * {
    transform: skewY(7deg);
  }

Tip #7: MEDIA QUERIES: ORDER MATTERS

  /* The order of Media query is the key. The one that after will override the rules before it. No Conflict. */

  /**
    * It means that, if you apply two rules that collide to the same elements,
    * it will choose the last one that was declared,
    * unless the first one has the !important marker or is more specific
    */

  /* DESKTOP APPROACH : < (max-width) */
  @include respond(tab-land) { // width < 1200?
    font-size: 56.25%; // 1 rem = 9px, 9/16 = 56.25%
  }

  @include respond(tab-port) { // width < 900?
    font-size: 50%; // 1 rem = 8px, 8/16 = 50%
  }

  @include respond(phone) { // width < 600?
    font-size: 37.5%; // 1 rem = 6px, 6/16 = 37.5%
  }

  /* MOBILE FIRST : > * (min-width) */
  @include respond(phone) { // width > 600?
    font-size: 37.5%; // 1 rem = 6px, 6/16 = 37.5%
  }

  @include respond(tab-port) { // width > 900?
    font-size: 50%; // 1 rem = 8px, 8/16 = 50%
  }

  @include respond(tab-land) { // width > 1200?
    font-size: 56.25%; // 1 rem = 9px, 9/16 = 56.25%
  }

Tip #8: Graceful Degradation using supports @ rule (feature-queries)

  // --------------------------------------------------------------
  // If the browser support this property then apply this style
  // --------------------------------------------------------------
  @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba($color-black, .3);
  }

kanlanc/project-natours

Project-Natours DEMO

Features

SASS/SCSS Lint Installation

Implements 7-1 CSS Architecture

Principles of Responsive Design and Layout Types

A modern UI will combine all of these techniques to create a responsive design - More Info

Responsive images - 3 Use Cases - More Info

Animation Syntax

INFO/TIPS : FIXES