mimic-css

v0.4.25

Published

2 months ago

A design system that allows the use of standard CSS styles within the class attribute ALONG with Media Queries and Modifiers.

Downloads

114

0High
0Medium
0Low

markjameshoward

MIMIC CSS

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

Example

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

Media BreakPoints

Design System

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

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

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

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

Command Line Arguments

| option | Default | Alias | | ------ | ----------- | ------- | | -i | ./ | input | | -o | ./mimic.css | output | | -e | <N/A> | exclude | | -l | <N/A> | lit |

Configuration ['mimic.config.mjs']

Customisation can be applied within a file named 'mimic.config.mjs'

Overriding Files to Search

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 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 Line Height Snapping

let config;

export default config = {
  extensions: [".html"],
  lineHeightSnapping: {
    xs: "60%",
    sm: "120%",
    md: "140%",
    lg: "160%",
    xl: "200%",
    xl2: "240%",
  },
};

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

Creating Classes