A set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites.
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 🦄
bash git clone https://github.com/froala/design-blocks.git cd design-blocks npm install npm run start
<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.1.3/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/2.0.1/css/froala_blocks.min.css"> <!-- Insert HTML for contents. -->
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
screenshotsfolder, there are the screenshots of all design blocks.
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.
At the moment, we aim to support all major web browsers. Any issue in the browsers listed below should be reported as a bug:
(Current - 1) and Current means that we support the current stable version of the browser and the version that precedes it.
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.
Get updates on Froala Design Blocks' development and chat with the project maintainers and community members:
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.
devbranch 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
distfolder in the
The project needs to be compiled, therefore the files in the
srcfolder are those we'll be developing on. Don't make changes in the
demofolders as they will be overwritten when
git clone [email protected]:froala/design-blocks.git cd design-blocks
npm install npm run start
With the gulp server running, the project is available at the following address localhost:8001. The
srcfiles are automatically compiled when changes have been made.
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
Special thanks to everyone who contributed to getting the Froala Design Blocks to the current state. 🙏
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