v1.2.0 (#1)

* Add classes to change the `font-style` property. Add more `font-family` classes
ivteplo · Sep 8, 2024 · 90d3e6f · 90d3e6f
1 parent bacd594
commit 90d3e6f
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 174 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,8 +1,7 @@
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
+indent_style = tab
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,4 @@
 {
-  "semi": false
+  "semi": false,
+	"useTabs": true
 }
diff --git a/README.md b/README.md
@@ -15,35 +15,47 @@ yarn add @ivteplo/utilities.css
 ### Via CDN
 
 Add this piece of code into the `<head>` tag in your HTML file:
+
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@ivteplo/utilities.css/build/main.css">
+<link
+	rel="stylesheet"
+	href="https://unpkg.com/@ivteplo/utilities.css/build/main.css"
+/>
 ```
 
 Or, if you want to use the minified version:
+
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@ivteplo/utilities.css/build/main.min.css">
+<link
+	rel="stylesheet"
+	href="https://unpkg.com/@ivteplo/utilities.css/build/main.min.css"
+/>
 ```
 
 ### Import from JavaScript
 
 This requires a bundler that supports importing CSS:
+
 ```javascript
 import "@ivteplo/utilities.css/build/main.css"
 ```
 
 Or minified version:
+
 ```javascript
 import "@ivteplo/utilities.css/build/main.min.css"
 ```
 
 ### Import from CSS
 
 Using bundler:
+
 ```css
 @import "@ivteplo/utilities.css";
 ```
 
 Using CDN:
+
 ```css
 @import "https://unpkg.com/@ivteplo/utilities.css/build/main.min.css";
 ```
@@ -52,23 +64,23 @@ Using CDN:
 
 ### Flexbox
 
-- `.row` - flexbox container with horizontal direction
-  - `.reversed-order` - reverse the order of items
-  - `.wrap` - wrap the items that overflow the horizontal axis to a new line
-  - `.reversed-wrap` - the same as `.wrap`, but in reverse order
-  - `.no-wrap` - disable wrapping of children
-  - `.items-start`, `.items-center`, `.items-end`, `.items-stretch`, `.items-baseline` - vertical alignment of children
-  - `.content-start`, `.content-center`, `.content-end`, `.content-stretch`, `.content-baseline` - vertical alignment of children if there some children have been wrapped to a new row
-  - `.justify-start`, `.justify-center`, `.justify-end`, `.justify-stretch`, `.justify-baseline` - horizontal alignment of children
-- `.column` - flexbox container with vertical direction
-  - `.reversed-order` - reverse the order of items
-  - `.wrap` - wrap the items  that overflow the vertical axis to a new column
-  - `.reversed-wrap` - the same as `.wrap`, but in reverse order
-  - `.no-wrap` - disable wrapping of children
-  - `.items-start`, `.items-center`, `.items-end`, `.items-stretch`, `.items-baseline` - horizontal alignment of children
-  - `.content-start`, `.content-center`, `.content-end`, `.content-stretch`, `.content-baseline` - horizontal alignment of children if there some children have been wrapped to a new column
-  - `.justify-start`, `.justify-center`, `.justify-end`, `.justify-stretch`, `.justify-baseline` - vertical alignment of children
-- `.fill` - fill the parent, applies to a child of a flexbox container
+- `.row` — flexbox container with horizontal direction
+  - `.reversed-order` — reverse the order of items
+  - `.wrap` — wrap the items that overflow the horizontal axis to a new line
+  - `.reversed-wrap` — the same as `.wrap`, but in reverse order
+  - `.no-wrap` — disable wrapping of children
+  - `.items-start`, `.items-center`, `.items-end`, `.items-stretch`, `.items-baseline` — vertical alignment of children
+  - `.content-start`, `.content-center`, `.content-end`, `.content-stretch`, `.content-baseline` — vertical alignment of children if there some children have been wrapped to a new row
+  - `.justify-start`, `.justify-center`, `.justify-end`, `.justify-stretch`, `.justify-baseline` — horizontal alignment of children
+- `.column` — flexbox container with vertical direction
+  - `.reversed-order` — reverse the order of items
+  - `.wrap` — wrap the items that overflow the vertical axis to a new column
+  - `.reversed-wrap` — the same as `.wrap`, but in reverse order
+  - `.no-wrap` — disable wrapping of children
+  - `.items-start`, `.items-center`, `.items-end`, `.items-stretch`, `.items-baseline` — horizontal alignment of children
+  - `.content-start`, `.content-center`, `.content-end`, `.content-stretch`, `.content-baseline` — horizontal alignment of children if there some children have been wrapped to a new column
+  - `.justify-start`, `.justify-center`, `.justify-end`, `.justify-stretch`, `.justify-baseline` — vertical alignment of children
+- `.fill` — fill the parent, applies to a child of a flexbox container
 
 ### Fonts
 
@@ -82,8 +94,15 @@ Using CDN:
   - `.font-bold` (700)
   - `.font-extra-bold` (800)
   - `.font-black` (900)
+- Font styles
+  - `.font-normal` — normal style
+  - `.font-italic` — italic font
+  - `.font-oblique` — oblique font
 - Font families
-  - `.font-system` - default system font
+  - `.font-system` — default system font
+  - `.font-monospace` — cross-platform monospace font
+  - `.font-serif` — cross-platform serif font
+  - `.font-sans-serif` — cross-platform sans-serif font
 
 ### Text
 
@@ -96,11 +115,13 @@ Using CDN:
 ### Miscellaneous
 
 Selection of text and other objects:
-- `.selectable` - enable selection
-- `.not-selectable` - disable selection
+
+- `.selectable` — enable selection
+- `.not-selectable` — disable selection
 
 Mouse cursor:
-- `.cursor-pointer` - show pointer cursor on hover
+
+- `.cursor-pointer` — show pointer cursor on hover
 
 ## Development