Merge branch 'develop'

hz2 · Nov 1, 2023 · a832eb7 · a832eb7
2 parents 7de12d6 + c5843ce
commit a832eb7
Show file tree

Hide file tree

Showing 9 changed files with 328 additions and 203 deletions.
diff --git a/README.md b/README.md
@@ -4,9 +4,8 @@
 [![npm](https://img.shields.io/npm/dm/pub.css)](https://www.npmjs.com/package/pub.css)
 [![Docker Package](https://github.com/hz2/pub.css/actions/workflows/action-docker.yml/badge.svg)](https://github.com/hz2/pub.css/actions/workflows/action-docker.yml)
 [![Docker Image Version](https://img.shields.io/docker/v/hzsq/pub.css)](https://hub.docker.com/r/hzsq/pub.css)
-![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/hz2/pub.css) 
-![GitHub last commit](https://img.shields.io/github/last-commit/hz2/pub.css) 
-
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/hz2/pub.css)
+![GitHub last commit](https://img.shields.io/github/last-commit/hz2/pub.css)
 
 A minimal and **classful** Public CSS toolkit. it helps you build pages easily
 
@@ -27,49 +26,79 @@ npm install pub.css
 - For Less
 
 ```less
-@import '~pub.css/less/index.less';
+@import "~pub.css/less/index.less";
 ```
 
 - For Scss
 
 ```scss
-@import '~pub.css/scss/index.scss';
+@import "~pub.css/scss/index.scss";
 ```
 
 - css bundle
 
 ```scss
-@import '~pub.css/css/index.css';
+@import "~pub.css/css/index.css";
 ```
 
 - main.js
 
 ```js
-import 'pub.css/css/index.css';
+import "pub.css/css/index.css";
 ```
 
 - docker
-start a service
+  start a service
+
 ```bash
 docker run --name some-pubcss -d -p 8012:80 hzsq/pub.css
 ```
+
 proxy `localhost:8012` as `/pubcss`
+
 ```html
-<link rel="stylesheet" type="text/css" href="/pubcss/css/index.css">
+<link rel="stylesheet" type="text/css" href="/pubcss/css/index.css" />
 ```
 
 - CDN
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pub.css/css/index.css">
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://cdn.jsdelivr.net/npm/pub.css/css/index.css"
+/>
 ```
 
 or
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://unpkg.com/pub.css/css/index.css">
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://unpkg.com/pub.css/css/index.css"
+/>
 ```
 
+# Quick Reference
+
+| prefix        | short for                        |
+| ------------- | -------------------------------- |
+| `.c{value}`   | `c`olor                          |
+| `.bgc{value}` | `b`ack`g`round `c`olor           |
+| `.w{num}`     | `w`idth                          |
+| `.h{num}`     | `h`eight                         |
+| `.sq{num}`    | `sq`uare ( width & height )      |
+| `.wp{num}`    | `w`idth `p`ercentage             |
+| `.hp{num}`    | `h`eight `p`ercentage            |
+| `.fz{num}`    | `f`ont `s`ize                    |
+| `.fw{num}`    | `f`ont `w`eight                  |
+| `.m{num}`     | `m`argin                         |
+| `.p{num}`     | `p`adding                        |
+| `.ml{num}`    | `m`argin `l`eft                  |
+| `.px{num}`    | `p`adding horizontal ( `x` axis) |
+| `.my{num}`    | `m`argin vertical ( `y` axis)    |
+
 # Document
 
 - [Document](./doc.md)
diff --git a/doc.md b/doc.md
@@ -1,114 +1,116 @@
-
 # Base
 
 ## Layout
 
-| class name | define | equals |
-| - | - | - |
-| `.flex ` | the flex box | [display: flex;](#flex) |
-| `.flex.around` | space around| `justify-content: space-around;` |
-| `.flex.center` | center | `justify-content: center;` |
-| `.flex.start` | start | `justify-content: flex-start;` |
-| `.flex.end` | end | `justify-content: flex-end;` |
-| `.flex.top` | top | `align-items: flex-start;` |
-| `.flex.bottom` | bottom | `align-items: flex-end;` |
-| `.block` | display block | `display: block;` |
-| `.inline-block` | inline block | `display: inline-block;` |
-| `.align-top` | vertical top | `vertical-align: top;` |
-| `.auto` | margin auto | `margin: auto;` |
-
+| class name      | define        | equals                           |
+| --------------- | ------------- | -------------------------------- |
+| `.flex `        | the flex box  | [display: flex;](#flex)          |
+| `.flex.around`  | space around  | `justify-content: space-around;` |
+| `.flex.center`  | center        | `justify-content: center;`       |
+| `.flex.start`   | start         | `justify-content: flex-start;`   |
+| `.flex.end`     | end           | `justify-content: flex-end;`     |
+| `.flex.top`     | top           | `align-items: flex-start;`       |
+| `.flex.bottom`  | bottom        | `align-items: flex-end;`         |
+| `.block`        | display block | `display: block;`                |
+| `.inline-block` | inline block  | `display: inline-block;`         |
+| `.align-top`    | vertical top  | `vertical-align: top;`           |
+| `.auto`         | margin auto   | `margin: auto;`                  |
 
 ### .flex
+
 ```css
 .flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
 }
 ```
+
 ## Image
 
-| class name | define | equals |
-| - | - | - |
-| `.img-cover` | image cover | `object-fit: cover;` |
+| class name     | define        | equals                 |
+| -------------- | ------------- | ---------------------- |
+| `.img-cover`   | image cover   | `object-fit: cover;`   |
 | `.img-contain` | image contain | `object-fit: contain;` |
 
 ## Text
 
-| class name | define | equals |
-| - | - | - |
-| `.center` | text align center | `text-align: center;` |
-| `.text-right` | text align right | `text-align: right;` |
+| class name      | define             | equals                 |
+| --------------- | ------------------ | ---------------------- |
+| `.center`       | text align center  | `text-align: center;`  |
+| `.text-right`   | text align right   | `text-align: right;`   |
 | `.text-justify` | text align justify | `text-align: justify;` |
-| `.bold` | font weight bold | `font-weight: bold;` |
-| `.bolder` | font weight bolder | `font-weight: bolder;` |
+| `.bold`         | font weight bold   | `font-weight: bold;`   |
+| `.bolder`       | font weight bolder | `font-weight: bolder;` |
 
 ## Cursor
 
-| class name | define | equals |
-| - | - | - |
+| class name | define         | equals             |
+| ---------- | -------------- | ------------------ |
 | `.pointer` | cursor pointer | `cursor: pointer;` |
+
 ## Transition
 
 ```
-# pub.config: 
+# pub.config:
 transition-duration: `valueList.times`
 transition-delay: `valueList.times`
 ```
 
-| class name | define | equals |
-| - | - | - |
-| `.transition` | transition | `transition: all linear 150ms;` |
+| class name           | define          | equals                                |
+| -------------------- | --------------- | ------------------------------------- |
+| `.transition`        | transition      | `transition: all linear 150ms;`       |
 | `.transition.linear` | timing-function | `transition-timing-function: linear;` |
-| `.transition.dr100` | duration | `transition-duration: 100ms;` |
-| `.transition.dl100` | delay | `transition-delay: 100ms;` |
+| `.transition.dr100`  | duration        | `transition-duration: 100ms;`         |
+| `.transition.dl100`  | delay           | `transition-delay: 100ms;`            |
 
 ## Border
 
 ```
-# pub.config: 
+# pub.config:
 border-width: `valueList.borderWidth`
 border-color: `valueList.color`
 border-radius: `valueList.borderRadius`
 ```
 
-| class name | define | equals |
-| - | - | - |
-| `.border` | border | `border: 1px solid #ddd;` |
-| `.border.dotted` | border style | `border-style: dotted;` |
-| `.bdw2` | border width | `border-width: 2px;` |
-| `.bdc7` | border color | `border-color: #777;` |
-| `.bdr999` | border radius | `border-radius: 999px;` |
+| class name       | define        | equals                    |
+| ---------------- | ------------- | ------------------------- |
+| `.border`        | border        | `border: 1px solid #ddd;` |
+| `.border.dotted` | border style  | `border-style: dotted;`   |
+| `.bdw2`          | border width  | `border-width: 2px;`      |
+| `.bdc7`          | border color  | `border-color: #777;`     |
+| `.bdr999`        | border radius | `border-radius: 999px;`   |
 
 # Color
 
 ## Color
 
 ```
-# pub.config: 
+# pub.config:
 color: `valueList.color`
 background-color: `valueList.color`
 ```
-| class name | define | equals |
-| - | - | - |
-| `.c2` | color | `color: #222;` |
-| `.bgcf8` | background color | `background-color: #f8f8f8;` |
+
+| class name | define           | equals                       |
+| ---------- | ---------------- | ---------------------------- |
+| `.c2`      | color            | `color: #222;`               |
+| `.bgcf8`   | background color | `background-color: #f8f8f8;` |
 
 # Space
 
 ## Box Space ( margin and padding )
 
 Formal syntax
 
-> . *postion* [ *direction* ] *value*
+> . _postion_ [ *direction* ] _value_
 
-*postion*
+_postion_
 
 - m -> margin
 - p -> padding
 
-*direction*
+_direction_
 
 - l -> left
 - r -> right
@@ -117,54 +119,55 @@ Formal syntax
 - x -> left right
 - y -> top bottom
 
-*value*
+_value_
 
 ```
-# pub.config: 
+# pub.config:
 space: `valueList.boxSpace`
 ```
 
-| class name | define | equals |
-| - | - | - |
-| `.m5` | margin 5px | `margin: 5px;` |
-| `.ml8` | margin left 8px | `margin-left: 8px;` |
-| `.px10` | padding horizontal 10px | `padding-left: 10px; padding-right: 10px;` |
-| `.my15` | margin vertical 15px | `margin-top: 15px; margin-bottom: 15px;` |
-
+| class name | define                  | equals                                     |
+| ---------- | ----------------------- | ------------------------------------------ |
+| `.m5`      | margin 5px              | `margin: 5px;`                             |
+| `.ml8`     | margin left 8px         | `margin-left: 8px;`                        |
+| `.px10`    | padding horizontal 10px | `padding-left: 10px; padding-right: 10px;` |
+| `.my15`    | margin vertical 15px    | `margin-top: 15px; margin-bottom: 15px;`   |
 
 ## Box Side ( width and height )
 
 ```
-# pub.config: 
+# pub.config:
 side: `valueList.boxSide`
 ```
 
-| class name | define | equals |
-| - | - | - |
-| `.w100` | width | `width: 100px;` |
-| `.h60` | height | `height: 60px;` |
+| class name | define | equals                       |
+| ---------- | ------ | ---------------------------- |
+| `.w100`    | width  | `width: 100px;`              |
+| `.h60`     | height | `height: 60px;`              |
+| `.sq60`    | square | `width: 100px;height: 60px;` |
 
-## Ratio ( width / height percentage ) 
+## Ratio ( width / height percentage )
 
 ```
-# pub.config: 
+# pub.config:
 ratio: `valueList.ratio`
 ```
 
-| class name | define | equals |
-| - | - | - |
-| `.wp10` | width percentage | `width: 10%;` |
-| `.hp30` | height percentage | `height: 30%;` |
+| class name | define            | equals         |
+| ---------- | ----------------- | -------------- |
+| `.wp10`    | width percentage  | `width: 10%;`  |
+| `.hp30`    | height percentage | `height: 30%;` |
 
 # Typeset
+
 ## font-size
 
 ```
-# pub.config: 
+# pub.config:
 font-size: `valueList.fontSize`
 ```
 
-| class name | define | equals |
-| - | - | - |
-| `.fz12` | font size | `font-size: 12px;` |
-
+| class name | define    | equals             |
+| ---------- | --------- | ------------------ |
+| `.fz12`    | font size | `font-size: 12px;` |
+| `.fw1`    | font weight | `font-weight: 100;` |
diff --git a/src/common/base.less b/src/common/base.less
@@ -48,6 +48,14 @@
     flex-wrap: nowrap;
   }
 
+  >.grow {
+    flex-grow: 1;
+  }
+
+  >.shrink {
+    flex-shrink: 1;
+  }
+
 }
 
 .inline-flex {

diff --git a/src/common/space.less b/src/common/space.less
@@ -6,6 +6,6 @@
 }
 
 .round {
-  border-radius: 100%;
+  border-radius: 999px;
   overflow: hidden;
 }