Getting Started

Jul 25 2021- POSTED BY projecth 0 Comment

Bootstrap Project Structure:

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──content/
│      └── docs/
│          └── 5.0/
│              └── examples/
├── js/
└── scss/

Styles

Sass uses Dart Sass to compile scss source files.
In your custom.scss, we encourage picking only the parts you need of Bootstrap.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Accessibility

Bootstrap 5 introduces better color contrast, visually hidden content, and reduced motion.

RTL

<!doctype html>
<html lang="ar" dir="rtl">
  <!-- ... -->
</html>

Because RTL is introduced, left and right are being treated differently in Bootstrap5:
left is now start
l is now s

right is now end
r is now e

Examples
Previously: border-right, ml-5
Now: border-end, ms-5

Bootstrap Icons

Bootstrap Icons is a growing library of SVG icons that are designed by @mdo and maintained by the Bootstrap Team.
https://icons.getbootstrap.com/

Color

13 Colors with 9 shades for each color –shades from 100 to 900– except for black and white (e.g. $blue-200), where 500 is the base to the colors.

$colors: (
  "blue":       $blue-500,
  "indigo":     $indigo-500,
  "purple":     $purple-500,
  "pink":       $pink-500,
  "red":        $red-500,
  "orange":     $orange-500,
  "yellow":     $yellow-500,
  "green":      $green-500,
  "teal":       $teal-500,
  "cyan":       $cyan-500,
  "gray":       $gray-500,
  "white":      $white,
  "black":      $black,
);

Example:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

CSS Variables

Example

body { font: 1rem/1.5 var(--bs-font-sans-serif); }
a { color: var(--bs-blue); }

Root Variables

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

Nonblocking Files

You can improve First Contentful Paint metrics by deferring non-critical JavaScript or CSS. Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with async or defer attributes. On the other hand, critical resources can be included as inline scripts or styles.

If you want to learn more about this, there are already a lot of great articles about it:
https://web.dev/render-blocking-resources/
https://web.dev/defer-non-critical-css/

Also, consider using PurgeCSS to handle unused CSS.