@master/css 1.35.13 → 1.35.14
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 +47 -34
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,25 +22,43 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
- [
|
|
26
|
-
- [
|
|
27
|
-
- [
|
|
28
|
-
- [
|
|
29
|
-
- [Join Master Discord](https://discord.gg/sZNKpAAAw6)
|
|
25
|
+
- Visit [css.master.co](https://css.master.co) for full documentation.
|
|
26
|
+
- Browse our [discussion community](https://github.com/master-co/css/discussions).
|
|
27
|
+
- Join our [discord channel](https://discord.gg/sZNKpAAAw6).
|
|
28
|
+
- Follow our [twitter](https://twitter.com/mastercorg).
|
|
30
29
|
|
|
31
30
|
##### On this page
|
|
32
31
|
|
|
33
|
-
- [
|
|
32
|
+
- [Features](#features)
|
|
33
|
+
- [Why Master CSS](#why-master-css)
|
|
34
34
|
- [Quick Start](#quick-start)
|
|
35
|
-
- [
|
|
36
|
-
- [
|
|
37
|
-
- [Hello
|
|
38
|
-
- [Original Design](#original-design)
|
|
35
|
+
- [Install](#install)
|
|
36
|
+
- [Import](#import)
|
|
37
|
+
- [Hello world](#hello-world)
|
|
39
38
|
- [Inspiration](#inspiration)
|
|
40
39
|
- [Related](#related)
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
- [Developer tools](#developer-tools)
|
|
41
|
+
|
|
42
|
+
# Features
|
|
43
|
+
Let's have a quick overview of the **groundbreaking features** of Master CSS:
|
|
44
|
+
|
|
45
|
+
- 🔥 A whole new **CSS language** instead of utilities/libraries.
|
|
46
|
+
- 🔓 Write CSS properties, functions, selectors and even media queries directly in `class="..."`.
|
|
47
|
+
- 🧠 Automatically generate corresponding CSS rules based on class names.
|
|
48
|
+
- 🍬 With CSS syntax enhancements, you can **create UIs with less code**.
|
|
49
|
+
- ⚡️ The JIT mode is only **~13KB**.
|
|
50
|
+
- 💖 Directly use **performant JIT mode in production**.
|
|
51
|
+
- 🧬 [An enhanced and structured CSS syntax](https://docs.master.co/css/syntax-tutorial) for class names.
|
|
52
|
+
- 🌈 [A forerunner to syntax highlighting](https://docs.master.co/css/why-master-css#a-forerunner-to-syntax-highlighting) for class names.
|
|
53
|
+
- ✨ [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
|
+
- 🤩 [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.
|
|
55
|
+
- 😲 [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.
|
|
56
|
+
- ... [css.master.co ](https://css.master.co)
|
|
57
|
+
|
|
58
|
+
# [Why Master CSS](https://docs.master.co/css/why-master-css)
|
|
59
|
+
A brief introduction starts by giving you an understanding of **markup-driven CSS**.
|
|
60
|
+
|
|
61
|
+
🙁 This is your current/traditional code:
|
|
44
62
|
```html
|
|
45
63
|
<style>
|
|
46
64
|
.home-section {
|
|
@@ -62,43 +80,36 @@ This is your current/traditional code:
|
|
|
62
80
|
|
|
63
81
|
<section class="home-section">...</section>
|
|
64
82
|
```
|
|
65
|
-
Now,
|
|
83
|
+
🤩 Now, refactor it with a whole new CSS language to make it easier. ↓ 86% code
|
|
66
84
|
```html
|
|
67
85
|
<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
|
|
68
86
|
```
|
|
87
|
+
To learn more, check out the documentation [Why Master CSS](https://docs.master.co/css/why-master-css).
|
|
69
88
|
|
|
70
89
|
# Quick Start
|
|
71
|
-
This is
|
|
90
|
+
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.
|
|
72
91
|
|
|
73
|
-
##
|
|
92
|
+
## Install
|
|
74
93
|
```shell
|
|
75
94
|
npm install @master/css
|
|
76
95
|
```
|
|
77
|
-
|
|
96
|
+
or use a CDN
|
|
78
97
|
```html
|
|
79
|
-
<script src="https://cdn.
|
|
98
|
+
<script src="https://cdn.master.co/css"></script>
|
|
80
99
|
```
|
|
81
100
|
|
|
82
|
-
##
|
|
101
|
+
## Import
|
|
102
|
+
Import to your entry file. e.g: `src/main.js`
|
|
83
103
|
```js
|
|
84
|
-
import '@master/css'
|
|
104
|
+
import '@master/css';
|
|
85
105
|
```
|
|
86
106
|
|
|
87
|
-
## Hello
|
|
107
|
+
## Hello world
|
|
108
|
+
Now, start styling HTML with Master CSS 🎉
|
|
88
109
|
```html
|
|
89
|
-
<h1 class="font:40 font:heavy
|
|
90
|
-
Hello World
|
|
91
|
-
</h1>
|
|
110
|
+
<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
|
|
92
111
|
```
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
# Original Design
|
|
96
|
-
- __Master CSS Syntax__ - As a whole new language, Master created our own unique syntax.
|
|
97
|
-
- __Class Highlight__ - Master is the first language to highlight class names in markup.
|
|
98
|
-
- __Hybrid Rendering__ - Apply both JIT and AOT to CSS compilation. Similar to [Hydration](https://en.wikipedia.org/wiki/Hydration_(web_development)) technology.
|
|
99
|
-
- __Group Styles__ - The one of groundbreaking features that allows you to extract the same selectors and media query styles and make it short. Inspired by [SerKo](https://github.com/serkodev).
|
|
100
|
-
- __Reactive Styles__ - The one of groundbreaking features that allows you style an element based on parent/sibling state.
|
|
101
|
-
- __Arbitrary selectors and media queries__ - Apply arbitrary selectors and media queries directly in class="", which is the most powerful and comprehensive language on the market.
|
|
112
|
+
To learn more, check out the documentation [Syntax tutorial](https://docs.master.co/css/syntax-tutorial).
|
|
102
113
|
|
|
103
114
|
# Inspiration
|
|
104
115
|
Some of our core concepts and designs are inspired by these giants.
|
|
@@ -106,7 +117,9 @@ Some of our core concepts and designs are inspired by these giants.
|
|
|
106
117
|
- __Virtual CSS__ - Difference algorithms, virtual models, etc. are inspired by [Virtual DOM](https://reactjs.org/docs/faq-internals.html).
|
|
107
118
|
|
|
108
119
|
# Related
|
|
109
|
-
- [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.
|
|
110
120
|
- [@master/normal.css](https://github.com/master-co/normal.css) - Normalize browser's styles. ~1KB
|
|
111
121
|
- [@master/keyframes.css](https://github.com/master-co/keyframes.css) - Simple and useful CSS keyframes. ~0.4KB
|
|
112
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.
|
package/package.json
CHANGED