@master/css 1.35.13 → 1.35.16
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 +41 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,25 +22,40 @@
|
|
|
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
|
-
- [1. Download](#1-download)
|
|
36
|
-
- [2. Import](#2-import)
|
|
37
|
-
- [Hello World](#hello-world)
|
|
38
|
-
- [Original Design](#original-design)
|
|
39
35
|
- [Inspiration](#inspiration)
|
|
40
36
|
- [Related](#related)
|
|
37
|
+
- [Developer tools](#developer-tools)
|
|
41
38
|
|
|
42
|
-
#
|
|
43
|
-
|
|
39
|
+
# Features
|
|
40
|
+
Let's have a quick overview of the **groundbreaking features** of Master CSS:
|
|
41
|
+
|
|
42
|
+
- 🔥 A whole new **CSS language** instead of utilities/libraries.
|
|
43
|
+
- 🔓 Write CSS properties, functions, selectors and even media queries directly in `class="..."`.
|
|
44
|
+
- 🧠 Automatically generate corresponding CSS rules based on class names.
|
|
45
|
+
- 💖 With enhanced CSS syntax, you can **build UIs with less code**.
|
|
46
|
+
- ⚡️ Directly use **performant JIT in production**. **~13KB**
|
|
47
|
+
- 🧬 [An enhanced and structured CSS syntax](https://docs.master.co/css/syntax-tutorial) for class names.
|
|
48
|
+
- 🌈 [A forerunner to syntax highlighting](https://docs.master.co/css/why-master-css#a-forerunner-to-syntax-highlighting) for class names.
|
|
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**.
|
|
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).
|
|
54
|
+
|
|
55
|
+
# [Why Master CSS](https://docs.master.co/css/why-master-css)
|
|
56
|
+
A brief introduction starts by giving you an understanding of **markup-driven CSS**.
|
|
57
|
+
|
|
58
|
+
😐 Traditional
|
|
44
59
|
```html
|
|
45
60
|
<style>
|
|
46
61
|
.home-section {
|
|
@@ -62,43 +77,30 @@ This is your current/traditional code:
|
|
|
62
77
|
|
|
63
78
|
<section class="home-section">...</section>
|
|
64
79
|
```
|
|
65
|
-
Now,
|
|
80
|
+
🤩 Now, refactor it with a whole new CSS language to make it easier. ↓ 86% code
|
|
66
81
|
```html
|
|
67
82
|
<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
|
|
68
83
|
```
|
|
84
|
+
To learn more, check out the [Why Master CSS](https://docs.master.co/css/why-master-css) documentation.
|
|
69
85
|
|
|
70
86
|
# Quick Start
|
|
71
|
-
This is
|
|
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.
|
|
72
88
|
|
|
73
|
-
## 1. Download
|
|
74
89
|
```shell
|
|
75
90
|
npm install @master/css
|
|
76
91
|
```
|
|
77
|
-
Or use a CDN
|
|
78
|
-
```html
|
|
79
|
-
<script src="https://cdn.jsdelivr.net/npm/@master/css"></script>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
## 2. Import
|
|
83
92
|
```js
|
|
84
|
-
import '@master/css'
|
|
93
|
+
import '@master/css';
|
|
85
94
|
```
|
|
86
|
-
|
|
87
|
-
## Hello World
|
|
95
|
+
or use a CDN
|
|
88
96
|
```html
|
|
89
|
-
<
|
|
90
|
-
Hello World
|
|
91
|
-
</h1>
|
|
97
|
+
<script src="https://cdn.master.co/css"></script>
|
|
92
98
|
```
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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.
|
|
99
|
+
Now, start styling HTML with Master CSS. 🎉
|
|
100
|
+
```html
|
|
101
|
+
<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
|
|
102
|
+
```
|
|
103
|
+
To learn more, check out the [Syntax tutorial](https://docs.master.co/css/syntax-tutorial) documentation.
|
|
102
104
|
|
|
103
105
|
# Inspiration
|
|
104
106
|
Some of our core concepts and designs are inspired by these giants.
|
|
@@ -106,7 +108,9 @@ Some of our core concepts and designs are inspired by these giants.
|
|
|
106
108
|
- __Virtual CSS__ - Difference algorithms, virtual models, etc. are inspired by [Virtual DOM](https://reactjs.org/docs/faq-internals.html).
|
|
107
109
|
|
|
108
110
|
# 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
111
|
- [@master/normal.css](https://github.com/master-co/normal.css) - Normalize browser's styles. ~1KB
|
|
111
112
|
- [@master/keyframes.css](https://github.com/master-co/keyframes.css) - Simple and useful CSS keyframes. ~0.4KB
|
|
112
113
|
- [@master/style-element.react](https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names.
|
|
114
|
+
|
|
115
|
+
## Developer tools
|
|
116
|
+
- [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