undefined

undefined

Making a design that responds to multiple screen sizes is made much easier by BridgeCSS thanks to specific mixins to target different device sizes.

There are three defined device sizes

• desktop: min-width: 1024px;
• tablet: min-width: 768px;
• mobile: min-width: 320px;

So to target a set of devices you can write a style like:

img {
  width: spacing(15);

  @include tablet {
    width: spacing(20);
  }
  
  @include desktop {
    width: spacing(30);
  }
}

The nice aspect of this compared to the utility-first style is that you can group all your tablet styles in a single place without having to prefix all of them individually with the size.

Here is an example of how you can dynamically adjust the layout depending on the screen size. (grab the handle on the right size to resize)

New In

Meticulously crafted hats

We have gone through painstaiking efforts to source hats from the most skilled hatmakers in the world.

<div class="container">
  <div class="container__wrapper">
    <div class="container__image_wrapper">
      <img src="/static/images/hatshop.png" alt="Nice looking hat shop">
    </div>
    <div class="container__caption">
      <div class="container__caption_title">New In</div>
      <a href="#" class="container__caption_link">Meticulously crafted hats</a>
      <p class="container__caption_p">We have gone through painstaiking efforts to source hats from the most skilled hatmakers in the world.</p>
    </div>
  </div>
</div>

<style lang="scss">
  .container {
    @include mx-auto;
    background-color: white;
    border-radius: spacing(4);
    box-shadow: shadow(4);

    &__wrapper {
      @include tablet {
        display: flex;
      }
    }
    
    &__image_wrapper {
      @include tablet {
        flex-shrink: 0;
      }
    }

    &__caption {
      @include p(8);
    }

    &__caption_title {
      text-transform: uppercase;
      letter-spacing: 0.025em;
      @include text-sm;
      color: $indigo-500;
      font-weight: 500;
    }
    
    &__caption_link {
      display: block;
      @include mt(1);
      @include text-lg;
      letter-spacing: -0.025em;
      color: $black;

      &:hover {
        text-decoration-line: underline;
      }
    }
    
    &__caption_p {
      @include mt(2);
      color: $slate-500;
    }

    img {
      height: spacing(20);
      width: 100%;
      object-fit: cover; 

      @include tablet {
        height: 100%;
        width: spacing(20);
      }
    }
  }
</style>

Mobile First

Since the breakpoints are defined with min-width BridgeCSS is naturally mobile first. Eg. using the @include tablet selector will then only apply above a certain width.