Develop a commonly used responsive css tool class

I often encounter people who say that using Vue to make a responsive website, using Bootstrap, or using Element-ui or Ant Design Vue or other component libraries. Of course, Vuetify is good, but sometimes we or the bosses don’t like Material Design. And to be honest, Vuetify's documentation and the design of some components make me feel dumb (maybe people are dumb).

So writing a set of responsive css tools that we need, at least allows us to develop a responsive website much more convenient and fast, and we can use any component library we want.

1. Determine the breakpoint

Let's use Bootstrap's responsive breakpoint as an example. At least Ant Design Vue's grid system uses this by default.

Define the breakpoints variable:

@breakpoints: {
  xs: 0px; // For convenience, set the minimum to 0px
  sm: 576px;
  md: 768px;
  lg: 992px;
  xl: 1200px;
  xxl: 1600px;
};

Because we need to use key and value, so breakpoints is a map type.

2. Create a mixin function

.breakpoints-properties(@prefix, @properties, @value) {
  .@{prefix}@{value} {
    @{properties}: @value;
  }
  each(@breakpoints, .(@v, @k, @i){
    .@{prefix}@{k}-@{value} {
      @media (min-width: @v) {
        @{properties}: @value !important;
      }
    }
  });
};

-@prefix is the prefix of class
-@value is the specific value of the attribute
-@properties is the property

3. Define the attribute-value mapping table

@properties: {
  @display: {
    @key: display;
    @values: block, inline, inline-block, none, flex, inline-flex, table, table-cell, table-row;
    @prefix: d-;
  };
  @flex-direction: {
    @key: flex-direction;
    @values: row, row-reverse, column, column-reverse;
    @prefix: direction-;
  };
  @flex-wrap: {
    @key: flex-wrap;
    @values: nowrap, wrap, wrap-reverse;
    @prefix: wrap-;
  };
  @justify-content: {
    @key: justify-content;
    @values: flex-start, flex-end, center, space-between, space-around;
    @prefix: justify-;
  };
  @align-items: {
    @key: align-items;
    @values: flex-start, flex-end, center, baseline, stretch;
    @prefix: align-;
  };
  @order: {
    @key: order;
    @values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14;
    @prefix: order-;
  };
  @flex-grow: {
    @key: flex-grow;
    @values: 0, 1;
    @prefix: grow-;
  };
  @flex-shrink: {
    @key: flex-shrink;
    @values: 0, 1;
    @prefix: shrink-;
  };
  @flex: {
    @key: flex;
    @values: auto, 1, none;
    @prefix: flex-;
  };
  @align-self: {
    @key: align-self;
    @values: flex-start, flex-end, center, baseline, stretch;
    @prefix: align-self-;
  };
  @float: {
    @key: float;
    @values: left, right, none;
    @prefix: float-;
  };
  @text-align: {
    @key: text-align;
    @values: left, center, right;
    @prefix: text-;
  };
  @font-weight: {
    @key: font-weight;
    @values: 400, 500, 700, 900;
    @prefix: font-;
  };
  @font-style: {
    @key: font-style;
    @values: normal, italic, oblique;
    @prefix: font-;
  };
  @text-decoration: {
    @key: text-decoration;
    @values: none, overline, underline, line-through;
    @prefix: text-decoration-;
  };
  @text-transform: {
    @key: text-transform;
    @values: uppercase, lowercase, capitalize;
    @prefix: text-;
  };
};

4. Traverse generation

each(@properties, {
  each(@value[@values], .(@v, @k, @i){
    .breakpoints-properties(@value[@prefix], @value[@key], @v);
  });
});

Of course, these are far from enough, there are text truncation, spacing... and some attributes that we don’t need can be deleted.

The final code can refer to @convue-lib/styles

Document address: https://ziping-li.github.io/convue-lib/#/display