Responsive

Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance.

Breakpoints

In the Appwrite console we use three screen ranges (small / medium / large):

Screen Size Range Scss Variable
Small 0px - 767px $break1
Medium 768px - 1198px $break2
Medium (open) 768px - Infinite $break2open
Large (open) 1199px - infinite $break3open

CSS Implementation 


<style>
  /* affect all screens sizes */
  .partial {
     --p-padding: 1.25rem;
     padding: var(--p-padding);
  }
  /* affect only small screens */
  @media (max-width:767.99px) {
      .partial {
          --p-padding: 1rem;
      }
  }
  /* affect only small & medium screens */
  @media (max-width:1198.99px) {
      .partial {
          --p-padding: 1rem;
      }
  }
  /* affect only medium and larger screens */
  @media (min-width:768px) {
      .partial {
          --p-padding: 1rem;
      }
  }
  /* affect only small and larger screens */
  @media (max-width:767.99px) and (min-width:1199px){
      .partial {
          --p-padding: 1rem;
      }
  }
</style>

SCSS Code 


<style language="scss">
  /* Responsive Variables */
  $break1:     "(max-width:767.99px)";
  $break2:     "(min-width:768px) and (max-width:1198.99px)";
  $break2open: "(min-width:768px)";
  $break3open: "(min-width:1199px)";
</style>

Sass Variables Breakpoints in Media Queries Rule 


<style>
  @media #{$break1}       { } /* small screens */
  @media #{$break2}       { } /* medium screens */
  @media #{$break2open}   { } /* medium & large screens */
  @media #{$break3open}   { } /* large screens */
</style>

Special Use Cases

In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints.


<style>
  .partial {
      /* here you put code for all screen sizes */
      @media #{$break1}                   { } /* only small screens */
      @media #{$break1}, #{$break2}       { } /* small & medium screens */
      @media #{$break2}                   { } /* only medium screens */
      @media #{$break1}, #{$break3open}   { } /* small & large screens */
  }
</style>

Example of a SCSS Partial 


<style language="scss">
  .partial {
     --p-partial-padding: 1.25rem;
     padding: var(--p-partial-padding);
     /* medium screens and larger */
     @media #{$break2open} {
      --p-partial-padding: 2.5rem;
     }
  }
</style>

Compiled CSS 


<style>
  .partial {
     --p-padding: 1.25rem;
     padding: var(--p-padding);
  }
  /* medium screens and larger */
  @media (min-width:768px) {
      .partial {
          --p-padding: 2.5rem;
      }
  }
</style>