- Mozilla ‘BRICKS‘ is a Web Component Framework For Mobile Devices.
- This Framework is based on X-TAG.
- X-TAG is based on the POLYMER Project for W3C Web Component PolyFils.
- For more details on X-Tag, you can use the below link:-
- In This Demo, “We will see Some of the BRICK’S custom component use like calendar, tooltip and layout”.
- During the Writing of this post Brick is in Beta version(1.0Beta8). Bricks can be downloaded From the below link:-
http://mozilla.github.io/brick/download.html
- In This Demo We have used the above said version and created a directory (BrickFrameworkUse) structure as below for the demo,
- The use of this files are as below:-
–Downloaded packaged Brick’s has below files :-
—brick-1.0beta8.min.js : Brick JavaScript library .
—brick-1.0beta8.min.css : Brick CSS classes.
—OpenSans-SemiBold.ttf: Brick’s Default Font Style.
–Other Files are Demo purpose:-
—bootstrap.responsive.min.css : Bootstrap layout style.
—bootstrap.min.css : Bootstrap Component style.
—my-brick-script.js : For writing our demo related script
—my-brick-style.css: For writing our demo related style.
—brick-component-markup.html:Markup For Demo.
- The below is the HTML markup we have used in brick-component-markup.html file,
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.responsive.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="brick-1.0beta8.min.css"/>
<link rel="stylesheet" href="my-brick-style.css"/>
</head>
<body>
<x-layout>
<header>
My Small Tutorial: Brick's Web Component Use
</header>
<section>
<div class="row-fluid">
<div class="span4">
<div class="panel panel-info">
<div class="panel-heading">Brick Toggler Group</div>
<div class="panel-body">
<!--Bricks x-tag for toggler group Component-->
<x-togglegroup name="subject" group="groupname">
<x-toggle label="Mathematics"></x-toggle>
<x-toggle label="Geography"></x-toggle>
<x-toggle label="Physics"></x-toggle>
</x-togglegroup>
</div>
</div>
</div>
<div class="span4">
<div class="panel panel-info">
<div class="panel-heading">Brick Tooltip</div>
<div class="panel-body">
<span class="target-button">
Click Me
</span>
<x-tooltip>
Hi This is Sandeep In Brick tooltip
</x-tooltip>
</div>
</div>
</div>
<div class="span4">
<div class="panel panel-info">
<div class="panel-heading">Brick Slider</div>
<div class="panel-body">
<x-slider min="1" max="50" step="10" value="30"></x-slider>
<x-slider polyfill></x-slider>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="panel panel-info">
<div class="panel-heading">Brick DatePicker</div>
<div class="panel-body">
<!--Bricks x-tag for Date Picker Component-->
<x-datepicker polyfill></x-datepicker>
</div>
</div>
</div>
<div class="span4">
<div class="panel panel-info">
<div class="panel-heading">Brick AppBar</div>
<div class="panel-body">
<!--Bricks x-tag for App Bar Component-->
<x-appbar heading="My Small Tutorial">
<div>(-:</div>
<div>+</div>
<header></header>
<div>+</div>
<div>:-)</div>
</x-appbar>
</div>
</div>
</div>
<div class="span4">
<div class="panel panel-info">
<div class="panel-heading">Brick Toggle</div>
<div class="panel-body">
<!--Bricks x-tag for toggle Component-->
Flower:
<x-toggle checked label="Rose" name="flower"></x-toggle>
<x-toggle label="lotus" name="flower"></x-toggle>
Fruit:
<x-toggle checked label="Mango" name="fruit"></x-toggle>
<x-toggle label="Orange" name="fruit"></x-toggle>
<x-toggle label="Buy Using Credit card" name="payment"></x-toggle>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="panel panel-info">
<div class="panel-heading">Brick Calendar</div>
<div class="panel-body">
<!--Bricks x-tag for CALENDAR Component-->
<x-calendar controls></x-calendar>
</div>
</div>
</div>
<div class="span4">
<div class="panel panel-info">
<div class="panel-heading">Brick Layout</div>
<div class="panel-body">
<!--Bricks x-tag for toggler group Component-->
<x-layout>
<header>
HEADER
</header>
<section>
CONTENT
lorem ipsum dollar.lorem ipsum.
lorem ipsum dollar.lorem ipsum dollar.
lorem ipsum dollar.lorem ipsum dollar.
lorem ipsum dollar.lorem ipsum dollar.
lorem ipsum dollar.lorem ipsum dollar.
lorem ipsum dollar.lorem ipsum dollar.
lorem ipsum dollar.lorem ipsum dollar.
lorem ipsum dollar.lorem ipsum dollar.
lorem ipsum dollar.lorem ipsum dollar.
</section>
<footer>
FOOTER
</footer>
</x-layout>
</div>
</div>
</div>
</div>
</section>
<footer>
By: <a href="http://www.tutorialsavvy.com" class="ts-author">Sandeep Kumar Patel</a>
</footer>
</x-layout>
<script src="brick-1.0beta8.min.js"></script>
<script src="my-brick-script.js"></script>
</body>
</html>
- The javascript file my-brick-script.js has code for checking whether DOMComponentLoaded Event.It is better to do any Brick component script manipulation after this event has occurred.The code looks as below,
/**
* Created by Sandeep Kumar Patel on 9/29/13.
* Author of www.tutorialsavvy.com
*/
/*DOMComponentsLoaded:is the event for document load completion
* All the script code related to brick x-tag based component
* must be written after this event.
* */
document.addEventListener('DOMComponentsLoaded', function(){
console.log('DOMComponentsLoaded event occurred');
});
- The css my-brick-style.css has the below code:-
x-layout > header, x-layout > footer{
padding: 0;
background-color: #3A5998;
color: white;
font-weight: bold;
text-align: center;
}
html, body{
height: 100%;
}
.ts-author{
color:#fff;
}
- The below shows the output in browser,
- The below zipped folder has the code below. Download project link,
