diff --git a/docs/docs/guides/features/configuration.md b/docs/docs/guides/features/configuration.md index 07b80622a..e3c9c45a0 100644 --- a/docs/docs/guides/features/configuration.md +++ b/docs/docs/guides/features/configuration.md @@ -138,10 +138,14 @@ For teams building custom Bulma CSS with their own prefixes: ### 1. Install Dependencies + + ```bash pnpm add bulma sass ``` + + ### 2. Create Custom Sass File ```scss title="src/styles/mycompany-bulma.scss" diff --git a/docs/docs/guides/features/sass-customization.md b/docs/docs/guides/features/sass-customization.md index b12090aef..af2a15f98 100644 --- a/docs/docs/guides/features/sass-customization.md +++ b/docs/docs/guides/features/sass-customization.md @@ -31,21 +31,29 @@ Sass variables feed the generated Bulma CSS — including the values of Bulma's To customize Bulma with Sass variables, you need: + + ```bash pnpm add sass pnpm add bulma ``` + + ## Build Configuration ### Vite Vite is the default toolchain for projects scaffolded by `pnpm create bestax@latest`, and handles Sass out of the box once `sass` is installed: + + ```bash pnpm add sass ``` + + **`src/styles/bulma-custom.scss`:** ```scss @@ -79,10 +87,14 @@ Next.js has built-in Sass support: **Install Sass:** + + ```bash pnpm add sass ``` + + **Custom Sass file (styles/bulma-custom.scss):** ```scss diff --git a/docs/docs/guides/getting-started/alternative-icons.md b/docs/docs/guides/getting-started/alternative-icons.md index b30b3047d..e4ea177f7 100644 --- a/docs/docs/guides/getting-started/alternative-icons.md +++ b/docs/docs/guides/getting-started/alternative-icons.md @@ -20,10 +20,14 @@ Font Awesome is the default icon library — no `library` prop required. **Install:** + + ```bash pnpm add @fortawesome/fontawesome-free ``` + + **Import:** Add this to your main application file (e.g., `main.tsx` or `App.tsx`): @@ -66,10 +70,14 @@ Material Design Icons (MDI) is a comprehensive icon library that follows Google' **Install:** + + ```bash pnpm add @mdi/font ``` + + **Import:** Add this to your main application file (e.g., `main.tsx` or `App.tsx`): @@ -101,10 +109,14 @@ Ionicons is a modern icon library with 1,300+ icons designed specifically for we **Install:** + + ```bash pnpm add ionicons@^8.0.13 ``` + + **Import:** :::info No CSS Import Needed @@ -216,10 +228,14 @@ Google's official Material Icons library provides the core set of Material Desig **Install:** + + ```bash pnpm add material-icons ``` + + **Import:** Add this to your main application file (e.g., `main.tsx` or `App.tsx`): @@ -326,10 +342,14 @@ The newest icon library from Google, offering more comprehensive icon coverage a **Install:** + + ```bash pnpm add material-symbols ``` + + **Import:** Add this to your main application file (e.g., `main.tsx` or `App.tsx`): diff --git a/docs/docs/guides/getting-started/installation.md b/docs/docs/guides/getting-started/installation.md index 2ddf33c03..911d63f96 100644 --- a/docs/docs/guides/getting-started/installation.md +++ b/docs/docs/guides/getting-started/installation.md @@ -56,23 +56,13 @@ The viewport meta tag is **essential** for Bulma's responsive features. Without `pnpm create bestax@latest` installs the package, wires up the CSS, and scaffolds a working app in one step. Only follow the manual steps below if you're adding bestax-bulma to an existing project or using a toolchain the installer doesn't cover. ::: -### Using npm (recommended) + ```bash pnpm add @allxsmith/bestax-bulma ``` -### Using yarn - -```bash -yarn add @allxsmith/bestax-bulma -``` - -### Using pnpm - -```bash -pnpm add @allxsmith/bestax-bulma -``` + ### Version Management @@ -142,10 +132,14 @@ Or if you only need Bulma itself: 1. Install Sass as a dev dependency (Bulma is already installed): + + ```bash pnpm add -D sass ``` + + 2. Create a custom SCSS file: ```scss @@ -177,10 +171,14 @@ bestax-bulma components support multiple icon libraries. Icons are optional but ### Font Awesome (Most Popular) + + ```bash pnpm add @fortawesome/fontawesome-free ``` + + Import in your main file: ```js @@ -191,10 +189,14 @@ Usage: `` or `` ### Material Design Icons + + ```bash pnpm add @mdi/font ``` + + ```js import '@mdi/font/css/materialdesignicons.min.css'; ``` @@ -203,10 +205,14 @@ Usage: `` ### Material Icons (Google) + + ```bash pnpm add material-icons ``` + + ```js import 'material-icons/iconfont/material-icons.css'; ``` @@ -215,10 +221,14 @@ Usage: `` ### Ionicons + + ```bash pnpm add ionicons ``` + + ```js import 'ionicons/dist/css/ionicons.min.css'; ``` @@ -273,10 +283,14 @@ bestax-bulma includes TypeScript definitions. For the best experience: ### Install Type Definitions + + ```bash pnpm add -D typescript @types/react @types/react-dom ``` + + ### TypeScript Configuration Recommended `tsconfig.json` settings: @@ -325,16 +339,24 @@ To analyze your bundle: 1. Install bundle analyzer: + + ```bash pnpm add -D webpack-bundle-analyzer ``` + + 2. Check what's included: + + ```bash pnpm dlx webpack-bundle-analyzer stats.json ``` + + ### Expected Sizes - **bestax-bulma JS**: ~49KB min+gzip for the _entire_ library — with named imports, tree shaking means your app ships only the components it uses. diff --git a/docs/docs/guides/getting-started/migration/bulma-0-9-to-1.md b/docs/docs/guides/getting-started/migration/bulma-0-9-to-1.md index 3b74c2680..5d6792260 100644 --- a/docs/docs/guides/getting-started/migration/bulma-0-9-to-1.md +++ b/docs/docs/guides/getting-started/migration/bulma-0-9-to-1.md @@ -47,7 +47,7 @@ Bulma v1 uses **Dart Sass** instead of the deprecated Node Sass: ```bash # Remove old dependency -npm uninstall node-sass +pnpm remove node-sass # Install modern Sass compiler pnpm add sass diff --git a/docs/docs/guides/getting-started/migration/bulma-ui-3-to-4.md b/docs/docs/guides/getting-started/migration/bulma-ui-3-to-4.md index 519456c55..f3fd51b72 100644 --- a/docs/docs/guides/getting-started/migration/bulma-ui-3-to-4.md +++ b/docs/docs/guides/getting-started/migration/bulma-ui-3-to-4.md @@ -37,10 +37,14 @@ React 16.8 and 17 are no longer supported. The library is built and tested again - ✅ On React 18 or 19 — upgrade with no code changes. Your existing components, props, imports, and CSS all behave exactly as they did in 3.x. - ⚠️ On React 16 or 17 — `pnpm add @allxsmith/bestax-bulma@4` will emit a peer-dependency warning, and some components rely on hooks/behavior that assume a modern React. **Stay on `@3`** until you can upgrade React: + + ```bash pnpm add @allxsmith/bestax-bulma@^3 ``` + + **Why this changed:** dropping the legacy React versions lets the library use modern React idioms (e.g. `useId` for accessible, SSR-safe element IDs) without compatibility shims, and keeps the maintenance surface focused on the versions the ecosystem actually runs. ## Compatibility: React 18 + 19 diff --git a/docs/docs/guides/getting-started/modular.md b/docs/docs/guides/getting-started/modular.md index 63bbe2278..db2549979 100644 --- a/docs/docs/guides/getting-started/modular.md +++ b/docs/docs/guides/getting-started/modular.md @@ -97,10 +97,14 @@ Hand-rolling modular SCSS is worthwhile only when you have a demonstrated CSS-si Install Sass as a dev dependency (Bulma is already installed as a transitive dependency): + + ```bash pnpm add -D sass ``` + + #### Required base styles Before importing component partials, include Bulma's base (CSS reset, generic element styles, keyframes) and themes (CSS custom properties on `:root`): diff --git a/docs/docs/guides/getting-started/optimizing-css.md b/docs/docs/guides/getting-started/optimizing-css.md index 3f2829f5f..bd5f80f1a 100644 --- a/docs/docs/guides/getting-started/optimizing-css.md +++ b/docs/docs/guides/getting-started/optimizing-css.md @@ -46,10 +46,14 @@ The `npm create bestax` scaffold's `--bulma` flag selects a flavor at project cr Most of the remaining weight is selectors your app never renders. An opt-in [PurgeCSS](https://purgecss.com/) step removes them at build time. In a Vite app: + + ```bash -npm install -D @fullhuman/postcss-purgecss +pnpm add -D @fullhuman/postcss-purgecss ``` + + ```js title="postcss.config.js" import purgecss from '@fullhuman/postcss-purgecss'; diff --git a/docs/docs/guides/getting-started/react-setups.md b/docs/docs/guides/getting-started/react-setups.md index c16e302ed..8922917a1 100644 --- a/docs/docs/guides/getting-started/react-setups.md +++ b/docs/docs/guides/getting-started/react-setups.md @@ -26,12 +26,16 @@ Vite is a modern, fast build tool that's become the go-to choice for React appli 1. **Create a new Vite React project:** + + ```bash pnpm create vite@latest my-bulma-vite-app -- --template react cd my-bulma-vite-app pnpm install ``` + + :::info Template Argument Explained - `--template react`: Uses the official React template with JavaScript - Alternative templates: `react-ts` (TypeScript), `react-swc` (with SWC compiler) @@ -44,10 +48,14 @@ Vite is a modern, fast build tool that's become the go-to choice for React appli 2. **Install bestax-bulma and dependencies:** + + ```bash pnpm add @allxsmith/bestax-bulma @fortawesome/fontawesome-free ``` + + 3. **Update your main.jsx file:** ```jsx title="src/main.jsx" @@ -132,10 +140,14 @@ Vite is a modern, fast build tool that's become the go-to choice for React appli 5. **Run your application:** + + ```bash - pnpm dev + pnpm run dev ``` + + :::tip Application Available Your Vite + React + bestax-bulma application will be available at `http://localhost:5173` ::: @@ -144,12 +156,16 @@ Vite is a modern, fast build tool that's become the go-to choice for React appli 1. **Create a new Vite React TypeScript project:** + + ```bash pnpm create vite@latest my-bulma-vite-ts-app -- --template react-ts cd my-bulma-vite-ts-app pnpm install ``` + + :::info Template Argument Explained - `--template react-ts`: Uses the official React template with TypeScript - Includes TypeScript configuration and type definitions out of the box @@ -162,10 +178,14 @@ Vite is a modern, fast build tool that's become the go-to choice for React appli 2. **Install bestax-bulma and dependencies:** + + ```bash pnpm add @allxsmith/bestax-bulma @fortawesome/fontawesome-free ``` + + :::note The `react-ts` template already includes `@types/react` and `@types/react-dom` — no extra type packages needed. ::: @@ -254,10 +274,14 @@ Vite is a modern, fast build tool that's become the go-to choice for React appli 5. **Run your application:** + + ```bash - pnpm dev + pnpm run dev ``` + + :::tip Application Available Your Vite + React + TypeScript + bestax-bulma application will be available at `http://localhost:5173` ::: @@ -272,11 +296,15 @@ Next.js is a popular React framework that provides server-side rendering, static 1. **Create a new Next.js project:** + + ```bash pnpm dlx create-next-app@latest my-bulma-next-app --js --eslint --no-tailwind --src-dir --app --import-alias "@/*" --turbopack cd my-bulma-next-app ``` + + :::info Command Arguments Explained - `--js`: Use JavaScript (not TypeScript) - `--eslint`: Include ESLint for code quality @@ -293,10 +321,14 @@ Next.js is a popular React framework that provides server-side rendering, static 2. **Install bestax-bulma and dependencies:** + + ```bash pnpm add @allxsmith/bestax-bulma @fortawesome/fontawesome-free ``` + + 3. **Update your root layout:** ```jsx title="src/app/layout.js" @@ -385,10 +417,14 @@ Next.js is a popular React framework that provides server-side rendering, static 5. **Run your application:** + + ```bash - pnpm dev + pnpm run dev ``` + + :::tip Application Available Your Next.js + React + bestax-bulma application will be available at `http://localhost:3000` ::: @@ -397,11 +433,15 @@ Next.js is a popular React framework that provides server-side rendering, static 1. **Create a new Next.js TypeScript project:** + + ```bash pnpm dlx create-next-app@latest my-bulma-next-ts-app --ts --eslint --no-tailwind --src-dir --app --import-alias "@/*" --turbopack cd my-bulma-next-ts-app ``` + + :::info Command Arguments Explained - `--ts`: Use TypeScript (not JavaScript) - `--eslint`: Include ESLint for code quality @@ -418,10 +458,14 @@ Next.js is a popular React framework that provides server-side rendering, static 2. **Install bestax-bulma and dependencies:** + + ```bash pnpm add @allxsmith/bestax-bulma @fortawesome/fontawesome-free ``` + + 3. **Update your root layout:** ```tsx title="src/app/layout.tsx" @@ -515,10 +559,14 @@ Next.js is a popular React framework that provides server-side rendering, static 5. **Run your application:** + + ```bash - pnpm dev + pnpm run dev ``` + + :::tip Application Available Your Next.js + TypeScript + bestax-bulma application will be available at `http://localhost:3000` ::: @@ -537,17 +585,25 @@ For Create React App and other legacy bundlers like Webpack 4, the setup process 1. **Create a new CRA project:** + + ```bash pnpm dlx create-react-app my-bulma-cra-app cd my-bulma-cra-app ``` + + 2. **Install bestax-bulma and dependencies:** + + ```bash pnpm add @allxsmith/bestax-bulma @fortawesome/fontawesome-free ``` + + 3. **Update your index.js:** ```jsx title="src/index.js" @@ -639,10 +695,14 @@ For Create React App and other legacy bundlers like Webpack 4, the setup process 5. **Run your application:** + + ```bash - npm start + pnpm run start ``` + + :::tip Application Available Your Create React App + bestax-bulma application will be available at `http://localhost:3000` ::: @@ -651,17 +711,25 @@ For Create React App and other legacy bundlers like Webpack 4, the setup process 1. **Create a new CRA TypeScript project:** + + ```bash pnpm dlx create-react-app my-bulma-cra-ts-app --template typescript cd my-bulma-cra-ts-app ``` + + 2. **Install bestax-bulma and dependencies:** + + ```bash pnpm add @allxsmith/bestax-bulma @fortawesome/fontawesome-free ``` + + 3. **Update your index.tsx:** ```tsx title="src/index.tsx" @@ -755,10 +823,14 @@ For Create React App and other legacy bundlers like Webpack 4, the setup process 5. **Run your application:** + + ```bash - npm start + pnpm run start ``` + + :::tip Application Available Your Create React App + TypeScript + bestax-bulma application will be available at `http://localhost:3000` ::: @@ -819,10 +891,14 @@ import '@fortawesome/fontawesome-free/css/all.min.css'; **Solution**: Ensure you have the latest TypeScript version and proper type declarations: + + ```bash pnpm add -D typescript @types/react @types/react-dom ``` + + ### Tree Shaking Issues **Problem**: Large bundle size when importing bestax-bulma. diff --git a/docs/docs/guides/getting-started/variations.md b/docs/docs/guides/getting-started/variations.md index 925d12613..9e24338d7 100644 --- a/docs/docs/guides/getting-started/variations.md +++ b/docs/docs/guides/getting-started/variations.md @@ -205,10 +205,14 @@ For teams that want a custom class prefix matching their brand or organization. 1. **Install dependencies:** + + ```bash pnpm add bulma sass ``` + + 2. **Create a custom SCSS file:** ```scss title="src/styles/mycompany-bestax.scss" diff --git a/docs/docs/guides/intro.md b/docs/docs/guides/intro.md index 07848c327..f352c00e1 100644 --- a/docs/docs/guides/intro.md +++ b/docs/docs/guides/intro.md @@ -10,13 +10,17 @@ sidebar_position: 1 The fastest way to get started. The scaffolder sets up a Vite + React project with bestax-bulma and CSS pre-configured: + + ```bash pnpm create bestax@latest my-bestax-app cd my-bestax-app pnpm install -pnpm dev +pnpm run dev ``` + + :::info CSS is included automatically The scaffolder configures `bestax.css` for you — a single stylesheet that includes both Bulma and all bestax extras. No manual CSS setup needed. ::: @@ -94,10 +98,14 @@ export default App; ## Run Your App + + ```bash -pnpm dev +pnpm run dev ``` + + Visit http://localhost:5173 to see your app running. --- diff --git a/docs/docs/intro.md b/docs/docs/intro.md index e50102f8a..ac8f933bf 100644 --- a/docs/docs/intro.md +++ b/docs/docs/intro.md @@ -10,11 +10,15 @@ For detailed installation options, framework-specific guides, or troubleshooting ## 1. Run the Installer + + ```bash pnpm create bestax@latest my-bestax-app cd my-bestax-app ``` + + The installer walks you through a few prompts and sets up everything for you: - **Framework** — Vite (JavaScript) or Vite + TypeScript @@ -60,10 +64,14 @@ export default App; ## 3. Run Your App + + ```bash -pnpm dev +pnpm run dev ``` + + **That's it!** Visit http://localhost:5173 to see your app running. ---