Design Blocks

A set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites.
Alternatives To Design Blocks
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Mdb Ui Kit23,82995 days ago45December 04, 202311mitSCSS
Bootstrap 5 & Material Design UI KIT
Design Blocks13,1631153 years ago7December 06, 201828otherHTML
A set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites.
Bootstrap Table11,60324749a day ago44July 06, 2023231mitJavaScript
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Materialdesign10,774
a day ago611other
✒7000+ Material Design Icons from the Community
Material Dashboard10,738962 months ago6May 04, 20238mitSCSS
Material Dashboard - Open Source Bootstrap 5 Material Design Admin
Material Design For Bootstrap9,431
10 months ago6March 26, 202027mitJavaScript
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Material Kit5,8251287 months ago3July 02, 201822mitHTML
Free and Open Source UI Kit for Bootstrap 5, React, Vue.js, React Native and Sketch based on Google's Material Design
Angular Ngrx Material Starter2,653
2 years ago40mitTypeScript
Angular, NgRx, Angular CLI & Angular Material Starter Project
Adminbsbmaterialdesign2,6331433 years ago8October 30, 201884otherJavaScript
AdminBSB - Free admin panel that is based on Bootstrap 3.x with Material Design
Devextreme Reactive2,02813011622 days ago105November 06, 202375otherTypeScript
Business React components for Bootstrap and Material-UI
Alternatives To Design Blocks
Select To Compare


Alternative Project Comparisons
Readme

Froala Design Blocks   Tweet  Slack

Price npm CDNJS GitHub package version License: FOWDL v1.0

Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.

Discuss it on Product Hunt 🦄

Design Blocks Builder »

WYSIWYG HTML Editor · Pages · Blog · Download

Design Blocks

Table of contents

Quick start

  1. Download Froala Design Blocks. There are several ways to start using the Froala Design Blocks depending on how you prefer:
  1. Design Blocks Skeleton. You can use the following code layout as a starting point.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Froala Design Blocks - Skeleton</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/1.0.2/css/froala_blocks.min.css">
      </head>
    
      <body>
          <!-- Insert HTML for contents. -->
      </body>
    </html>    
    
  2. Add design blocks. Once you have the Froala Design Blocks basic HTML structure in place, start browsing the design blocks that you want to use and copy/paste the HTML for them.

Implementations

What's included

Within the download archive you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

design-blocks/
├── dist/
│   ├── css/
│   │   ├── froala_blocks.css
│   │   └── froala_blocks.min.css
│   └── imgs/
│   │── call_to_action.html
│   │── contacts.html
│   │── contents.html
│   │── features.html
│   │── footers.html
│   │── forms.html
│   │── headers.html
│   │── index.html
│   │── pricings.html
│   │── teams.html
│   └── testimonials.html
├── assets/
├── screenshots/
└── src/

We provide compiled CSS (froala_blocks.css), as well as compiled and minified CSS (froala_blocks.min.css). Also, in the downloaded archive you will find useful images and PSD files that you can use to create new backgrounds. In the screenshots folder, there are the screenshots of all design blocks.

Dependencies

  • Bootstrap. Froala Design Blocks is built on Bootstrap 4 library and fully supports it. It uses the Javascript files only for the header design blocks, so if you don't need them, we recommend not to include the Bootstrap JS files in order to reduce your bundle size.

  • Font Awesome. We're using the amazing Font Awesome library for the social network icons.

  • Google Fonts. By default, the Design Blocks toolkit is built using the Roboto font, however that can easily be changed to other fonts.

Categories

Browser Support

At the moment, we aim to support all major web browsers. Any issue in the browsers listed below should be reported as a bug:

  • Internet Explorer 10+
  • Microsoft Edge 14+
  • Safari 6+
  • Firefox (Current - 1) and Current versions
  • Chrome (Current - 1) and Current versions
  • Opera (Current - 1) and Current versions
  • Safari iOS 7.0+
  • Android 6.0+

(Current - 1) and Current means that we support the current stable version of the browser and the version that precedes it.

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Community

Get updates on Froala Design Blocks' development and chat with the project maintainers and community members:

Contributing guidelines

All contributions are more than welcomed. Contributions may close an issue, fix a bug (reported or not reported), add new design blocks, improve the existing code, add new feature, and so on. In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. Read the full Code of Conduct.

The dev branch is the default and base branch for the project. It is used for development and all Pull Requests should go there. Please make sure not to commit the dist folder in the dev branch.

Development

The project needs to be compiled, therefore the files in the src folder are those we'll be developing on. Don't make changes in the dist or demo folders as they will be overwritten when src is compiled.

  1. Get code
git clone [email protected]:froala/design-blocks.git
cd design-blocks
  1. Install dependencies and run project
npm install
npm run start

With the gulp server running, the project is available at the following address localhost:8001. The src files are automatically compiled when changes have been made.

Versioning

Through the development of new versions, we're going use the Semantic Versioning: https://docs.npmjs.com/getting-started/semantic-versioning. Example: 1.0.0.

  • Major release: increment the first digit and reset middle and last digits to zero. Introduces major changes that might break backward compatibility. E.g. 2.0.0
  • Minor release: increment the middle digit and reset last digit to zero. It would fix bugs and also add new features without breaking backward compatibility. E.g. 1.1.0
  • Patch release: increment the third digit. It would fix bugs and keep backward compatibility. E.g. 1.0.1

Contributors

Special thanks to everyone who contributed to getting the Froala Design Blocks to the current state. 🙏

Copyright and license

Code and documentation copyright 2018 Froala Labs. Code released under the Froala Open Web Design License.

Graphics license:

  • shapes: free to use by Creative Tim
  • photos: free under the creative license from Pexels
  • illustrations: free under the creative license from Undraw
  • icons: free under MIT license FeatherIcons
Popular Bootstrap Projects
Popular Material Design Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Html5
Html
Bootstrap
Bootstrap4
Material Design
Designer
Html Template
Bootstrap Theme