@master/css 1.35.11 → 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.
Files changed (2) hide show
  1. package/README.md +74 -32
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -22,62 +22,104 @@
22
22
 
23
23
  ![image](https://raw.githubusercontent.com/master-co/css-language-service/alpha/images/cover.jpg)
24
24
 
25
- - [Introduction](https://css.master.co)
26
- - [Setup](https://docs.master.co/css/setup)
27
- - [Why Master CSS](https://docs.master.co/css/why-master-css)
28
- - [Github Discussions](https://github.com/master-co/css/discussions)
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
 
32
+ - [Features](#features)
33
+ - [Why Master CSS](#why-master-css)
33
34
  - [Quick Start](#quick-start)
34
- - [1. Download](#1-download)
35
- - [2. Import](#2-import)
36
- - [Hello World](#hello-world)
37
- - [Original Design](#original-design)
35
+ - [Install](#install)
36
+ - [Import](#import)
37
+ - [Hello world](#hello-world)
38
38
  - [Inspiration](#inspiration)
39
39
  - [Related](#related)
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:
62
+ ```html
63
+ <style>
64
+ .home-section {
65
+ background-color: blue;
66
+ padding: 2rem;
67
+ text-align: center;
68
+ }
69
+
70
+ .home-section:hover {
71
+ background-color: red;
72
+ }
73
+
74
+ @media (min-width: 1024px) {
75
+ .home-section {
76
+ padding: 3rem;
77
+ }
78
+ }
79
+ </style>
80
+
81
+ <section class="home-section">...</section>
82
+ ```
83
+ 🤩 Now, refactor it with a whole new CSS language to make it easier. ↓ 86% code
84
+ ```html
85
+ <section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
86
+ ```
87
+ To learn more, check out the documentation [Why Master CSS](https://docs.master.co/css/why-master-css).
40
88
 
41
89
  # Quick Start
42
- This is just a quick start guide, the official [documentation](https://docs.master.co/styles/setup) here.
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.
43
91
 
44
- ## 1. Download
92
+ ## Install
45
93
  ```shell
46
94
  npm install @master/css
47
95
  ```
48
- Or use a CDN
96
+ or use a CDN
49
97
  ```html
50
- <script src="https://cdn.jsdelivr.net/npm/@master/css"></script>
98
+ <script src="https://cdn.master.co/css"></script>
51
99
  ```
52
100
 
53
- ## 2. Import
101
+ ## Import
102
+ Import to your entry file. e.g: `src/main.js`
54
103
  ```js
55
- import '@master/css'
104
+ import '@master/css';
56
105
  ```
57
106
 
58
- ## Hello World
107
+ ## Hello world
108
+ Now, start styling HTML with Master CSS 🎉
59
109
  ```html
60
- <h1 class="font:40 font:heavy bg:blue:hover m:50 text:center@md">
61
- Hello World
62
- </h1>
110
+ <h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
63
111
  ```
64
- Next, learn the common [Syntax - Master CSS](https://docs.master.co/styles/syntax)!
65
-
66
- # Original Design
67
- - __Master CSS Syntax__: As a whole new language, Master created our own unique syntax.
68
- - __Class Highlight__: Master is the first language to highlight class names in markup.
69
- - __Hybrid Rendering__: Apply both JIT and AOT to CSS compilation. Similar to [Hydration](https://en.wikipedia.org/wiki/Hydration_(web_development)) technology.
70
- - __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).
71
- - __Reactive Styles__ ─ the one of groundbreaking features that allows you style an element based on parent/sibling state.
72
- - __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).
73
113
 
74
114
  # Inspiration
75
115
  Some of our core concepts and designs are inspired by these giants.
76
- - __Language__: Master is a language, but it was originally inspired by [ACSS](https://acss.io/)'s concept of atomic classes.
77
- - __Virtual CSS__: Difference algorithms, virtual models, etc. are inspired by [Virtual DOM](https://reactjs.org/docs/faq-internals.html).
116
+ - __Language__ - Master is a language, but it was originally inspired by [ACSS](https://acss.io/)'s concept of atomic classes.
117
+ - __Virtual CSS__ - Difference algorithms, virtual models, etc. are inspired by [Virtual DOM](https://reactjs.org/docs/faq-internals.html).
78
118
 
79
119
  # Related
80
- - [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.
81
120
  - [@master/normal.css](https://github.com/master-co/normal.css) - Normalize browser's styles. ~1KB
82
121
  - [@master/keyframes.css](https://github.com/master-co/keyframes.css) - Simple and useful CSS keyframes. ~0.4KB
83
- - [@master/style-element.react](https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names.
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
@@ -25,5 +25,5 @@
25
25
  "type": "git",
26
26
  "url": "https://github.com/master-co/css.git"
27
27
  },
28
- "version": "1.35.11"
28
+ "version": "1.35.14"
29
29
  }