mimic-css
v0.0.79-alpha
Published
**mimic-css** is a design system that allows you use standard CSS styles within the class attribute ALONG with Media Queries and Modifiers.
Downloads
3,075
Readme
mimic-css
mimic-css is a design system that allows you use standard CSS styles within the class attribute ALONG with Media Queries and Modifiers.
So you are enabled to write standard CSS such as display:flex
and apply a media query inline within the class e.g.
<div class="large?display:flex">Some Text</div>
Which will result in the below class being generated for you and 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;
}
}
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;
}
From this you gain the benefits of using a design system but without the downside of losing your CSS knowledge at the same time
Install:
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.
Usage
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
Other options:
- i: { type: "string", default: "./", alias: "input" },
- o: { type: "string", default: "./mimic.css", alias: "output" },
- e: { type: "string", default: "", alias: "exclude" },
- l: { type: "boolean", default: false, alias: "lit" },
Magic Numbers
In order to reduce the amount of time spent looking up magic names in mimic-css there is one set of values used across the board:
These specifiers will map to different Pixel Values depending upon the usage.
So for Fonts you'll have the below mapping:
Whereas for Padding the mappings will be different:
An example for Padding
<div class="padding-top:md">Some Text</div>
becomes
.padding-top\:md {
padding-top: 8px;
}
And then for Font Size you will see
<div class="font-size:md">Some Text</div>
.font-size\:md {
font-size: 16px;
}
Normal CSS will remain unchanged (bar a space inserted)
So the below:
<div class="display:flex">Some Text</div>
Becomes:
.display\:flex {
display: flex;
}
Media Breakpoints
The 5 options we have for specifying media breakpoints are below:
Lit Integration
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];