Utupress 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 🦄

Design Blocks Builder »

WYSIWYG HTML Editor · Pages · Blog · Download

Quick start
What's included?
Dependencies
Browser support
Bugs and feature requests
Contributing guidelines
Contributors
Copyright and license

Quick start

Download Utupress Design Blocks. There are several ways to start using the Utupress 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/utupress/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>Utupress 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/utupress-design-blocks/2.0.1/css/utupress_blocks.min.css">
  </head>

  <body>
      <!-- Insert HTML for contents. -->
  </body>
</html>

Add design blocks. Once you have the Utupress Design Blocks basic HTML structure in place, start browsing the design blocks that you want to use and copy/paste the HTML for them.

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/
│   │   ├── utupress_blocks.css
│   │   └── utupress_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 (utupress_blocks.css), as well as compiled and minified CSS (utupress_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. Utupress 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.

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 Utupress Design Blocks' development and chat with the project maintainers and community members:

Follow @utupress on Twitter
Read and subscribe to The Official Utupress Blog
Check the Official Website
Join us on Facebook
Google+
Pinterest

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.

Copyright and 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

dedanirungu / blocks