https://github.com/piedweb/bootstrap5-extended

Bootstrap 5 Theme and UI Kit designed to work without Javascript
https://github.com/piedweb/bootstrap5-extended

bootstrap theme uikit

Last synced: 10 days ago
JSON representation

Bootstrap 5 Theme and UI Kit designed to work without Javascript

• Host: GitHub
• URL: https://github.com/piedweb/bootstrap5-extended
• Owner: PiedWeb
• Created: 2020-06-08T16:53:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-03T17:05:09.000Z (almost 4 years ago)
• Last Synced: 2024-10-05T02:06:44.491Z (about 2 months ago)
• Topics: bootstrap, theme, uikit
• Language: SCSS
• Homepage: https://dev.piedweb.com
• Size: 949 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        








    

    

    



# Bootstrap 5 Extended

**Demo** [piedvert.com (Mountain Guide Website in Vercors)](https://piedvert.com)

## Theme and UI Kit functionnal without Javascript

- Bootstrap _working without_ [javascript](src/js/app.js) (except a few enhancement like navbar transparent background before scroll)

- Add few utilities

  - `.bg-{color}` (blue, green, yellow, [etc.](https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss#L46))

  - `.icon-{color}`

  - `.text-{color}`

  - `.a` (text looks like a link), `.link-text` (link looks like text), `.ninja` (link invisible)

  - `.fullwidth`

  - `.container-txt` (default max-width 720px)

  - `.border-transparent` (useful for overriding default form)

  - `.mw-{breakpoint}` (max-width)

- Add few component

  - TinySlider Gallery

  - Inline Gallery

  - Unordered masonry (gallery)

  - Pure CSS Navbar Toggler ([bootstrap issue](https://github.com/twbs/bootstrap/issues/17540))

  - Intro-Sidebar (Right or Left)-Content

## Installation

```

npm i @piedweb/bootstrap5-extended

```

Then see [app.scss](src/scss/app.scss) to import what you need.

## Documentation

#### Usage

See [demo/index.html](demo/index.html) [app.js](src/js/app.js) and [app.css](src/scss/app.scss).

### Bootstrap 5 Navbar toggler without javascript

```

@import 'bs5-extended/component/navbar-css-toggler.scss';

```

Integration:

- Via [PiedWeb/ThemeComponent](https://github.com/PiedWeb/ThemeComponentBundle) for [PiedWeb/CMS](<[https://d](https://github.com/PiedWeb/CMS)>)

## Credits

Inspired by [bootstrap ecosystem](https://getbootstrap.com). Initially built by [Pied Web](https://piedweb.com)