responsiveWebDev.md

Responsive Web Development

Sass

If you want to customize/inherit variables of Bootstrap, import the provided code and override the variables in a different file that you only have. Because the code provided by Bootstrap will be updated.

In this document, I would like to explain why the pattern is bad, and what is good.

File structure

sass
  |-- style.scss
  |-- _default.scss
  |-- _phones.scss
  |-- _tablets.scss
  |-- _desktops.scss

In this example, let's assume default style for extra small devices is defined in _default.scss. Valuables such as $screen-xs-max can be defined like this code.

style.scss

// Default
@import "default";

// Phones
@media (max-width: $screen-xs-max) {
    @import "phones";
}

// Tablets
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @import "tables";
}

// Desktops
@media (min-width: $screen-md-min) {
    @import "desktops";
}

---

_default.scss

.something {
    font-size: 5rem;
}

---

_phones.scss

.something {
    font-size: 4rem;
}

---

_tablets.scss

.something {
    font-size: 4rem;
}

---

_desktops.scss

.something {
    font-size: 3rem;
}

In this example, default .something is overridden depends on the screen size. Although, I'd like to emphasize that this is not a good pattern. Because if you want to change .something, you have to read through each file.

To make it more maintainable, this is a good example. In the Bootstrap's code, you can see that the form module is written only in this file. So you are not forced to see other code.

See file structure examples: this or this.

Additionally, I personally separate Sass files depends on the role. For example, I define colour schema/appearance style in a different file.

_mytheme.scss

.btn {
    &:active {
        background-color: #aaaaaa;
    }
    &:hover, &:focus {
        background-color: #ffffff;
    }
}

.btn.rounded-btn {
    border-radius: 5px;    
}

---

_button.scss

.btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    &:active {
        background-color: #ffaaaa;  // Default colour
    }
    &:hover, &:focus {
        background-color: #aaffaa;  // Default colour
    }
}

---

_myButton.scss

@import "button";
@import "mytheme";

---

example.html

<span class="btn">My button</span>
<span class="btn rounded-btn">My rounded button</span>

User Agent

When you want to test mobile version, device mode will be helpful. User Agent can be detected by Javascript, so you can implement different behaviour depends on the browser. This is an example of detecting Android Native Browser.