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
Top comments (0)