A design system that allows the use of standard CSS styles within the class attribute ALONG with Media Queries and Modifiers.
Advantages:
- No need to learn MAGIC utility names for existing CSS Styles
- Grow your CSS knowledge while reaping the rewards of using a Design System at the same time
Write standard CSS (No spaces though!) such as display:flex
and apply a media query inline within the class
<div class="large?display:flex">Some Text</div>
Generates the below class ensuring that the flex container is only applied when the screen size is greater than 1280px wide
@media (min-width: 1280px) {
.large\?display\:flex {
display: flex;
}
}
- mobile
- tablet
- pc
- pcwide
- pcultrawide
To ensure consistency there is a set of standard Tags that can be used in place of specific pixel values.
These Tags are used across the board keeping the learning curve simple
Tag | Description |
---|---|
xs | extra small |
sm | small |
md | medium |
lg | large |
xl | extra large |
2xl | extra extra large |
<div class="padding-top:md">Some Text</div>
becomes
.padding-top\:md {
padding-top: 8px;
}
These Tags will map to different Pixel Values depending upon the usage.
So for Fonts we have the below mapping:
Tag | Value |
---|---|
xs | 8px |
sm | 12px |
md | 16px |
lg | 24px |
xl | 48px |
2xl | 92px |
Whereas for Padding the mappings will be different:
Tag | Value |
---|---|
xs | 2px |
sm | 4px |
md | 8px |
lg | 20px |
xl | 50px |
2xl | 200px |
And then for Line height they map to percentages
Tag | Value |
---|---|
xs | 100% |
sm | 120% |
md | 140% |
lg | 160% |
xl | 200% |
2xl | 240% |
<div class="padding-top:md">Some Text</div>
becomes
.padding-top\:md {
padding-top: 8px;
}
<div class="font-size:md">Some Text</div>
.font-size\:md {
font-size: 16px;
}
So the below:
<div class="display:flex">Some Text</div>
Becomes:
.display\:flex {
display: flex;
}
You can also apply pseudo class like hover and focus inline with the class attribute
<div class="background-color:blue:hover">Some Text</div>
Which will create a class for you like this
.background-color\:blue\:hover:hover {
background-color: blue;
}
To create a class in place we can use the @ symbol to combine css into a class
<div class="padding:xl@btn border-radius:md@btn btn"></div>
Generated css for the above will be:
.btn {
padding: 50px;
border-radius: 10px;
}
npm install --save-dev mimic-css
mimic-css is a development time process that watches for file changes to your web pages and create classes from them.
npx mimic
The app will search in the current folder (and all subfolders) for .html, .ts, .js and .astro files. Ouput will be sent to the file mimic.css which you can link:
<link rel="stylesheet" href="mimic.css" />
You can override where to base your scan for web pages using the -i flag
npx mimic-css -i ./src
You can also override where to output the generated CSS file using the -o flag
npx mimic-css -o ./styles/customname.css
option | Default | Alias |
---|---|---|
-i | ./ | input |
-o | ./mimic.css | output |
-e | <N/A> | exclude |
-l | <N/A> | lit |
Customisation can be applied within a file named 'mimic.config.mjs'
By default mimic-css will search ".html", ".js", ".astro", ".ts" files for classes to process
So to also search jsx files in addition to the defaults we would create the below:
let config;
export default config = {
extensions: [".html", ".js", ".astro", ".ts", ".jsx"],
};
color_palette_1 = {
c1a: "#222831",
c1b: "#393E46",
c1c: "#00ADB5",
c1d: "#EEEEEE",
};
color_palette_2 = {
c2a: "#FFC7C7",
c2b: "#FFE2E2",
c2c: "#F6F6F6",
c2d: "#8785A2",
};
color_palette_3 = {
c3a: "#B7C4CF",
c3b: "#EEE3CB",
c3c: "#D7C0AE",
c3d: "#967E76",
};
color_palette_4 = {
c4a: "#F9ED69",
c4b: "#F08A5D",
c4c: "#B83B5E",
c4d: "#6A2C70",
};
let config;
export default config = {
extensions: [".html"],
lineHeightSnapping: {
xs: "60%",
sm: "120%",
md: "140%",
lg: "160%",
xl: "200%",
xl2: "240%",
},
};
To change the pixel values for each of the media breakpoints specify the new values in the 'mediaBreakPointsValueOverride' object of the mimic.config.js file. No need to add the 'px' suffix here as this will automatically be added by mimic-css for us.
Example:
let config;
export default config = {
mediaBreakPointsValueOverride: {
extrasmall: "1000",
small: "1010",
medium: "1020",
large: "1030",
extralarge: "1040",
},
};
To change the text that is used to specify a Media breakpoint use the 'MediaBreakPointsTextOverride' object in the mimic.config.js file
Example:
let config;
export default config = {
MediaBreakPointsTextOverride: {
extrasmall: "xsmall",
small: "sm",
medium: "normal",
large: "big",
extralarge: "vbig",
},
};
To change the text that is used on the snapping tags use the 'SnappingOverride' object in the mimic.config.js file.
SnappingOverride: {
xs: "xsmall",
sm: "small",
md: "medium",
lg: "big",
xl: "verybig",
xl2: "crazybig",
},
To create a class in place we can use the @ symbol to combine css into a class
<div class="padding:xl@btn border-radius:md@btn btn"></div>
Generated css for the above will be:
.btn { padding: 50px; border-radius: 10px; }
To include CSS in LitElements a good approach to take is Constructable Style Sheets. These require the CSS to be in a JS string and mimic-css provide this output in the file mimic.css.js for us when using the -l flag.
The generated file can be imported to a LitElement using the below syntax
import { TWStyles } from "../styles/mimic.css.js";
export class Header extends
LitElement { static styles = [css``, TWStyles];