diff --git a/.cspell.json b/.cspell.json index 24e66e7..b3b4228 100644 --- a/.cspell.json +++ b/.cspell.json @@ -163,6 +163,7 @@ "topbar", "touchend", "Trimble", + "trimbleinc", "twbs", "unitless", "Unported", diff --git a/package.json b/package.json index 1c60aa1..a1c754a 100644 --- a/package.json +++ b/package.json @@ -106,5 +106,8 @@ ], "hugo-bin": { "buildTags": "extended" + }, + "volta":{ + "node": "18.20.4" } } diff --git a/site/content/docs/v2/getting-started/contribute.md b/site/content/docs/v2/getting-started/contribute.md index 3d3a12e..9e1cdeb 100644 --- a/site/content/docs/v2/getting-started/contribute.md +++ b/site/content/docs/v2/getting-started/contribute.md @@ -1,7 +1,7 @@ --- layout: docs title: Contribute -description: Help develop Bootstrap with our documentation build scripts and tests. +description: Help develop Modus Bootstrap with our documentation build scripts and tests. group: getting-started toc: true aliases: "/docs/v2/getting-started/build-tools/" @@ -9,12 +9,12 @@ aliases: "/docs/v2/getting-started/build-tools/" ## Tooling setup -Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) to build the documentation and compile source files. Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) houses these scripts for compiling code, running tests, and more. These aren't intended for use outside our repository and documentation. +Modus Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) to build the documentation and compile source files. Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) houses these scripts for compiling code, running tests, and more. These aren't intended for use outside our repository and documentation. -To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock: +To use our build system and run our documentation locally, you'll need a copy of Modus Bootstrap's source files and Node. Follow these steps and you should be ready to rock: 1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies. -2. Either [download Bootstrap's sources]({{< param "download.source" >}}) or fork and clone [Bootstrap's repository]({{< param repo >}}). +2. Either [download Modus Bootstrap's sources]({{< param "download.source" >}}) or fork and clone [Modus Bootstrap's repository]({{< param repo >}}). 3. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json). When completed, you'll be able to run the various commands provided from the command line. @@ -38,13 +38,13 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag ## Sass -Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). +Modus Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass/) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated/). Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding. ## Autoprefixer -Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. +Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins. We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details. @@ -53,7 +53,7 @@ We maintain the list of browsers supported through Autoprefixer in a separate fi Running our documentation locally requires the use of Hugo, which gets installed via the [hugo-bin](https://www.npmjs.com/package/hugo-bin) npm package. Hugo is a blazingly fast and quite extensible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here's how to get it started: 1. Run through the [tooling setup](#tooling-setup) above to install all dependencies. -2. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line. +2. From the root `/modus-bootstrap` directory, run `npm run docs-serve` in the command line. 3. Open `http://localhost:9001/` in your browser, and voilà. Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/). diff --git a/site/content/docs/v2/getting-started/upgrading.md b/site/content/docs/v2/getting-started/upgrading.md index ebb5463..5fa2141 100644 --- a/site/content/docs/v2/getting-started/upgrading.md +++ b/site/content/docs/v2/getting-started/upgrading.md @@ -6,18 +6,21 @@ group: getting-started aliases: - "/docs/v2/migrating/" toc: true -sitemap: - disabled: true --- -## Get Started +## Steps -There is a command-line script designed to help you upgrade your Modus Bootstrap 1 (Bootstrap 4) projects to Modus Bootstrap 2 (Bootstrap 5). It uses gulp with gulp-replace to replace class names within your folder of HTML pages/templates and it can save a lot of time. +1. There is a [command-line script](https://github.com/coliff/bootstrap-5-migrate-tool#readme) designed to help you upgrade your Modus Bootstrap 1 (based on Bootstrap 4) projects to Modus Bootstrap 2 (based on Bootstrap 5). It uses gulp with gulp-replace to replace class names within your folder of HTML pages/templates and it can save a lot of time. -- https://github.com/coliff/bootstrap-5-migrate-tool +2. Check your JavaScript/TypeScript files don't use deprecated/renamed classes and update as necessary as the command-line script in the step above is only really for HTML-like templates. -## Print Styles +3. Update any of the CSS imports on your project to remove any `@trimbleinc/bootstrap` imports and instead just use a single import which includes light mode, dark mode, modus-layout and everything else you need.: +```sass +@import '../node_modules/@trimble-oss/modus-bootstrap/dist/css/modus-bootstrap.min.css';` +``` -Modus Bootstrap doesn't include Print styles, though you can use the bootstrap-print-css from npm. +## Post Migration tips -- https://www.npmjs.com/package/bootstrap-print-css +- Modus Bootstrap doesn't include Print styles, though you can use [bootstrap-print-css](https://www.npmjs.com/package/bootstrap-print-css) from npm. +- Remember that there is a new XXL breakpoint so be sure to make use of it and optimize layouts[ for screens larger than 1440px](https://modus-bootstrap.trimble.com/docs/v2/layout/breakpoints/). +- There is a [helpful browser extension](https://github.com/julien-deramond/bootstrap-deprecated-classes-extension) which can be used for finding any deprecated classes on your site. diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 85b6ba5..e398724 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -15,6 +15,7 @@ # - title: Vite - title: Accessibility - title: RFS + - title: Upgrading # - title: RTL # - title: Contribute diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html index cfefa25..e0d6e9d 100644 --- a/site/layouts/partials/home/masthead.html +++ b/site/layouts/partials/home/masthead.html @@ -6,9 +6,9 @@

Build fast, responsive sites with Modus Bootstrap

-

- Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end - open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt +

+ Quickly design and customize responsive mobile-first sites with Modus Bootstrap, featuring + Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

@@ -18,12 +18,12 @@

Build fast, responsive sites with Modus Boots Download

-

+

Currently v{{ .Site.Params.current_version }} · v1.x docs

-

+

This site is powered by Netlify