search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
549 stars 40 forks source link

Responsive spacing #43

Closed dokodeko closed 3 years ago

dokodeko commented 3 years ago

Hi, this could be a misunderstanding but I didn´t see in the documentation support for responsive spacing classes. For example, the class lg-mt5 could be added for margin top for the respective screen size and in the same element it could also have the class sm-mt0 which would change the margin-top for the respective screen size.

Support for this feature would be appreciated , Thanks

antoniandre commented 3 years ago

Hi @dokodeko, You're right, and that makes sense, I'm adding this to my to do list! I'd like to think of a simplified version of all these classes since I also don't want to double the size of the CSS. :)

antoniandre commented 3 years ago

Hi @dokodeko, thanks for your suggestion again.

I have thought about it and tried to integrate it in the codebase, but soon realized it's adding too much weight to the CSS. for instance, just for the margins it would be adding 5 more times this generated CSS code:

.w-app .ma1{margin:4px}.w-app .ma-1{margin:-4px}.w-app .ma2{margin:8px}.w-app .ma-2{margin:-8px}.w-app .ma3{margin:12px}.w-app .ma-3{margin:-12px}.w-app .ma4{margin:16px}.w-app .ma-4{margin:-16px}.w-app .ma5{margin:20px}.w-app .ma-5{margin:-20px}.w-app .ma6{margin:24px}.w-app .ma-6{margin:-24px}.w-app .ma7{margin:28px}.w-app .ma-7{margin:-28px}.w-app .ma8{margin:32px}.w-app .ma-8{margin:-32px}.w-app .ma9{margin:36px}.w-app .ma-9{margin:-36px}.w-app .ma10{margin:40px}.w-app .ma-10{margin:-40px}.w-app .ma11{margin:44px}.w-app .ma-11{margin:-44px}.w-app .ma12{margin:48px}.w-app .ma-12{margin:-48px}.w-app .maa{margin:auto}.w-app .ma0{margin:0}.w-app .mx1{margin-left:4px;margin-right:4px}.w-app .my1{margin-top:4px;margin-bottom:4px}.w-app .mx-1{margin-left:-4px;margin-right:-4px}.w-app .my-1{margin-top:-4px;margin-bottom:-4px}.w-app .mx2{margin-left:8px;margin-right:8px}.w-app .my2{margin-top:8px;margin-bottom:8px}.w-app .mx-2{margin-left:-8px;margin-right:-8px}.w-app .my-2{margin-top:-8px;margin-bottom:-8px}.w-app .mx3{margin-left:12px;margin-right:12px}.w-app .my3{margin-top:12px;margin-bottom:12px}.w-app .mx-3{margin-left:-12px;margin-right:-12px}.w-app .my-3{margin-top:-12px;margin-bottom:-12px}.w-app .mx4{margin-left:16px;margin-right:16px}.w-app .my4{margin-top:16px;margin-bottom:16px}.w-app .mx-4{margin-left:-16px;margin-right:-16px}.w-app .my-4{margin-top:-16px;margin-bottom:-16px}.w-app .mx5{margin-left:20px;margin-right:20px}.w-app .my5{margin-top:20px;margin-bottom:20px}.w-app .mx-5{margin-left:-20px;margin-right:-20px}.w-app .my-5{margin-top:-20px;margin-bottom:-20px}.w-app .mx6{margin-left:24px;margin-right:24px}.w-app .my6{margin-top:24px;margin-bottom:24px}.w-app .mx-6{margin-left:-24px;margin-right:-24px}.w-app .my-6{margin-top:-24px;margin-bottom:-24px}.w-app .mx7{margin-left:28px;margin-right:28px}.w-app .my7{margin-top:28px;margin-bottom:28px}.w-app .mx-7{margin-left:-28px;margin-right:-28px}.w-app .my-7{margin-top:-28px;margin-bottom:-28px}.w-app .mx8{margin-left:32px;margin-right:32px}.w-app .my8{margin-top:32px;margin-bottom:32px}.w-app .mx-8{margin-left:-32px;margin-right:-32px}.w-app .my-8{margin-top:-32px;margin-bottom:-32px}.w-app .mx9{margin-left:36px;margin-right:36px}.w-app .my9{margin-top:36px;margin-bottom:36px}.w-app .mx-9{margin-left:-36px;margin-right:-36px}.w-app .my-9{margin-top:-36px;margin-bottom:-36px}.w-app .mx10{margin-left:40px;margin-right:40px}.w-app .my10{margin-top:40px;margin-bottom:40px}.w-app .mx-10{margin-left:-40px;margin-right:-40px}.w-app .my-10{margin-top:-40px;margin-bottom:-40px}.w-app .mx11{margin-left:44px;margin-right:44px}.w-app .my11{margin-top:44px;margin-bottom:44px}.w-app .mx-11{margin-left:-44px;margin-right:-44px}.w-app .my-11{margin-top:-44px;margin-bottom:-44px}.w-app .mx12{margin-left:48px;margin-right:48px}.w-app .my12{margin-top:48px;margin-bottom:48px}.w-app .mx-12{margin-left:-48px;margin-right:-48px}.w-app .my-12{margin-top:-48px;margin-bottom:-48px}.w-app .mxa{margin-left:auto;margin-right:auto}.w-app .mya{margin-top:auto;margin-bottom:auto}.w-app .mx0{margin-left:0;margin-right:0}.w-app .my0{margin-top:0;margin-bottom:0}.w-app .mt1{margin-top:4px}.w-app .mr1{margin-right:4px}.w-app .mb1{margin-bottom:4px}.w-app .ml1{margin-left:4px}.w-app .mt-1{margin-top:-4px}.w-app .mr-1{margin-right:-4px}.w-app .mb-1{margin-bottom:-4px}.w-app .ml-1{margin-left:-4px}.w-app .mt2{margin-top:8px}.w-app .mr2{margin-right:8px}.w-app .mb2{margin-bottom:8px}.w-app .ml2{margin-left:8px}.w-app .mt-2{margin-top:-8px}.w-app .mr-2{margin-right:-8px}.w-app .mb-2{margin-bottom:-8px}.w-app .ml-2{margin-left:-8px}.w-app .mt3{margin-top:12px}.w-app .mr3{margin-right:12px}.w-app .mb3{margin-bottom:12px}.w-app .ml3{margin-left:12px}.w-app .mt-3{margin-top:-12px}.w-app .mr-3{margin-right:-12px}.w-app .mb-3{margin-bottom:-12px}.w-app .ml-3{margin-left:-12px}.w-app .mt4{margin-top:16px}.w-app .mr4{margin-right:16px}.w-app .mb4{margin-bottom:16px}.w-app .ml4{margin-left:16px}.w-app .mt-4{margin-top:-16px}.w-app .mr-4{margin-right:-16px}.w-app .mb-4{margin-bottom:-16px}.w-app .ml-4{margin-left:-16px}.w-app .mt5{margin-top:20px}.w-app .mr5{margin-right:20px}.w-app .mb5{margin-bottom:20px}.w-app .ml5{margin-left:20px}.w-app .mt-5{margin-top:-20px}.w-app .mr-5{margin-right:-20px}.w-app .mb-5{margin-bottom:-20px}.w-app .ml-5{margin-left:-20px}.w-app .mt6{margin-top:24px}.w-app .mr6{margin-right:24px}.w-app .mb6{margin-bottom:24px}.w-app .ml6{margin-left:24px}.w-app .mt-6{margin-top:-24px}.w-app .mr-6{margin-right:-24px}.w-app .mb-6{margin-bottom:-24px}.w-app .ml-6{margin-left:-24px}.w-app .mt7{margin-top:28px}.w-app .mr7{margin-right:28px}.w-app .mb7{margin-bottom:28px}.w-app .ml7{margin-left:28px}.w-app .mt-7{margin-top:-28px}.w-app .mr-7{margin-right:-28px}.w-app .mb-7{margin-bottom:-28px}.w-app .ml-7{margin-left:-28px}.w-app .mt8{margin-top:32px}.w-app .mr8{margin-right:32px}.w-app .mb8{margin-bottom:32px}.w-app .ml8{margin-left:32px}.w-app .mt-8{margin-top:-32px}.w-app .mr-8{margin-right:-32px}.w-app .mb-8{margin-bottom:-32px}.w-app .ml-8{margin-left:-32px}.w-app .mt9{margin-top:36px}.w-app .mr9{margin-right:36px}.w-app .mb9{margin-bottom:36px}.w-app .ml9{margin-left:36px}.w-app .mt-9{margin-top:-36px}.w-app .mr-9{margin-right:-36px}.w-app .mb-9{margin-bottom:-36px}.w-app .ml-9{margin-left:-36px}.w-app .mt10{margin-top:40px}.w-app .mr10{margin-right:40px}.w-app .mb10{margin-bottom:40px}.w-app .ml10{margin-left:40px}.w-app .mt-10{margin-top:-40px}.w-app .mr-10{margin-right:-40px}.w-app .mb-10{margin-bottom:-40px}.w-app .ml-10{margin-left:-40px}.w-app .mt11{margin-top:44px}.w-app .mr11{margin-right:44px}.w-app .mb11{margin-bottom:44px}.w-app .ml11{margin-left:44px}.w-app .mt-11{margin-top:-44px}.w-app .mr-11{margin-right:-44px}.w-app .mb-11{margin-bottom:-44px}.w-app .ml-11{margin-left:-44px}.w-app .mt12{margin-top:48px}.w-app .mr12{margin-right:48px}.w-app .mb12{margin-bottom:48px}.w-app .ml12{margin-left:48px}.w-app .mt-12{margin-top:-48px}.w-app .mr-12{margin-right:-48px}.w-app .mb-12{margin-bottom:-48px}.w-app .ml-12{margin-left:-48px}.w-app .mta{margin-top:auto}.w-app .mra{margin-right:auto}.w-app .mba{margin-bottom:auto}.w-app .mla{margin-left:auto}.w-app .mt0{margin-top:0}.w-app .mr0{margin-right:0}.w-app .mb0{margin-bottom:0}.w-app .ml0{margin-left:0}

So considering that, I will not integrate it in the codebase. But if you are interested to have this option in your own project, here is the code to generate it. :) It's only for xs here so you need to duplicate this for other breakpoints, and it is also only for margins, but paddings are way simpler as there are no negative nor auto paddings!

$base-increment: 4px;

@media (max-width: 600px) {
  .w-app {
    // Margin.
    @for $i from 0 through 12 {
      $number: round($i * $base-increment);
      .xs-ma#{$i} {margin: $number;}

      @if ($i > 0) {.xs-ma-#{$i} {margin: -$number;}}
    }
    .xs-maa {margin: auto;}
    .xs-ma0 {margin: 0;}

    @for $i from 0 through 12 {
      $number: round($i * $base-increment);
      .xs-mx#{$i} {margin-left: $number;margin-right: $number;}
      .xs-my#{$i} {margin-top: $number;margin-bottom: $number;}

      @if ($i > 0) {
        .xs-mx-#{$i} {margin-left: -$number;margin-right: -$number;}
        .xs-my-#{$i} {margin-top: -$number;margin-bottom: -$number;}
      }
    }
    .xs-mxa {margin-left: auto;margin-right: auto;}
    .xs-mya {margin-top: auto;margin-bottom: auto;}
    .xs-mx0 {margin-left: 0;margin-right: 0;}
    .xs-my0 {margin-top: 0;margin-bottom: 0;}

    @for $i from 0 through 12 {
      $number: round($i * $base-increment);
      .xs-mt#{$i} {margin-top: $number;}
      .xs-mr#{$i} {margin-right: $number;}
      .xs-mb#{$i} {margin-bottom: $number;}
      .xs-ml#{$i} {margin-left: $number;}

      @if ($i > 0) {
        .xs-mt-#{$i} {margin-top: -$number;}
        .xs-mr-#{$i} {margin-right: -$number;}
        .xs-mb-#{$i} {margin-bottom: -$number;}
        .xs-ml-#{$i} {margin-left: -$number;}
      }
    }
    .xs-mta {margin-top: auto;}
    .xs-mra {margin-right: auto;}
    .xs-mba {margin-bottom: auto;}
    .xs-mla {margin-left: auto;}
    .xs-mt0 {margin-top: 0;}
    .xs-mr0 {margin-right: 0;}
    .xs-mb0 {margin-bottom: 0;}
    .xs-ml0 {margin-left: 0;}
  }
}

Hope it makes sense and it helps!