Froala Design Blocks
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
Table of contents
- Quick start
- Implementations
- What's included?
- Dependencies
- Categories
- Browser support
- Community
- Bugs and feature requests
- Contributing guidelines
- Contributors
- Copyright and license
Quick start
- Download Froala Design Blocks. There are several ways to start using the Froala Design Blocks depending on how you prefer:
- Use the builder
- Download the latest release and then read the What's included section below.
- Clone the repo and run it.
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.
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
- Call to action - https://github.com/froala/design-blocks/blob/master/dist/call-to-action.html
- Contacts - https://github.com/froala/design-blocks/blob/master/dist/contacts.html
- Contents - https://github.com/froala/design-blocks/blob/master/dist/contents.html
- Features - https://github.com/froala/design-blocks/blob/master/dist/features.html
- Footers - https://github.com/froala/design-blocks/blob/master/dist/footers.html
- Forms - https://github.com/froala/design-blocks/blob/master/dist/forms.html
- Headers - https://github.com/froala/design-blocks/blob/master/dist/headers.html
- Pricings - https://github.com/froala/design-blocks/blob/master/dist/pricings.html
- Teams - https://github.com/froala/design-blocks/blob/master/dist/teams.html
- Testimonials - https://github.com/froala/design-blocks/blob/master/dist/testimonials.html
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:
- Follow @froala on Twitter
- Read and subscribe to The Official Froala Blog
- Check the Official Website
- Join us on Facebook
- Google+
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.
- Get code
git clone git@github.com:froala/design-blocks.git
cd design-blocks
- 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.
- Creative Tim
❤️ - design blocks PSDs, help with typography and SVGs for shapes - Reaction - design blocks Sketches:
- m5o - help with update to Bootstrap 4
- Pexels - photos
- Undraw - illustrations
- FeatherIcons - icons
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
-
仓库：https://github.com/ant-design/ant-design-pro 1.简介 ant-design-pro是企业应用程序的开箱即用 UI 解决方案。 2.初始化 ant-design-pro的初始化由umi完成 npm create umi ? Select the boilerplate type ant-design-pro ? �� Which language
-
实习的时候公司做的项目用到了ant-design-pro 正在学习ing 博客园的一篇文章觉得挺详细的 https://www.cnblogs.com/freely/p/10874297.html ant-design-pro官方的一些脚本命令 npm start 运行这个脚本会启动服务，自动打开默认浏览器展示你的页面。当你重新编辑代码后，页面还会自动刷新。 npm run build 运行这个脚
-
Background Blockchain technology has been evolving very quickly since the introduction of Bitcoin in 2008. Over the past nine years, many Blockchain techniques have been explored to try out various id
-
1. Web MVC Framwork： SpringMVC3.0 Restful 的风格终于回归了MVC框架的简单本质，对比之下 Struts2 概念太复杂更新又太懒了。 Template：JSP2.0 且尽量使用 JSP EL 而不是 taglib，万一要写 taglib 也用纯 JSP 来编写，一向是 SpringSide 的推荐，Freemarker 们始终有点小众, 而Thymeleaf
-
This document describes rationales for WebAssembly’s design decisions, acting as footnotes to the main design text, keeping the main specification easier to read, and making it easier to revisit decis
-
算法是一个逐步的过程，它定义了一组指令，这些指令按特定顺序执行以获得所需的输出。 算法通常独立于底层语言创建，即算法可以用多种编程语言实现。 从数据结构的角度来看，以下是一些重要的算法类别 - Search - 搜索数据结构中的项目的算法。 Sort - Sort特定顺序对项目进行Sort算法。 Insert - 在数据结构中插入项的算法。 Update - 更新数据结构中现有项目的算法。 Del
-
When contributing large changes or features to the Prometheus ecosystem, design documents are written by individuals or groups. Those documents are proposed for review and approval to the community. T