Skip to content

Commit 0fd7cf7

Browse files
arinkerarinker
committed
refactor: Update fluid property names in README.md
1 parent c2902d2 commit 0fd7cf7

3 files changed

Lines changed: 36 additions & 36 deletions

File tree

‎README.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,37 +39,37 @@ FluidSizingCSS is a pioneering solution for responsive design that transforms ho
3939

4040
2. **Import the CSS file** into your project based on the framework you’re using:
4141

42-
- **HTML/Vanilla JavaScript**: Add to your HTML `<head>`:
43-
44-
```html
45-
<link rel="stylesheet" href="node_modules/fluidsizingcss/fluidsizingcss.css">
46-
```
47-
4842
- **React**: Import in your JavaScript/TypeScript file:
4943

5044
```javascript
51-
import 'fluidsizingcss/fluidsizingcss.css';
45+
import 'fluidsizingcss/all';
5246
```
5347

5448
- **Vue.js**: Import in your entry file:
5549

5650
```javascript
57-
import 'fluidsizingcss/fluidsizingcss.css';
51+
import 'fluidsizingcss/all';
5852
```
5953

6054
- **Angular**: Add to the `styles` array in `angular.json`:
6155

6256
```json
6357
"styles": [
64-
"node_modules/fluidsizingcss/fluidsizingcss.css",
58+
"node_modules/fluidsizingcss/dist/fluidsizingcss.min.css",
6559
"src/styles.css"
6660
]
6761
```
6862

63+
- **HTML/Vanilla JavaScript**: Add to your HTML `<head>`:
64+
65+
```html
66+
<link rel="stylesheet" href="node_modules/fluidsizingcss/dist/fluidsizingcss.min.css">
67+
```
68+
6969
- **SASS/SCSS**: Import in your main SASS/SCSS file:
7070

7171
```scss
72-
@import 'node_modules/fluidsizingcss/fluidsizingcss.css';
72+
@import 'node_modules/fluidsizingcss/dist/fluidsizingcss.min.css';
7373
```
7474

7575
### Optional: Smaller CSS Files
@@ -79,13 +79,13 @@ To improve performance, you can choose specialized versions of FluidSizingCSS:
7979
- **Logical Properties Only** (e.g., `block-size`, `inline-size`):
8080

8181
```javascript
82-
import 'fluidsizingcss/fluidsizingcss-logical.css';
82+
import 'fluidsizingcss/logical';
8383
```
8484

8585
- **Physical Properties Only** (e.g., `height`, `width`):
8686

8787
```javascript
88-
import 'fluidsizingcss/fluidsizingcss-physical.css';
88+
import 'fluidsizingcss/physical';
8989
```
9090

9191
### Via CDN
@@ -95,31 +95,31 @@ Alternatively, include FluidSizingCSS directly in your HTML:
9595
- **Full Version**:
9696

9797
```html
98-
<link rel="stylesheet" href="https://unpkg.com/fluidsizingcss@latest/dist/css/fluidsizingcss.min.css">
98+
<link rel="stylesheet" href="https://unpkg.com/fluidsizingcss@latest/dist/fluidsizingcss.min.css">
9999
```
100100

101101
```html
102-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/css/fluidsizingcss.min.css">
102+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/fluidsizingcss.min.css">
103103
```
104104

105105
- **Logical Properties Only**:
106106

107107
```html
108-
<link rel="stylesheet" href="https://unpkg.com/fluidsizingcss@latest/dist/css/fluidsizingcss-logical.min.css">
108+
<link rel="stylesheet" href="https://unpkg.com/fluidsizingcss@latest/dist/fluidsizingcss-logical.min.css">
109109
```
110110

111111
```html
112-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/css/fluidsizingcss-logical.min.css">
112+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/fluidsizingcss-logical.min.css">
113113
```
114114

115115
- **Physical Properties Only**:
116116

117117
```html
118-
<link rel="stylesheet" href="https://unpkg.com/fluidsizingcss@latest/dist/css/fluidsizingcss-physical.min.css">
118+
<link rel="stylesheet" href="https://unpkg.com/fluidsizingcss@latest/dist/fluidsizingcss-physical.min.css">
119119
```
120120

121121
```html
122-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/css/fluidsizingcss-physical.min.css">
122+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/fluidsizingcss-physical.min.css">
123123
```
124124

125125
---

‎build.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,18 @@ const packages = [
2727
},
2828
]
2929

30-
// Ensure the dist/css directory exists
31-
const distDir = 'dist/css';
30+
// Ensure the dist directory exists
31+
const distDir = 'dist';
3232

33-
// Delete all files under dist/css
33+
// Delete all files under dist
3434
if (fs.existsSync(distDir)) {
3535
fs.rmSync(distDir, { recursive: true, force: true });
36-
console.log('Deleted all files under dist/css');
36+
console.log('Deleted all files under dist');
3737
}
3838

39-
// Recreate the dist/css directory
39+
// Recreate the dist directory
4040
fs.mkdirSync(distDir, { recursive: true });
41-
console.log('Created dist/css directory');
41+
console.log('Created dist directory');
4242

4343
function mergeAndMinifyFiles(package) {
4444

@@ -50,15 +50,15 @@ function mergeAndMinifyFiles(package) {
5050
console.log(`Merged files: ${files.join(', ')}`);
5151

5252
// Write the unminified merged file
53-
fs.writeFileSync(`dist/css/${name}.css`, mergedInput, 'utf8');
54-
console.log(`Written unminified merged file: dist/css/modulate.css`);
53+
fs.writeFileSync(`dist/${name}.css`, mergedInput, 'utf8');
54+
console.log(`Written unminified merged file: dist/modulate.css`);
5555

5656
// Minify the merged content
5757
const mergedOutput = csso.minify(mergedInput).css;
5858

5959
// Write the minified merged file
60-
fs.writeFileSync(`dist/css/${name}.min.css`, mergedOutput, 'utf8');
61-
console.log(`Written minified merged file: dist/css/modulate.min.css`);
60+
fs.writeFileSync(`dist/${name}.min.css`, mergedOutput, 'utf8');
61+
console.log(`Written minified merged file: dist/modulate.min.css`);
6262
}
6363

6464
packages.forEach(package => {

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"name": "fluidsizingcss",
3-
"version": "0.0.14",
3+
"version": "0.0.15",
44
"description": "FluidSizingCSS is a pure CSS solution for responsive design, offering fluid sizing locks for seamless scaling across devices. It eliminates the need for external tools, enabling developers to create adaptable, lightweight, and fast interfaces with native CSS. Includes common, logical, and physical fluid properties for comprehensive design flexibility.",
5-
"main": "dist/css/fluidsizingcss.min.css",
6-
"style": "dist/css/fluidsizingcss.min.css",
7-
"browser": "dist/css/fluidsizingcss.min.css",
5+
"main": "dist/fluidsizingcss.min.css",
6+
"style": "dist/fluidsizingcss.min.css",
7+
"browser": "dist/fluidsizingcss.min.css",
88
"sideEffects": false,
99
"files": [
10-
"dist/css/"
10+
"dist/"
1111
],
1212
"scripts": {
1313
"build": "node build.js"
@@ -37,8 +37,8 @@
3737
"csso-cli": "^4.0.2"
3838
},
3939
"exports": {
40-
"./fluidsizingcss": "./dist/css/fluidsizingcss.min.css",
41-
"./fluidsizingcss-logical": "./dist/css/fluidsizingcss-logical.min.css",
42-
"./fluidsizingcss-physical": "./dist/css/fluidsizingcss-physical.min.css"
40+
"./all": "./dist/fluidsizingcss.min.css",
41+
"./logical": "./dist/fluidsizingcss-logical.min.css",
42+
"./physical": "./dist/fluidsizingcss-physical.min.css"
4343
}
4444
}

0 commit comments

Comments
 (0)