/solid-design-system

A design system for web development with Bootstrap 4, inspired by material design.

Primary LanguageCSSMIT LicenseMIT

Product thumbnail

Solid design system is a feature-complete design system, inspired by Google's Material Design and powered by Bootstrap 4. It features a ton of custom-styled components, handcrafted sections and beautiful ready-to-go example pages. Solid builds upon and extends Bootstrap with plugins such as a date & time picker, parallax, lightbox, carousels, tags, icons from Font Awesome, and more. Bootstrap and these plugins have all been styled according to the design language of Solid, and this combination of components and design forms the Solid design system.

Besides a beautiful design and a ton of components, Solid feautures a powerful build workflow, powered by GulpJS. This enables you to write stylesheets with SASS CSS (SCSS) and provides concatenated and minified CSS, JavaScript and even images, to make your project as fast as possible for the end user. All features of Solid are extensively documented.

Components

Solid features all of the standard Bootstrap 4 components and syntax, and more. Therefore, you can use your existing knowledge of Bootstrap. Use components such as butons, alerts, cards, dropdowns, navbars, navs, progress, and much more.

Useful extensions have been included, such as flippable cards, a navbar that changes style on scrolling, and more.

Plugins

Solid extends the basic Bootstrap components and features with a variety of plugins. These include tags, selects, carousels, lightboxes, parallax and more, which are part of the PRO version of Solid, but also features such as smooth scrolling and Font Awesome, which are included in the standard version of Solid.

Handcrafted sections

Solid design system PRO includes more than 34 prebuilt, handcrafted sections which can be used to build your project. Sections include showcases for features, your team, projects, pricing, contact information, and much more.

Beautiful example pages

A handful of example pages is provided in Solid design system PRO to kickstart your project. Pages include a landing page, login page, error pages, blog list, blog article, a pricing page and more.

Standard & PRO version

Solid design system comes in two variants, a standard version and a PRO version. The standard version includes a lot of components and functionality, with a beautiful design. The PRO version extends upon this and offers much more components, plugins, sections, example pages and other functionality, along with premium support.

Demo & documentation

Installation

Resources

Reporting issues

We use GitHub Issues as the official bug tracker for the Solid design system. When reporting an issue, please follow the following guidelines:

  1. Make sure that you are using the latest version of Solid.
  2. Provide us with reproducible steps for recreating the issue, in order for us to find the issue and fix is as soon as possible.
  3. Specify your browser and version of Solid.

Licensing

Useful links

Social media