Skip to content

Commit

Permalink
Docs updates
Browse files Browse the repository at this point in the history
  • Loading branch information
coliff committed Oct 4, 2024
1 parent 938826d commit 656ceac
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 20 deletions.
1 change: 1 addition & 0 deletions .cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@
"topbar",
"touchend",
"Trimble",
"trimbleinc",
"twbs",
"unitless",
"Unported",
Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -106,5 +106,8 @@
],
"hugo-bin": {
"buildTags": "extended"
},
"volta":{
"node": "18.20.4"
}
}
14 changes: 7 additions & 7 deletions site/content/docs/v2/getting-started/contribute.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
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/"
---

## 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.
Expand All @@ -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.

Expand All @@ -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/).
Expand Down
19 changes: 11 additions & 8 deletions site/content/docs/v2/getting-started/upgrading.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
1 change: 1 addition & 0 deletions site/data/sidebar.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
# - title: Vite
- title: Accessibility
- title: RFS
- title: Upgrading
# - title: RTL
# - title: Contribute

Expand Down
10 changes: 5 additions & 5 deletions site/layouts/partials/home/masthead.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
</div>
<div class="col-md-8 order-md-1 col-lg-7 text-center text-md-start">
<h1 class="display-2 fw-bold mb-3">Build fast, responsive sites with Modus Bootstrap</h1>
<p class="mb-4">
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
<p class="mb-4 lead">
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.
</p>

Expand All @@ -18,12 +18,12 @@ <h1 class="display-2 fw-bold mb-3">Build fast, responsive sites with Modus Boots
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/"
class="btn btn-lg btn-outline-secondary mb-3">Download</a>
</div>
<p class="text-muted">
<p class="opacity-75">
Currently <strong>v{{ .Site.Params.current_version }}</strong>
<span class="px-1">&middot;</span>
<a href="/docs/v1/" class="link-secondary">v1.x docs</a>
</p>
<p class="text-muted">
<p class="opacity-75">
This site is powered by <a href="https://netlify.com/" target="_blank" rel="noopener">
Netlify
</a>
Expand Down

0 comments on commit 656ceac

Please sign in to comment.