boots

Laravel 4 package allowing to create a style guide separated in components and allowing to define design standards for a website.

Each component is decoupled from the page layout and is defined by:

• HTML markup
• CSS style
• Javascript

Benefits

• Code organisation and modularity
• Quickly create a prototype
• Easy to test in different layouts
• Easy to maintain
• Clients and managers approbation
• Workflow in a team
• Shared vocabulary
• Useful reference
• Separation with the backend
• Documenting each component
• Integrates directly into project
• File based

Features

• Annotation along each component (documentation)
• The components don't need to be used only with the Laravel Blade templating system
• Integration with Grunt
• Tagging system allowing to set a status to a component (ex.: approved, completed, in-progress)
• List visual design

What can we do with it?

• Separate and encapsulate components
• Create a javascript plugin
• Create a page layout containing components

Requirements

• PHP
  • Composer
  • Laravel 4+
• Bower
  • Twitter Bootstrap (not required)
• Grunt (not required)
  • LESS (not required)

Concept

Boots is file based.

Basic component

• app/views/boots/myComponent.blade.php (HTML markup)
• public/js/boots/myComponent.js
• public/css/boots/myComponent.less

Layout containing various components

• app/views/boots/myComponent1.blade.php
• app/views/boots/myComponent2.blade.php
• app/views/boots/pages/myComponent1.blade.php

Document a component

• app/views/boots/myComponent.blade.php
• app/views/boots/docs/myComponent.md

Installation

• Install this package. In composer.json (of the root of your project) add the package:

    {
    	...
    	"require": { 
    		...
    		"CloudRaker/boots": "dev-master"
    	},
    	"repositories": [{
    		"type": "git",
    		"url": "[email protected]:fr6/boots.git"		
    	}],
    	...
    }
  

  $ composer update CloudRaker/boots

  In app/config/app.php

    'providers' => array(
    	...
    	'Cloudraker\Boots\BootsServiceProvider',
    )
  

  $ composer dump-autoload

• Create basic directories

    app/views/boots/
    
    public/css/boots/
    public/js/boots/
  
    public/img/boots/designs/
  
    Note: The "css/boots" and "js/boots" could have been anywhere (see the config file).
  

• Install Twitter Bootstrap in public/bower_components/ (not required)

    $ bower install bootstrap#3.3.1 -S
  

• Publish package assets and configuration files

    $ php artisan asset:publish cloudraker/boots
    $ php artisan config:publish cloudraker/boots
  

Getting started

• If necessary, edit the boots config file (app/config/packages/cloudraker/boots/boots.php).

• Create your first component

    app/views/boots/myComponent.blade.php
    public/js/boots/myComponent.js
    public/css/boots/myComponent.less
  

• Import your component .less file

  In your main LESS file:

    @import "boots/myComponent.less";
  

• Configure Grunt to build your main less file into public/css/index.css:

    grunt.initConfig({
    	less: {
    		production: {
    			options: {
    				paths: ['public/css'],
    				cleancss: true
    			},
    			files: {
    				'public/css/build.min.css': 'public/css/main.less'
    			}			
    		}
    	}
    });
  

  Note: The CSS filename can be changed in the app/config/packages/cloudraker/boots/boots.php file.

• Visit da boooots: /boots

Customization

Component controls

If you want to have button controls or some functionnality that is not included in your component you need to create the files:

	app/views/boots/controls/myComponent.blade.php
	public/js/boots/myComponent-controls.js

Component page overwrite

By default the View used to render a component is:

	vendor/cloudraker/boots/src/views/page.blade.php

If you want to overwrite the component page to customize it just create the files:

	app/views/boots/pages/myComponent.blade.php
	public/js/boots/myComponent-page.js

Exemples

I'm creating a webpage and want to create a footer component

- Create the file app/views/boots/footer.blade.php
- Insert your HTML content

	<ul><li>footer</li></ul>
- Create public/css/boots/footer.less file and import it in your main LESS file

I want to create a page layout containing components

- Create an empty file app/views/boots/myLayout.blade.php
- Create the file app/views/boots/pages/myLayout.blade.php allowing to overwrite the base page of Boots (vendor/cloudraker/boots/src/views/page.blade.php)
- Include a component in the layout:

	@include('boots.footer')

I'm creating a plugin and want to test it outside my website

- Create blade files

	page
	...

I need a javascript tool that will not be in the website but will be usefull

- Create the blade file in your views
- Create the js file

I'm not using Laravel for my project, but I still want to use Boots

- Install Laravel and Boots at the root of your project:

	www/*Drupal files*
	www/laravel/*Laravel files*

- Put your asset and component files outside of Laravel:
	
	www/sites/all/themes/MyDrupalTheme/js/boots/*files*
	www/sites/all/themes/MyDrupalTheme/css/boots/*files*

- In the config file of Boots change the Path to assets:

	'path_assets' => '../../sites/all/themes/MyDrupalTheme/'

I want to easily see my designs

- Create JPG files of your PSD file.
- Put them in public/img/boots/designs/.

Note: The files need to be in JPG format and the extension need to be lowercase (.jpg).