themesberg/pixel-bootstrap-ui-kit

Pixel UI Kit - Free and open source Bootstrap 5 UI Kit without jQuery

Pixel Bootstrap 5 UI Kit

Pixel is a free, fully responsive, modern Bootstrap UI Kit that will help you build creative and professional websites. Use our components and sections, switch some Sass variables to build and arrange pages to best suit your needs.

Premium components

Pixel is a premium extension of the famous Bootstrap CSS Framework featuring pricing cards, profile cards, timelines and many more and additional plugins for datepickers and input sliders which Bootstrap does not have by default.

Check out all components here.

Example pages

Pixel comes with 5 example pages that we created to show you the beautiful user interfaces that can be created including a pricing, contact, login and register page.

Full documentation

Each component, plugin and the general workflow is well documented. Check out the online documentation for Pixel.

Workflow

This product is built using the following widely used technologies:

• Most popular CSS Framework Bootstrap
• Productive workflow tool Gulp
• Awesome CSS preprocessor Sass

Table of Contents

• Demo
• Quick Start
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Demo

Components	About	Contact	Freelancer

Contact	Login	Register	Documentation

• Live Preview
• Details

Quick start

1. Download from Themesberg
2. Download the project's zip
3. Make sure you have Node locally installed.
4. Download Gulp Command Line Interface to be able to use gulp in your Terminal.

npm install gulp-cli -g

5. After installing Gulp, run npm install in the main pixel/ folder to download all the project dependencies. You'll find them in the node_modules/ folder.

npm install

6. Run gulp in the pixel/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.

gulp

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you'd like to get a version of our theme without Sass, Gulp or Npm, we've got you covered. Run the following command:

gulp build:dev

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you'd like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist

This will generate a folder dist which will have minified CSS, Html and Javascript.

Documentation

The documentation for Pixel Bootstrap UI Kit is hosted on our website.

File Structure

Within the download you'll find the following directories and files:

Pixel Bootstrap UI Kit
.
├── LICENSE
├── README.md
├── dist
│   ├── assets
│   ├── css
│   ├── html
│   ├── index.html
│   └── vendor
├── gulpfile.js
├── html&css
│   ├── assets
│   ├── css
│   ├── html
│   ├── index.html
│   └── vendor
├── package-lock.json
├── package.json
└── src
    ├── assets
    ├── html
    ├── index.html
    ├── partials
    └── scss

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Demo: https://demo.themesberg.com/pixel-bootstrap-5-ui-kit/index.html
• Download Page: https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit?ref=github-pixel-lite-bootstrap
• Documentation: https://themesberg.com/docs/pixel-bootstrap/getting-started/overview?ref=github-pixel-lite-bootstrap
• License Agreement: https://themesberg.com/licensing?ref=github-pixel-lite-bootstrap
• Support: https://themesberg.com/contact?ref=github-pixel-lite-bootstrap
• Issues: Github Issues Page

Reporting Issues

We use GitHub Issues as the official bug tracker for Pixel Pro Bootstrap UI Kit. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of Pixel Pro Bootstrap UI Kit. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2020 Themesberg (Crafty Dwarf LLC) (https://themesberg.com)
• Themesberg license (MIT License)

Useful Links

• More themes from Themesberg
• Free themes from Themesberg
• Bootstrap Themes, Templates & UI Kits from Themesberg
• Affiliate Program

Social Media

Twitter: https://twitter.com/themesberg

Facebook: https://www.facebook.com/themesberg/

Dribbble: https://dribbble.com/themesberg

Instagram: https://www.instagram.com/themesberg/

pixel-bootstrap-ui-kit's Issues

frontPagesDropdown

Describe the bug
The menu is not displayed correctly

Screenshots

Desktop:

• OS: Windows 7
• Browser chrome

Invisible navbar on contact page

I noticed strange behaviour of UI on a contact page. Attach screen recording below 👇

Corrupt DNS

themesberg.com and all subdomains cannot be resolved.

I don't know if it's just me or for everyone.

Submenu for dashboard

We love the layout of the dashboard (e.g. this demo) but we are having trouble adding submenus to the left panel. More specifically, we have many settings and would like to divide them into multiple pages. Ideally,

1. The '>' symbol after "settings" should be "+" (or something else that is indicative of submenu)
2. Clicking the menu would expand the submenu and "+" should rotate similar to what accordion does.

It would be really helpful if you could give me a short piece of code to demonstrate the addition and expansion of submenus.

Thanks,

Navbar dropdown menu resize bug

Describe the bug
When resizing to smaller browser width and going back to full width, navbar dropdown menu is broken

To Reproduce
Steps to reproduce the behavior:

1. Open home page
2. Resize browser to a size where nav-menu items collapse
3. Click on hamburger-menu item to open dropdown menu
4. With dropdown-menu open, resize browser back to full width
5. All menu items are now expanded and there is no way (apart from refreshing the page) to get rid of the dropped down menus

Expected behavior
Same dropdown functionality as before resizing browser.

Screenshots

Keyboard usage accessibility

Some components don't behave well when using only the keyboard. Known issues are:

• bootstrap carousel focus state is not clear enough
• checkboxes
• radio buttons & tabindex
• better focus on "x" for modals and toasts
• sliders don't work using the keyboard only

WCAG color contrast issues

As there are some color contrast issues we will consider changing the color palette to comply with WCAG standards

dropdown-menu flashes and causes layout shift while loading

Describe the bug
When a page with dropdown page is loaded, the dropdown menu displays and hides quickly. The effect is clear on a slow machine and can be captured as follows, but not visible while loading index.html of the theme, likely because the pure-html page loads fast. The "flash" is confirmed to be from the drodown-menu and causes "layout shift" warnings.

To Reproduce
Cannot really reproduce with the theme headers, especially with the slow preloading block.

Expected behavior
No flash of menu while loading headers.

Screenshots

Desktop (please complete the following information):

• OS: mac osx
• Browser: chrome
• Version: 103.0.5060.53

Additional context

Further debugging shows that dropdown-menu uses opacity:0 without display: none. Adding display: none and display: block to .dropdown-menu.show seems to solve the problem.

@include media-breakpoint-up(lg) {
     .navbar-nav{
.dropdown-menu {
            opacity       : 0;
            pointer-events: none;
            margin        : 0;
            border-radius : $dropdown-border-radius;
        }

add stylelint

Lack of Sass source files

For the next version it would be appropriate to include the Sass source files.

Navbar menu items disappear on light theme

Hi, I am making an html file out of the app-landing.html file. While browsing within the web with this html, the menu bar disappears in scrolled down positions.

I leave here a video... https://www.dropbox.com/s/otz0omkx3vv8nzj/Scroll%20down%20pixel.MP4?dl=0

Someone knows a workaround?

Many thanks in advance!!

Accordion Won't Collapse

Describe the bug
This is rather an unusual post perhaps, I know from the online documentation the accordion working out just fine. But in my local instance, once I've downloaded the Zip file and managed to run the gulp build:dev, the output files in the html&css folder (the unminified version), and browse to the Accordion section, the Accordion don't work, they don't collapse basically. Similarly, if I ran the gulp build:dist, and check the dist folder, the similar occurrence is happening.

To Reproduce
Steps to reproduce the behavior:

1. Go to the pixel folder.
2. Run the gulp build:dev or the gulp build:dist
3. Check the output in the appropriate folders.
4. The accordion effect don't work.

Expected behavior
It should work similar to the online version, the accordion should be collapsible much like the online version.

Screenshots

• here's the exported folder link: https://drive.google.com/drive/folders/1gMBsS8tJfahr0gxZmQl6WZo7SZiFSwKI?usp=sharing
• here's the screencap https://drive.google.com/file/d/1gtdvz6yn8vrVXy5ydibCib19jM-L3DbC/view?usp=sharing

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version Version 83.0.4103.116 (Official Build) (64-bit)

Encountered an error while trying to build the Gulp

Describe the bug
While trying to run the Gulp command, encountered the following error:

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
Referenced from: /Volumes/DATA/Gulp/pixel-lite/node_modules/fsevents/build/Release/fse.node
Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
Referenced from: /Volumes/DATA/Gulp/pixel-lite/node_modules/fsevents/build/Release/fse.node
Expected in: flat namespace

To Reproduce
Steps to reproduce the behavior:

1. Go to project folder, the pixel-lite'
2. Click on 'run the Gulp command.'
3. See error

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
Referenced from: /Volumes/DATA/Gulp/pixel-lite/node_modules/fsevents/build/Release/fse.node
Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
Referenced from: /Volumes/DATA/Gulp/pixel-lite/node_modules/fsevents/build/Release/fse.node
Expected in: flat namespace

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
See screenshot
https://drive.google.com/file/d/1IawULbnlMS1pcA3dCjkwExnPpSaNDDQz/view?usp=sharing

Desktop (please complete the following information):

• OS: MacOS Mojave
• Browser Chrome

Popover - only works on mobile browsers.

Copy and Paste your example, does not work on desktop
I copied your example for POPOVER to your example of sign-up.html - however, it only displays on my droid device not my Mac Safari desktop.

To Reproduce
See failure in action: http://www.hangoutsite.com/new.html

Screenshots

• Actually impossible to show something "not working" - try link above, maybe I pasted popover in the wrong place?

Desktop (please complete the following information):

• OS: 10.14.6
• Browser Safari
• Version 14.1.2 (14611.3.10.1.7)

Smartphone (please complete the following information):

• Device: Samsung Z Fold 4 (unfolded and folded, both work - eliminating resolution as the issue to work/not work).
• OS: Latest
• Browser Mobile Chrome

Additional context
View my pages source, I think I am either missing a module, or placed the popover in the wrong place.

installation problem

during installation, the node_modules folder is not created when running "npm install", so the "gulp" command file(s) are not generated.

Thanks for your help,
Ken

Add htmllint

Add a htmllint to validate html again w3c

Animation speed of preloader

Hello,

your preloader is very beautiful, but it's a bit slow, and I'd like to speed it up. However, I am completely baffled and clueless when I look at the SVG source. What determines the speed at which those <rect>'s are being drawn? How could I speed this up?

Thanks!
-m

Accessibility issues

There are still quite a few issues according to these metrics:

https://wave.webaim.org/report#/https://demo.themesberg.com/pixel-lite/index.html 9
https://try.powermapper.com/demo/Report/e60c4392-1c82-4f9c-b8dc-6adf5e5beb5f 4
https://achecker.ca/checker/index.php 3

Next update will solve every single one of them to make it AAA compliant.