Develop Schema-compliant PHP websites quickly with Blockify

Blockify is an open source framework that lets you develop websites using self-contained , reusable ‘blocks’ of PHP, Javascript and CSS, saving you development time.

Download Blockify v0.1.2 Getting Started
  • Built with Bootstrap
  • Integrates with your CMS of choice
  • Supports LESS, SASS and CoffeeScript with Grunt
  • Ideal for full stack developers, freelancers and small agencies
  • Get Blockify up and running in about 7 minutes

How it works

1
        // Load Blockify framework
        require 'blockify/load.php';

        // Use block
        block('google-map', [
          "@type"     => "GeoCoordinates",
          "latitude"  => "51.492140",
          "longitude" => "-0.193028"
        ]);
        
2
        // Block Arguments
        block($name, $data, $options, $container);

Using Blockify blocks in your project is super easy as there’s only one function to learn -- block().

1. Call your block by referencing its name, then pass data into your block as an array

2. Blocks take four arguments; the name of the block, the data that you're passing into your block, any options that block might have and whether to include the Bootstrap container class or not 

3
        // my-block.php

        $block->open();

        $block->document->tag('img', 'image');
        $block->document->tag('h1', 'name');
        $block->document->tag('p', 'description');

        $block->close();
        
4
    // block.json

    {
      "name": "my-block",
      "description": "foo bar",
      "template": {
        "@type": "Thing"
      }
    }
    
5
    /* block.less
     * Blocks are automatically
     * given ids that match their
     * 'name' for greater
     * encapsulation.
     */
    #my-block {
        /*  ... */
    }

Blocks are self-contained HTML, PHP, CSS and Javascript.

Easily reusable

3. Code your block with the everything that it needs to function and you’ll never touch it again. Leave the project-specific stuff to external stylesheets and Javascript like you would normally.

Schema baked in

4. Easily integrate valid Schema.org structured data markup into your page just by referencing what data your block can contain.

LESS, SASS, Coffeescript via Grunt

5. Work the way you want with integrated build scripts to support your favorite preprocessors.

6
        $ npm install -g blockify
        $ blockify install header-simple
        
7
        $ blockify init
        $ blockify register my-block git://github.com/yourname/my-block.git

Use your code across your projects

6. Use the Block Manager and install free blocks from the Blockify registry (powered by Bower).

7. Publish your own blocks to the registry and quickly deploy them to your new projects.

Bye bye copy/paste.

Getting started with Blockify is easy

We’ll get you up and running with Blockify in under 30 minutes. If you’re completely new to things like the command line then start here:

Getting Started with Blockify Watch the videos

The quickest way by far to get started with Blockify is using git and NPM.


        $ mkdir my-project && cd my-project
        $ git clone https://github.com/blockify/blockify.git
        $ npm install -g blockify

What are blocks?

Think of blocks as web components with back-end capabilities, that can be easily integrated into your website and combined with each-other, allowing you to quickly develop awesome websites.

How are they used?

The blocks themselves are called in with a single line of PHP and are configurable with plenty of options to help get the look and feel you're going for. Content can be added by passing data into the block manually, or automatically from your favorite CMS.

How can it help me?

When using Blockify, your content is marked up with schema.org microdata, allowing search engines to identify how your site is structured which improves the display of your search results. Also, Blockify nicely integrates with the Bootstrap framework for a completely responsive design with minimal effort.

Using blocks

Rapid website development.

Blockify provies a comprehensive set of blocks to get you started right out of the box. You can use these blocks to build full web pages in minutes, giving you time to work on the fun, bespoke features that matter.

Creating blocks

Become a block engineer

Dive into Blockify and build your own powerful, reusable blocks. Encapsulate the resources for the block into a simple package and easily use it in any project.

Share and sell

Open for business

Want to do more with the blocks you build? Share it at the office, give it to a friend or even sell it! Blocks are easy to move between workstations and projects.

Integration

Blockify plays well with others

For a perfect combo, use Blockify with your favorite CMS. Use Blockify's helper functions to get data from your CMS into the correct structure ready to be sent into a block.

Open Source

Blockify is an open source project and is available on GitHub, licensed under the GNU General Public License v3.

Powered by schema.org

Blockify uses JSON-LD with the schema.org vocabulary to structure data, this creates a smooth experience when working between different blocks and helps block engineers markup their blocks with microdata.

Preprocessors

In addition to vanilla CSS and JS, Blockify includes support for the popular preprocessors, LESS, SASS and CoffeeScript with the use of Grunt.

Bootstrap

Blockify works great when mixed with Bootstrap. Although Blockify uses Bootstrap in the documentation and starter blocks, you don't have to use it in your project.