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>