@muume/froala-design-blocks
Advanced tools
An amazing collection of over 170 ready to use design blocks based on Bootstrap.
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 🦄
WYSIWYG HTML Editor · Pages · Blog · Download
git clone https://github.com/froala/design-blocks.git
cd design-blocks
npm install
npm run start
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.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"
/>
</head>
<body>
<!-- Insert HTML for contents. -->
</body>
</html>
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.
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.
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.
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.
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.
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.
git clone git@github.com: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 src files 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.
Special thanks to everyone who contributed to getting the Froala Design Blocks to the current state. 🙏
Code and documentation copyright 2018 Froala Labs. Code released under the Froala Open Web Design License.
Graphics license:
To publish you need to be added in
@muumeorganization team on npm
From the start you have to login in npm registry
yarn login
Pull all upstream changes. Make sure you have all changes.
# if not using fork
git pull origin main --rebase
# if using fork
git pull upstream main --rebase
Run yarn dist this will build and compile all asset (e.g. images, css, html)
Regenerate blocks screenshots. Run yarn start.
With started server, run yarn screenshots, wait till if finishes.
Execute yarn publish. Will ask a version.
Take a look at version in package.json.
Type in yarn prompt the version accordingly semver.
This will publish a new version, and will automatically change version in package.json and will create a new tag.
Execute below command. This will push created commit and tag.
# if not using fork
git push origin main --follow-tags
# if using fork
git push upstream main --follow-tags # pushes to original repository
git push origin main --follow-tags # pushes to your fork
Now you have to go in site-builder project and execute yarn blocks-upgrade.
This will upgrade to last fixed version of blocks.
FAQs
An amazing collection of over 170 ready to use design blocks based on Bootstrap.
The npm package @muume/froala-design-blocks receives a total of 0 weekly downloads. As such, @muume/froala-design-blocks popularity was classified as not popular.
We found that @muume/froala-design-blocks demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.