Unissu CSS

(SCSS)

SCSS

CSS modules

  .companies-container {
    
    .list-companies-wrapper {
      padding-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #ebecee;

      .count-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .count-title {
          font-family: 'Raleway-Bold';
          font-size: 22px;
          flex: 50% 0;
        }
.....
.baseForm {
  flex-basis: 50%;
  ...

  .inner {
     max-width: 600px;
    }
   ...

.questionsForm {
  flex-basis: 50%;
  background-color: white;
  ...

  inner {
    max-width: 580px;
    width: 100%;
   
  .title {
    font-family: 'Raleway-Bold';
     ...
     }
...

  • CSS flex property

  • Flexbox Grid

  • CSS Grid

  • Responsive Web Design - Media Queries

Breakpoints

// assets/styles/_media_variables.scss

$screen-sm-min: 768px;
$screen-xs-max: ($screen-sm-min - 1);
$screen-md-min: 992px;
$screen-sm-max: ($screen-md-min - 1);
$screen-lg-min: 1200px;
$screen-md-max: ($screen-lg-min - 1);

Media queries

.remove-xs {
  @media only screen and (max-width: $screen-xs-max) {
    display: none !important;
  }
}

.remove-sm-min {
  @media only screen and (min-width: $screen-sm-min) {
    display: none !important;
  }
}

.remove-sm {
  @media only screen and (max-width: $screen-sm-max) {
    display: none !important;
  }
}

Define containers

.container {
  width: 1170px;

  @media screen and (max-width: $screen-md-max) {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
}

.small-container {
  width: 770px;

  @media screen and (max-width: $screen-sm-max) {
    width: 100%;
  }
}

Flexbox Grid

 

deck

By Hack Bulgaria

Made with Slides.com

deck

  • 1,101

More from Hack Bulgaria