mimic-css is a design system that allows you to use standard CSS styles within the class attribute ALONG with Media Queries and Modifiers. Particulary suited to prototyping websites where speed is an important factor.

One of the differentiating factors with mimic-css is that it does not use magic utility class names; the same css that you would use in a style tag is exactly what you use in the class tag. From this you gain the benefits of using a design system but without the downside of losing your CSS knowledge at the same time.

This keeps the learning curve for mimic-css to a minimun and is further reduced by keeping the standard values that can be assigned to say border widths and margins consistent across the board. You’ll only need to be aware of 6 values xs, sm, md, lg, xl and 2xl and you are good to go with consistent spacings across all layout attributes.

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="lg?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) {
  .lg\?display\:flex {
    display: flex;
  }
}

Design System

In order to provide consistency across your website we provide a set of standard values that can be used rather than specific pixel values.

There are 6 values that are used across the board xs, sm, md, lg, xl and 2xl

<div class="padding-top:md">Some Text</div>

becomes

.padding-top\:md {
  padding-top: 8px;
}

---

Pseudo Classes

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;
}

---

Custom Classes

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;
}

---

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-css

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” },

---

DesignSystem Mappings

These specifiers will map to different Pixel Values depending upon the usage.

So for Fonts you’ll have the below mapping:

• xs: 8px
• sm: 12px
• md: 16px
• lg: 24px
• xl: 48px
• 2xl: 92px

Whereas for Padding the mappings will be different:

• xs: 2px
• sm: 4px
• md: 8px
• lg: 20px
• xl: 50px
• 2xl: 200px

---

An example for Padding

<div class="padding-top:md">Some Text</div>

becomes

.padding-top\:md {
  padding-top: 8px;
}

See Padding Examples

And then for Font Size you will see

<div class="font-size:md">Some Text</div>

.font-size\:md {
  font-size: 16px;
}

See Font Size Examples

---

Media Breakpoints

The 5 options we have for specifying media breakpoints are below:

• xs
• sm
• md
• lg
• xl

---

Configuration

By default mimic-css will search “.html”, “.js”, “.astro”, “ts” files for classes to process

In order to serch additional files we can create a file named ‘mimic.config.mjs’

To also search jsx files we would create the below:

let config;

export default config = {
  extensions: [".html", ".js", ".astro", "ts", "jsx"],
};

---

Color Palettes

There are 4 built in Color Palettes each of which can be customised

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",
};

---

Overriding Media Breakpoints

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",
  },
};

Overriding Media Tags

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",
  },
};

Overriding Snapping Tags

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",
  },

---

Lit Integration

LitElement is happiest when its CSS is provided in a Constructable Style Sheet. These require the CSS to be in a JS string and mimic-css provides 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];