@master/css 1.35.14 → 1.35.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -27
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,12 +32,9 @@
|
|
|
32
32
|
- [Features](#features)
|
|
33
33
|
- [Why Master CSS](#why-master-css)
|
|
34
34
|
- [Quick Start](#quick-start)
|
|
35
|
-
|
|
36
|
-
- [Import](#import)
|
|
37
|
-
- [Hello world](#hello-world)
|
|
35
|
+
- [Developer Tools](#developer-tools)
|
|
38
36
|
- [Inspiration](#inspiration)
|
|
39
37
|
- [Related](#related)
|
|
40
|
-
- [Developer tools](#developer-tools)
|
|
41
38
|
|
|
42
39
|
# Features
|
|
43
40
|
Let's have a quick overview of the **groundbreaking features** of Master CSS:
|
|
@@ -45,20 +42,20 @@ Let's have a quick overview of the **groundbreaking features** of Master CSS:
|
|
|
45
42
|
- 🔥 A whole new **CSS language** instead of utilities/libraries.
|
|
46
43
|
- 🔓 Write CSS properties, functions, selectors and even media queries directly in `class="..."`.
|
|
47
44
|
- 🧠 Automatically generate corresponding CSS rules based on class names.
|
|
48
|
-
-
|
|
49
|
-
- ⚡️
|
|
50
|
-
- 💖 Directly use **performant JIT mode in production**.
|
|
45
|
+
- 💖 With enhanced CSS syntax, you can **build UIs with less code**.
|
|
46
|
+
- ⚡️ Directly use **performant JIT in production**. **~13KB**
|
|
51
47
|
- 🧬 [An enhanced and structured CSS syntax](https://docs.master.co/css/syntax-tutorial) for class names.
|
|
52
48
|
- 🌈 [A forerunner to syntax highlighting](https://docs.master.co/css/why-master-css#a-forerunner-to-syntax-highlighting) for class names.
|
|
53
49
|
- ✨ [Hybrid Rendering](https://docs.master.co/css/hybrid-rendering) that allows you to **pre-generate CSS from HTML on the server side**, and then continue to **use JIT on the client side**.
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
|
|
50
|
+
- ✨ [Group Styles](https://docs.master.co/css/syntax-tutorial#group-styles) that allows you to extract the same selectors and media query styles and make it short.
|
|
51
|
+
- ✨ [Reactive Styles](https://docs.master.co/css/syntax-tutorial#style-an-element-based-on-target-state) that allows you to style an element based on parent/sibling state.
|
|
52
|
+
|
|
53
|
+
To learn more, check out the [documentation](https://docs.master.co/css/why-master-css).
|
|
57
54
|
|
|
58
55
|
# [Why Master CSS](https://docs.master.co/css/why-master-css)
|
|
59
56
|
A brief introduction starts by giving you an understanding of **markup-driven CSS**.
|
|
60
57
|
|
|
61
|
-
|
|
58
|
+
😐 Traditional
|
|
62
59
|
```html
|
|
63
60
|
<style>
|
|
64
61
|
.home-section {
|
|
@@ -84,32 +81,29 @@ A brief introduction starts by giving you an understanding of **markup-driven CS
|
|
|
84
81
|
```html
|
|
85
82
|
<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
|
|
86
83
|
```
|
|
87
|
-
To learn more, check out the
|
|
84
|
+
To learn more, check out the [Why Master CSS](https://docs.master.co/css/why-master-css) documentation.
|
|
88
85
|
|
|
89
86
|
# Quick Start
|
|
90
87
|
This is a quick start guide, check out the [full setup guide](https://docs.master.co/css/setup) to integrate with your build tools and frameworks.
|
|
91
88
|
|
|
92
|
-
## Install
|
|
93
89
|
```shell
|
|
94
90
|
npm install @master/css
|
|
95
91
|
```
|
|
92
|
+
```js
|
|
93
|
+
import '@master/css';
|
|
94
|
+
```
|
|
96
95
|
or use a CDN
|
|
97
96
|
```html
|
|
98
97
|
<script src="https://cdn.master.co/css"></script>
|
|
99
98
|
```
|
|
100
|
-
|
|
101
|
-
## Import
|
|
102
|
-
Import to your entry file. e.g: `src/main.js`
|
|
103
|
-
```js
|
|
104
|
-
import '@master/css';
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
## Hello world
|
|
108
|
-
Now, start styling HTML with Master CSS 🎉
|
|
99
|
+
Now, start styling HTML with Master CSS. 🎉
|
|
109
100
|
```html
|
|
110
101
|
<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
|
|
111
102
|
```
|
|
112
|
-
To learn more, check out the
|
|
103
|
+
To learn more, check out the [Syntax tutorial](https://docs.master.co/css/syntax-tutorial) documentation.
|
|
104
|
+
|
|
105
|
+
# Developer Tools
|
|
106
|
+
- [Master CSS Language Service](https://marketplace.visualstudio.com/items?itemName=masterco.master-css-language-service) - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.
|
|
113
107
|
|
|
114
108
|
# Inspiration
|
|
115
109
|
Some of our core concepts and designs are inspired by these giants.
|
|
@@ -119,7 +113,4 @@ Some of our core concepts and designs are inspired by these giants.
|
|
|
119
113
|
# Related
|
|
120
114
|
- [@master/normal.css](https://github.com/master-co/normal.css) - Normalize browser's styles. ~1KB
|
|
121
115
|
- [@master/keyframes.css](https://github.com/master-co/keyframes.css) - Simple and useful CSS keyframes. ~0.4KB
|
|
122
|
-
- [@master/style-element.react](https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names.
|
|
123
|
-
|
|
124
|
-
## Developer tools
|
|
125
|
-
- [Master CSS Language Service](https://marketplace.visualstudio.com/items?itemName=masterco.master-css-language-service) - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.
|
|
116
|
+
- [@master/style-element.react](https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names. ~800B
|
package/package.json
CHANGED