@master/css 1.35.9 → 1.35.12
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 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<p align="center">
|
|
8
8
|
<b><!-- name -->CSS<!----></b>
|
|
9
9
|
</p>
|
|
10
|
-
<p align="center"><!-- package.description -->A Virtual CSS language with enhanced syntax.
|
|
10
|
+
<p align="center"><!-- package.description -->A Virtual CSS language with enhanced syntax. ~13KB<!----></p>
|
|
11
11
|
|
|
12
12
|
[](https://github.com/master-co/css/blob/main/LICENSE)
|
|
13
13
|
[](https://www.npmjs.com/package/@master/css)
|
|
@@ -22,17 +22,15 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
Documentation
|
|
26
25
|
- [Introduction](https://css.master.co)
|
|
27
26
|
- [Setup](https://docs.master.co/css/setup)
|
|
28
|
-
- [Why](https://docs.master.co/css/why)
|
|
29
|
-
|
|
30
|
-
Community
|
|
27
|
+
- [Why Master CSS](https://docs.master.co/css/why-master-css)
|
|
31
28
|
- [Github Discussions](https://github.com/master-co/css/discussions)
|
|
32
29
|
- [Join Master Discord](https://discord.gg/sZNKpAAAw6)
|
|
33
30
|
|
|
34
31
|
##### On this page
|
|
35
32
|
|
|
33
|
+
- [Core Concept](#core-concept)
|
|
36
34
|
- [Quick Start](#quick-start)
|
|
37
35
|
- [1. Download](#1-download)
|
|
38
36
|
- [2. Import](#2-import)
|
|
@@ -41,6 +39,34 @@ Community
|
|
|
41
39
|
- [Inspiration](#inspiration)
|
|
42
40
|
- [Related](#related)
|
|
43
41
|
|
|
42
|
+
# Core Concept
|
|
43
|
+
This is your current/traditional code:
|
|
44
|
+
```html
|
|
45
|
+
<style>
|
|
46
|
+
.home-section {
|
|
47
|
+
background-color: blue;
|
|
48
|
+
padding: 2rem;
|
|
49
|
+
text-align: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.home-section:hover {
|
|
53
|
+
background-color: red;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (min-width: 1024px) {
|
|
57
|
+
.home-section {
|
|
58
|
+
padding: 3rem;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
</style>
|
|
62
|
+
|
|
63
|
+
<section class="home-section">...</section>
|
|
64
|
+
```
|
|
65
|
+
Now, writing CSS in a whole new language makes UI development easier. ↓ 86% code
|
|
66
|
+
```html
|
|
67
|
+
<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
|
|
68
|
+
```
|
|
69
|
+
|
|
44
70
|
# Quick Start
|
|
45
71
|
This is just a quick start guide, the official [documentation](https://docs.master.co/styles/setup) here.
|
|
46
72
|
|
|
@@ -64,22 +90,23 @@ import '@master/css'
|
|
|
64
90
|
Hello World
|
|
65
91
|
</h1>
|
|
66
92
|
```
|
|
67
|
-
Next, learn the
|
|
93
|
+
Next, learn the structured [Syntax - Master CSS](https://docs.master.co/styles/syntax)!
|
|
68
94
|
|
|
69
95
|
# Original Design
|
|
70
|
-
- __Master CSS Syntax__
|
|
71
|
-
- __Class Highlight__
|
|
72
|
-
- __Hybrid Rendering__
|
|
73
|
-
- __Group Styles__
|
|
74
|
-
- __Reactive Styles__
|
|
75
|
-
- __Arbitrary selectors and media queries__
|
|
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.
|
|
76
102
|
|
|
77
103
|
# Inspiration
|
|
78
104
|
Some of our core concepts and designs are inspired by these giants.
|
|
79
|
-
- __Language__
|
|
80
|
-
- __Virtual CSS__
|
|
105
|
+
- __Language__ - Master is a language, but it was originally inspired by [ACSS](https://acss.io/)'s concept of atomic classes.
|
|
106
|
+
- __Virtual CSS__ - Difference algorithms, virtual models, etc. are inspired by [Virtual DOM](https://reactjs.org/docs/faq-internals.html).
|
|
81
107
|
|
|
82
108
|
# Related
|
|
83
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.
|
|
84
110
|
- [@master/normal.css](https://github.com/master-co/normal.css) - Normalize browser's styles. ~1KB
|
|
111
|
+
- [@master/keyframes.css](https://github.com/master-co/keyframes.css) - Simple and useful CSS keyframes. ~0.4KB
|
|
85
112
|
- [@master/style-element.react](https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names.
|
package/package.json
CHANGED