{"__v":3,"_id":"542344981972e21d7dae4e24","api":{"basic_auth":false,"params":[],"results":{"codes":[]},"try":true,"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<div id=\\\"uptodate\\\">\\n  <h4>Keep Up To Date</h4>\\n  <div>\\n  <a href=\\\"http://twitter.com/mozbrick\\\">\\n    <i class=\\\"fa fa-twitter fa-right\\\"></i>\\n    <strong>Twitter</strong> &nbsp;@mozbrick\\n  </a>\\n  </div>\\n\\n  <div>\\n  <a href=\\\"http://github.com/mozbrick\\\">\\n    <i class=\\\"fa fa-github fa-right\\\"></i>\\n    <strong>Github</strong> &nbsp;mozbrick/brick\\n  </a>\\n  </div>\\n</div>\\n<style>\\n  #uptodate {\\n    font-size: 14px;\\n    line-height: 1.8em;\\n  }\\n  #uptodate a{\\n    color: rgba(255,255,255,0.6);\\n  }\\n  #uptodate a:hover{\\n    color: rgba(255,255,255,0.9);\\n  }\\n</style>\",\n  \"sidebar\": true\n}\n[/block]\nBrick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know.","category":"542344981972e21d7dae4e21","createdAt":"2014-09-18T03:50:53.273Z","excerpt":"","isReference":false,"is_link":false,"link_url":"","order":0,"project":"5418e64758ac9fc73a2651cc","slug":"what-is-brick","sync_unique":"","title":"What is Brick?","type":"basic","updates":["542ee70f1161420800d836ba","570ac60fd2227d0e004a56fa"],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

What is Brick?


[block:html] { "html": "<div id=\"uptodate\">\n <h4>Keep Up To Date</h4>\n <div>\n <a href=\"http://twitter.com/mozbrick\">\n <i class=\"fa fa-twitter fa-right\"></i>\n <strong>Twitter</strong> &nbsp;@mozbrick\n </a>\n </div>\n\n <div>\n <a href=\"http://github.com/mozbrick\">\n <i class=\"fa fa-github fa-right\"></i>\n <strong>Github</strong> &nbsp;mozbrick/brick\n </a>\n </div>\n</div>\n<style>\n #uptodate {\n font-size: 14px;\n line-height: 1.8em;\n }\n #uptodate a{\n color: rgba(255,255,255,0.6);\n }\n #uptodate a:hover{\n color: rgba(255,255,255,0.9);\n }\n</style>", "sidebar": true } [/block] Brick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know.
[block:html] { "html": "<div id=\"uptodate\">\n <h4>Keep Up To Date</h4>\n <div>\n <a href=\"http://twitter.com/mozbrick\">\n <i class=\"fa fa-twitter fa-right\"></i>\n <strong>Twitter</strong> &nbsp;@mozbrick\n </a>\n </div>\n\n <div>\n <a href=\"http://github.com/mozbrick\">\n <i class=\"fa fa-github fa-right\"></i>\n <strong>Github</strong> &nbsp;mozbrick/brick\n </a>\n </div>\n</div>\n<style>\n #uptodate {\n font-size: 14px;\n line-height: 1.8em;\n }\n #uptodate a{\n color: rgba(255,255,255,0.6);\n }\n #uptodate a:hover{\n color: rgba(255,255,255,0.9);\n }\n</style>", "sidebar": true } [/block] Brick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know.
{"__v":0,"_id":"542344981972e21d7dae4e25","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"Brick can be installed using the Bower package manager:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"bower install mozbrick/brick\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nTo use Brick in your project, place the following in the `<head>` of your main HTML:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"bower_components/brick/dist/platform/platform.js\\\"></script>\\n<link rel=\\\"import\\\" href=\\\"bower_components/brick/dist/brick.html\\\">\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"If you are already using Polymer, platform.js or a web browser that supports Web Components, you do not need the above <script> tag.\",\n  \"title\": \"Compatibility Notice\"\n}\n[/block]","category":"542344981972e21d7dae4e21","createdAt":"2014-09-17T01:39:19.188Z","excerpt":"","is_link":false,"link_url":"","order":1,"project":"5418e64758ac9fc73a2651cc","slug":"getting-started","sync_unique":"","title":"Installation","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

Installation


Brick can be installed using the Bower package manager: [block:code] { "codes": [ { "code": "bower install mozbrick/brick", "language": "shell" } ] } [/block] To use Brick in your project, place the following in the `<head>` of your main HTML: [block:code] { "codes": [ { "code": "<script src=\"bower_components/brick/dist/platform/platform.js\"></script>\n<link rel=\"import\" href=\"bower_components/brick/dist/brick.html\">", "language": "text" } ] } [/block] [block:callout] { "type": "warning", "body": "If you are already using Polymer, platform.js or a web browser that supports Web Components, you do not need the above <script> tag.", "title": "Compatibility Notice" } [/block]
Brick can be installed using the Bower package manager: [block:code] { "codes": [ { "code": "bower install mozbrick/brick", "language": "shell" } ] } [/block] To use Brick in your project, place the following in the `<head>` of your main HTML: [block:code] { "codes": [ { "code": "<script src=\"bower_components/brick/dist/platform/platform.js\"></script>\n<link rel=\"import\" href=\"bower_components/brick/dist/brick.html\">", "language": "text" } ] } [/block] [block:callout] { "type": "warning", "body": "If you are already using Polymer, platform.js or a web browser that supports Web Components, you do not need the above <script> tag.", "title": "Compatibility Notice" } [/block]
{"__v":0,"_id":"542344981972e21d7dae4e27","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"Brick (and its components) are developed using tools built in JavaScript running on [node.js](http://nodejs.org).\n\nThe individual components are developed in their own GitHub repositories.\n\nThe `mozbrick/brick` repository contains the distributions of all the components packaged together as well as tools for building the distributions.\n\nTo work on Brick, you will need the following node tools:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n## Building Brick from source\n\nOnce you have the prerequisites, you're ready to clone and build from source.\n\nRun the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"git clone git@github.com:mozbrick/brick.git\\ncd brick\\nnpm install\\nbower install\\ngulp build\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]","category":"542344981972e21d7dae4e21","createdAt":"2014-09-18T03:42:37.314Z","excerpt":"","is_link":false,"link_url":"","order":4,"project":"5418e64758ac9fc73a2651cc","slug":"development","sync_unique":"","title":"Development","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

Development


Brick (and its components) are developed using tools built in JavaScript running on [node.js](http://nodejs.org). The individual components are developed in their own GitHub repositories. The `mozbrick/brick` repository contains the distributions of all the components packaged together as well as tools for building the distributions. To work on Brick, you will need the following node tools: [block:code] { "codes": [ { "code": "npm install -g bower gulp", "language": "shell" } ] } [/block] ## Building Brick from source Once you have the prerequisites, you're ready to clone and build from source. Run the following: [block:code] { "codes": [ { "code": "git clone git@github.com:mozbrick/brick.git\ncd brick\nnpm install\nbower install\ngulp build", "language": "shell" } ] } [/block]
Brick (and its components) are developed using tools built in JavaScript running on [node.js](http://nodejs.org). The individual components are developed in their own GitHub repositories. The `mozbrick/brick` repository contains the distributions of all the components packaged together as well as tools for building the distributions. To work on Brick, you will need the following node tools: [block:code] { "codes": [ { "code": "npm install -g bower gulp", "language": "shell" } ] } [/block] ## Building Brick from source Once you have the prerequisites, you're ready to clone and build from source. Run the following: [block:code] { "codes": [ { "code": "git clone git@github.com:mozbrick/brick.git\ncd brick\nnpm install\nbower install\ngulp build", "language": "shell" } ] } [/block]
{"__v":4,"_id":"542344981972e21d7dae4e28","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-action/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"\\n2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"import\\\" href=\\\"src/brick-action.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-action></brick-action>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## Options\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Default\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`target`\",\n    \"0-2\": \"ID of the target element.\",\n    \"1-0\": \"`source`\",\n    \"1-2\": \"ID of the source element. If not provided, the `brick-action` element will listen to events on itself. So you can wrap the source element inside `brick-action`\",\n    \"1-1\": \"the element itself\",\n    \"2-2\": \"Name of the event to listen for on the soure element.\",\n    \"3-2\": \"Name of the method to call on the target element.\",\n    \"3-1\": \"`click`\",\n    \"3-0\": \"`action`\",\n    \"2-0\": \"`trigger`\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install && bower install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T06:42:43.683Z","excerpt":"A Brick custom element to wire up events and methods on different elements. It listens to an event on a source element and then calls a method on a target element using event.detail as argument.","is_link":false,"link_url":"","order":0,"project":"5418e64758ac9fc73a2651cc","slug":"action","sync_unique":"","title":"brick-action","type":"basic","updates":["542a862fcedcfc140004b4d2","5458aa1ee042f708000afdf8","5458ab1ce042f708000afdfc","55baf14cd0736b3100bf102a"],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-action

A Brick custom element to wire up events and methods on different elements. It listens to an event on a source element and then calls a method on a target element using event.detail as argument.

[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-action/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "\n2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-action.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-action></brick-action>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Default", "h-2": "Description", "0-0": "`target`", "0-2": "ID of the target element.", "1-0": "`source`", "1-2": "ID of the source element. If not provided, the `brick-action` element will listen to events on itself. So you can wrap the source element inside `brick-action`", "1-1": "the element itself", "2-2": "Name of the event to listen for on the soure element.", "3-2": "Name of the method to call on the target element.", "3-1": "`click`", "3-0": "`action`", "2-0": "`trigger`" }, "cols": 3, "rows": 4 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-action/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "\n2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-action.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-action></brick-action>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Default", "h-2": "Description", "0-0": "`target`", "0-2": "ID of the target element.", "1-0": "`source`", "1-2": "ID of the source element. If not provided, the `brick-action` element will listen to events on itself. So you can wrap the source element inside `brick-action`", "1-1": "the element itself", "2-2": "Name of the event to listen for on the soure element.", "3-2": "Name of the method to call on the target element.", "3-1": "`click`", "3-0": "`action`", "2-0": "`trigger`" }, "cols": 3, "rows": 4 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
{"__v":2,"_id":"542344981972e21d7dae4e29","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-appbar/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" <script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" <link rel=\\\"import\\\" href=\\\"src/brick-appbar.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\\n\\nYou can use any elements in place of the `<button>` tags in the example below. A heading `<h1>` to `<h6>` element is required, and will be created automatically if not provided.\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-appbar>\\n  <button>=</button>\\n  <h2>Email</h2>\\n  <button>+</button>\\n  <button>?</button>\\n</brick-appbar>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## Options\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Options\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`heading`\",\n    \"0-1\": \"string\",\n    \"0-2\": \"Edits the header text.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n## Methods\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Accessor\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"`heading`\",\n    \"0-1\": \"Corresponds to the header text attribute.\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install && bower install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T07:05:47.854Z","excerpt":"A Brick component providing a header bar.","is_link":false,"link_url":"","order":1,"project":"5418e64758ac9fc73a2651cc","slug":"brick-appbar","sync_unique":"","title":"brick-appbar","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-appbar

A Brick component providing a header bar.

[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-appbar/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": " <script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": " <link rel=\"import\" href=\"src/brick-appbar.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:\n\nYou can use any elements in place of the `<button>` tags in the example below. A heading `<h1>` to `<h6>` element is required, and will be created automatically if not provided.", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-appbar>\n <button>=</button>\n <h2>Email</h2>\n <button>+</button>\n <button>?</button>\n</brick-appbar>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options", "h-2": "Description", "0-0": "`heading`", "0-1": "string", "0-2": "Edits the header text." }, "cols": 3, "rows": 1 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Accessor", "h-1": "Description", "0-0": "`heading`", "0-1": "Corresponds to the header text attribute." }, "cols": 2, "rows": 1 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-appbar/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": " <script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": " <link rel=\"import\" href=\"src/brick-appbar.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:\n\nYou can use any elements in place of the `<button>` tags in the example below. A heading `<h1>` to `<h6>` element is required, and will be created automatically if not provided.", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-appbar>\n <button>=</button>\n <h2>Email</h2>\n <button>+</button>\n <button>?</button>\n</brick-appbar>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options", "h-2": "Description", "0-0": "`heading`", "0-1": "string", "0-2": "Edits the header text." }, "cols": 3, "rows": 1 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Accessor", "h-1": "Description", "0-0": "`heading`", "0-1": "Corresponds to the header text attribute." }, "cols": 2, "rows": 1 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
{"__v":0,"_id":"542344981972e21d7dae4e2a","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-calendar/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Coming Soon\",\n  \"body\": \"We will have documentation for `brick-calender` in the near future!\"\n}\n[/block]","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T07:07:25.178Z","excerpt":"","is_link":false,"link_url":"","order":2,"project":"5418e64758ac9fc73a2651cc","slug":"brick-calendar-empty","sync_unique":"","title":"brick-calendar [Coming Soon]","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-calendar [Coming Soon]


[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-calendar/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:callout] { "type": "danger", "title": "Coming Soon", "body": "We will have documentation for `brick-calender` in the near future!" } [/block]
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-calendar/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:callout] { "type": "danger", "title": "Coming Soon", "body": "We will have documentation for `brick-calender` in the near future!" } [/block]
{"__v":1,"_id":"542344981972e21d7dae4e2b","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-deck/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"import\\\" href=\\\"src/brick-deck.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-deck selected-index=\\\"0\\\">\\n  <brick-card selected>0</brick-card>\\n  <brick-card>1</brick-card>\\n  <brick-card>2</brick-card>\\n  <brick-card>3</brick-card>\\n  <brick-card>4</brick-card>\\n</brick-deck>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## Options\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Options\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`transition-type`\",\n    \"0-1\": \"string:\\n  * `slide-left`\\n  * `slide-right`\\n  * `slide-up`\\n  * `slide-down`\",\n    \"0-2\": \"Defines the type of animation to use for cycling between cards. The default is no transition animation. \\n\\nThis property can either be set as an HTML attribute under the name `transition-type`, or programmatically with the property `transitionType selected-index`.\",\n    \"1-0\": \"`selected-index`\",\n    \"1-1\": \"number\",\n    \"2-1\": \"boolean\",\n    \"2-0\": \"`boolean`\",\n    \"1-2\": \"Gets/sets the index of the currently selected card in the deck.\\n\\nCan either be set as an HTML attribute under the name selected-index or programmatically with the property selectedIndex.\",\n    \"2-2\": \"Toggle allowance of looping when calling nextCard and previousCard methods has reached the end of either side of the index.\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n## Options\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Property\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`transitionType`\",\n    \"0-1\": \"string\",\n    \"0-2\": \"corresponds to the `transition-type` attribute\",\n    \"1-0\": \"`selectedIndex`\",\n    \"2-0\": \"`loop`\",\n    \"3-0\": \"`cards` (getter only)\",\n    \"4-0\": \"`selectedCard` (getter only)\",\n    \"1-1\": \"string\",\n    \"2-1\": \"boolean\",\n    \"3-1\": \"array\",\n    \"4-1\": \"brick-card\",\n    \"4-2\": \"the brick-card DOM element that is currently displayed by the deck. Returns null if no such card exists.\",\n    \"3-2\": \"array of all the brick-card elements contained in an brick-deck\",\n    \"2-2\": \"corresponds to the `loop` attribute\",\n    \"1-2\": \"corresponds to the `selected-index` attribute\"\n  },\n  \"cols\": 3,\n  \"rows\": 5\n}\n[/block]\n## Methods\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Method\",\n    \"h-1\": \"Returns\",\n    \"h-2\": \"Description\",\n    \"0-2\": \"Transitions to the brick-card at the given index within the deck. If given a direction of 'forward', will perform the forwards/normal version of the current transition animation. If given 'reverse', will performs the reverse animation. If the direction is omitted, the deck will perform a forward animation.\",\n    \"1-2\": \"Hides the card element or card located at a specified index.\",\n    \"2-2\": \"Transitions to the next card in the deck, looping back to the start if needed.\",\n    \"3-2\": \"Transitions to the previous card in the deck, looping back to the end if needed.\",\n    \"0-0\": \"showCard(index / element, [direction])\",\n    \"1-0\": \"hideCard(index / element)\",\n    \"2-0\": \"nextCard([direction])\",\n    \"3-0\": \"previousCard([direction])\",\n    \"0-1\": \"-\",\n    \"1-1\": \"-\",\n    \"2-1\": \"-\",\n    \"3-1\": \"-\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\n## Events\n[block:parameters]\n{\n  \"data\": {\n    \"0-1\": \"Fired from a card target after it has completed its show animation, and the show state has been finalized.\",\n    \"1-1\": \"Fired from a card target after it has completed its hide animation, and the hide state has been finalized.\",\n    \"0-0\": \"show\",\n    \"1-0\": \"hide\",\n    \"h-0\": \"Event\",\n    \"h-1\": \"Description\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install && bower install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T07:16:26.912Z","excerpt":"A Brick box element in which cards can be cycled independently of order with a variety of different transitions.","is_link":false,"link_url":"","order":3,"project":"5418e64758ac9fc73a2651cc","slug":"brick-deck","sync_unique":"","title":"brick-deck","type":"basic","updates":["54a6bd3821a4791d00b6369e"],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-deck

A Brick box element in which cards can be cycled independently of order with a variety of different transitions.

[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-deck/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-deck.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-deck selected-index=\"0\">\n <brick-card selected>0</brick-card>\n <brick-card>1</brick-card>\n <brick-card>2</brick-card>\n <brick-card>3</brick-card>\n <brick-card>4</brick-card>\n</brick-deck>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options", "h-2": "Description", "0-0": "`transition-type`", "0-1": "string:\n * `slide-left`\n * `slide-right`\n * `slide-up`\n * `slide-down`", "0-2": "Defines the type of animation to use for cycling between cards. The default is no transition animation. \n\nThis property can either be set as an HTML attribute under the name `transition-type`, or programmatically with the property `transitionType selected-index`.", "1-0": "`selected-index`", "1-1": "number", "2-1": "boolean", "2-0": "`boolean`", "1-2": "Gets/sets the index of the currently selected card in the deck.\n\nCan either be set as an HTML attribute under the name selected-index or programmatically with the property selectedIndex.", "2-2": "Toggle allowance of looping when calling nextCard and previousCard methods has reached the end of either side of the index." }, "cols": 3, "rows": 3 } [/block] ## Options [block:parameters] { "data": { "h-0": "Property", "h-1": "Type", "h-2": "Description", "0-0": "`transitionType`", "0-1": "string", "0-2": "corresponds to the `transition-type` attribute", "1-0": "`selectedIndex`", "2-0": "`loop`", "3-0": "`cards` (getter only)", "4-0": "`selectedCard` (getter only)", "1-1": "string", "2-1": "boolean", "3-1": "array", "4-1": "brick-card", "4-2": "the brick-card DOM element that is currently displayed by the deck. Returns null if no such card exists.", "3-2": "array of all the brick-card elements contained in an brick-deck", "2-2": "corresponds to the `loop` attribute", "1-2": "corresponds to the `selected-index` attribute" }, "cols": 3, "rows": 5 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Returns", "h-2": "Description", "0-2": "Transitions to the brick-card at the given index within the deck. If given a direction of 'forward', will perform the forwards/normal version of the current transition animation. If given 'reverse', will performs the reverse animation. If the direction is omitted, the deck will perform a forward animation.", "1-2": "Hides the card element or card located at a specified index.", "2-2": "Transitions to the next card in the deck, looping back to the start if needed.", "3-2": "Transitions to the previous card in the deck, looping back to the end if needed.", "0-0": "showCard(index / element, [direction])", "1-0": "hideCard(index / element)", "2-0": "nextCard([direction])", "3-0": "previousCard([direction])", "0-1": "-", "1-1": "-", "2-1": "-", "3-1": "-" }, "cols": 3, "rows": 4 } [/block] ## Events [block:parameters] { "data": { "0-1": "Fired from a card target after it has completed its show animation, and the show state has been finalized.", "1-1": "Fired from a card target after it has completed its hide animation, and the hide state has been finalized.", "0-0": "show", "1-0": "hide", "h-0": "Event", "h-1": "Description" }, "cols": 2, "rows": 2 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-deck/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-deck.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-deck selected-index=\"0\">\n <brick-card selected>0</brick-card>\n <brick-card>1</brick-card>\n <brick-card>2</brick-card>\n <brick-card>3</brick-card>\n <brick-card>4</brick-card>\n</brick-deck>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options", "h-2": "Description", "0-0": "`transition-type`", "0-1": "string:\n * `slide-left`\n * `slide-right`\n * `slide-up`\n * `slide-down`", "0-2": "Defines the type of animation to use for cycling between cards. The default is no transition animation. \n\nThis property can either be set as an HTML attribute under the name `transition-type`, or programmatically with the property `transitionType selected-index`.", "1-0": "`selected-index`", "1-1": "number", "2-1": "boolean", "2-0": "`boolean`", "1-2": "Gets/sets the index of the currently selected card in the deck.\n\nCan either be set as an HTML attribute under the name selected-index or programmatically with the property selectedIndex.", "2-2": "Toggle allowance of looping when calling nextCard and previousCard methods has reached the end of either side of the index." }, "cols": 3, "rows": 3 } [/block] ## Options [block:parameters] { "data": { "h-0": "Property", "h-1": "Type", "h-2": "Description", "0-0": "`transitionType`", "0-1": "string", "0-2": "corresponds to the `transition-type` attribute", "1-0": "`selectedIndex`", "2-0": "`loop`", "3-0": "`cards` (getter only)", "4-0": "`selectedCard` (getter only)", "1-1": "string", "2-1": "boolean", "3-1": "array", "4-1": "brick-card", "4-2": "the brick-card DOM element that is currently displayed by the deck. Returns null if no such card exists.", "3-2": "array of all the brick-card elements contained in an brick-deck", "2-2": "corresponds to the `loop` attribute", "1-2": "corresponds to the `selected-index` attribute" }, "cols": 3, "rows": 5 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Returns", "h-2": "Description", "0-2": "Transitions to the brick-card at the given index within the deck. If given a direction of 'forward', will perform the forwards/normal version of the current transition animation. If given 'reverse', will performs the reverse animation. If the direction is omitted, the deck will perform a forward animation.", "1-2": "Hides the card element or card located at a specified index.", "2-2": "Transitions to the next card in the deck, looping back to the start if needed.", "3-2": "Transitions to the previous card in the deck, looping back to the end if needed.", "0-0": "showCard(index / element, [direction])", "1-0": "hideCard(index / element)", "2-0": "nextCard([direction])", "3-0": "previousCard([direction])", "0-1": "-", "1-1": "-", "2-1": "-", "3-1": "-" }, "cols": 3, "rows": 4 } [/block] ## Events [block:parameters] { "data": { "0-1": "Fired from a card target after it has completed its show animation, and the show state has been finalized.", "1-1": "Fired from a card target after it has completed its hide animation, and the hide state has been finalized.", "0-0": "show", "1-0": "hide", "h-0": "Event", "h-1": "Description" }, "cols": 2, "rows": 2 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
{"__v":0,"_id":"542344981972e21d7dae4e2c","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-flipbox/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"import\\\" href=\\\"src/brick-flipbox.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-flipbox>\\n  <div>Front</div>\\n  <div>Back</div>\\n</brick-flipbox>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## Options\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Options (default)\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`flipped`\",\n    \"0-1\": \"boolean (`false`)\",\n    \"0-2\": \"True if the flipbox is flipped to the back.\",\n    \"1-0\": \"`direction`\",\n    \"1-1\": \"string (`right`)\",\n    \"1-2\": \"The flip direction. Can be left, right, up and down.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n## Methods\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Method\",\n    \"h-1\": \"Parameters\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"toggle()\",\n    \"0-2\": \"Toggle the flipbox.\",\n    \"1-2\": \"Show the front side.\",\n    \"2-2\": \"Show the back side.\",\n    \"2-0\": \"showBack()\",\n    \"1-0\": \"showFront()\",\n    \"0-1\": \"None\",\n    \"1-1\": \"None\",\n    \"2-1\": \"None\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n## Events\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`flipend`\",\n    \"0-1\": \"Triggers when the flipping is complete.\",\n    \"h-0\": \"Event\",\n    \"h-1\": \"Description\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\nTriggering `reveal` on one of the elements inside the flipbox will reveal the corresponding side.\n\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install && bower install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T07:25:19.794Z","excerpt":"A Brick custom element. Flips between two content elements with a CSS Animation, similar to flipping a playing card.","is_link":false,"link_url":"","order":4,"project":"5418e64758ac9fc73a2651cc","slug":"brick-flipbox","sync_unique":"","title":"brick-flipbox","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-flipbox

A Brick custom element. Flips between two content elements with a CSS Animation, similar to flipping a playing card.

[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-flipbox/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-flipbox.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-flipbox>\n <div>Front</div>\n <div>Back</div>\n</brick-flipbox>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options (default)", "h-2": "Description", "0-0": "`flipped`", "0-1": "boolean (`false`)", "0-2": "True if the flipbox is flipped to the back.", "1-0": "`direction`", "1-1": "string (`right`)", "1-2": "The flip direction. Can be left, right, up and down." }, "cols": 3, "rows": 2 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Parameters", "h-2": "Description", "0-0": "toggle()", "0-2": "Toggle the flipbox.", "1-2": "Show the front side.", "2-2": "Show the back side.", "2-0": "showBack()", "1-0": "showFront()", "0-1": "None", "1-1": "None", "2-1": "None" }, "cols": 3, "rows": 3 } [/block] ## Events [block:parameters] { "data": { "0-0": "`flipend`", "0-1": "Triggers when the flipping is complete.", "h-0": "Event", "h-1": "Description" }, "cols": 2, "rows": 1 } [/block] Triggering `reveal` on one of the elements inside the flipbox will reveal the corresponding side. ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-flipbox/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-flipbox.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-flipbox>\n <div>Front</div>\n <div>Back</div>\n</brick-flipbox>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options (default)", "h-2": "Description", "0-0": "`flipped`", "0-1": "boolean (`false`)", "0-2": "True if the flipbox is flipped to the back.", "1-0": "`direction`", "1-1": "string (`right`)", "1-2": "The flip direction. Can be left, right, up and down." }, "cols": 3, "rows": 2 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Parameters", "h-2": "Description", "0-0": "toggle()", "0-2": "Toggle the flipbox.", "1-2": "Show the front side.", "2-2": "Show the back side.", "2-0": "showBack()", "1-0": "showFront()", "0-1": "None", "1-1": "None", "2-1": "None" }, "cols": 3, "rows": 3 } [/block] ## Events [block:parameters] { "data": { "0-0": "`flipend`", "0-1": "Triggers when the flipping is complete.", "h-0": "Event", "h-1": "Description" }, "cols": 2, "rows": 1 } [/block] Triggering `reveal` on one of the elements inside the flipbox will reveal the corresponding side. ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
{"__v":0,"_id":"542344981972e21d7dae4e2d","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-form/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"import\\\" href=\\\"src/brick-form.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-storage-indexeddb id=\\\"store\\\" key=\\\"group\\\"></brick-store-indexeddb>\\n<brick-form storage=\\\"store\\\" name=\\\"a\\\">... inputs ...</brick-form>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## Options\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Options\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`name`\",\n    \"0-1\": \"string\",\n    \"0-2\": \"The name of the form. Will be used to identify the forms data in the datastore. Has to be set.\",\n    \"1-2\": \"The id of the storage component to save the form data to.\",\n    \"2-2\": \"Automatically save data on change events, instead of just on submit events.\",\n    \"1-1\": \"string\",\n    \"2-1\": \"boolean\",\n    \"1-0\": \"`storage`\",\n    \"2-0\": \"`autosave`\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n## Methods\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Method\",\n    \"h-1\": \"Parameters\",\n    \"h-2\": \"Description\",\n    \"0-1\": \"None\",\n    \"1-2\": \"Save the data from the storage component.\",\n    \"0-2\": \"Load the data from the storage component.\",\n    \"0-0\": \"loadFormData()\",\n    \"1-0\": \"saveFormData()\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install && bower install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T07:29:26.541Z","excerpt":"A Brick form component which uses a brick-storage component to store its content.","is_link":false,"link_url":"","order":5,"project":"5418e64758ac9fc73a2651cc","slug":"brick-form","sync_unique":"","title":"brick-form","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-form

A Brick form component which uses a brick-storage component to store its content.

[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-form/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-form.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-storage-indexeddb id=\"store\" key=\"group\"></brick-store-indexeddb>\n<brick-form storage=\"store\" name=\"a\">... inputs ...</brick-form>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options", "h-2": "Description", "0-0": "`name`", "0-1": "string", "0-2": "The name of the form. Will be used to identify the forms data in the datastore. Has to be set.", "1-2": "The id of the storage component to save the form data to.", "2-2": "Automatically save data on change events, instead of just on submit events.", "1-1": "string", "2-1": "boolean", "1-0": "`storage`", "2-0": "`autosave`" }, "cols": 3, "rows": 3 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Parameters", "h-2": "Description", "0-1": "None", "1-2": "Save the data from the storage component.", "0-2": "Load the data from the storage component.", "0-0": "loadFormData()", "1-0": "saveFormData()" }, "cols": 3, "rows": 2 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-form/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-form.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-storage-indexeddb id=\"store\" key=\"group\"></brick-store-indexeddb>\n<brick-form storage=\"store\" name=\"a\">... inputs ...</brick-form>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options", "h-2": "Description", "0-0": "`name`", "0-1": "string", "0-2": "The name of the form. Will be used to identify the forms data in the datastore. Has to be set.", "1-2": "The id of the storage component to save the form data to.", "2-2": "Automatically save data on change events, instead of just on submit events.", "1-1": "string", "2-1": "boolean", "1-0": "`storage`", "2-0": "`autosave`" }, "cols": 3, "rows": 3 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Parameters", "h-2": "Description", "0-1": "None", "1-2": "Save the data from the storage component.", "0-2": "Load the data from the storage component.", "0-0": "loadFormData()", "1-0": "saveFormData()" }, "cols": 3, "rows": 2 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
{"__v":0,"_id":"542344981972e21d7dae4e2e","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-layout/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"import\\\" href=\\\"src/brick-layout.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-layout></brick-layout>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\nSee [Examples](#basic-examples) for detailed examples.\n\n## Options\n\n**Attributes on <brick-layout>**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`horizontal`\",\n    \"0-1\": \"boolean\",\n    \"1-0\": \"`open`\",\n    \"1-1\": \"boolean\",\n    \"0-2\": \"Use a horizontal layout instead of the default vertical layout.\",\n    \"1-2\": \"Open child drawer elements.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n**Attributes on direct child-elements**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`flex`\",\n    \"1-0\": \"`drawer`\",\n    \"1-1\": \"boolean\",\n    \"0-1\": \"boolean\",\n    \"0-2\": \"Set `flex: 1` for this element.\",\n    \"1-2\": \"Use this element as a drawer. Drawers can he hidden and shown by setting the `show` attribute on the parent `<brick-layout>`.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n**Attributes on descendent elements**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`hide`\",\n    \"0-1\": \"boolean\",\n    \"0-2\": \"Hide this element.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n**Attributes and page widths**\n\nAll mentioned attributes except `open` can be set to only apply on certain page widths:\n[block:html]\n{\n  \"html\": \"<table>\\n  <tr>\\n    <th>Attribute</th>\\n    <th>&lt; 768px (xs)</th>\\n    <th>≥ 768px (s)</th>\\n    <th>≥ 992px (m)</th>\\n    <th>≥ 1200px (l)</th>\\n  </tr>\\n  <tr>\\n    <td>attribute</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-xs</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-s</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-m</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"no\\\">no</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-l</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"yes\\\">yes</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-lt-s</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-lt-m</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-lt-l</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"no\\\">no</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-gt-xs</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-gt-s</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"yes\\\">yes</td>\\n    <td class=\\\"yes\\\">yes</td>\\n  </tr>\\n  <tr>\\n    <td>attribute-gt-m</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"no\\\">no</td>\\n    <td class=\\\"yes\\\">yes</td>\\n  </tr>\\n</table>\\n\\n<style>\\n.yes {\\n\\tbackground-color: #5db61c;\\n  color: #fff;\\n  font-weigh: bold;\\n}\\n.no {\\n\\tbackground-color: #bc4543;\\n  color: #fff;\\n}\\n</style>\"\n}\n[/block]\nExample:\n\nThe attribute `hide-gt-xs` hides an element when the page-width is greater than 768px.\n\n## Methods\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Method\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"`toggleDrawer()`\",\n    \"1-0\": \"`openDrawer()`\",\n    \"2-0\": \"`closeDrawer()`\",\n    \"0-1\": \"Toggle the drawer state.\",\n    \"1-1\": \"Open the drawer.\",\n    \"2-1\": \"Close the drawer.\"\n  },\n  \"cols\": 2,\n  \"rows\": 3\n}\n[/block]\n## Basic Examples\n\n**Simple**\n\n  * Headerbar on the top of the page\n  * Below the Header:\n    * Menu on the left side, taking up as much space as the menu items need.\n    * Content taking up the rest of the space.\n\n[Demo](http://mozbrick.github.io/examples/brick-layout/simple.html)\n\nWe start with the outmost `brick-layout` to split the page vertically into the Header and the rest below it. We insert a `header` and a `div`. To make the header take up as much space as it needs and the rest below we put the attribute `flex` on the div below the `header`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-layout>\\n  <header>\\n  \\tBrick-Layout Basic Examples: Simple\\n  </header>\\n  <div flex> \\n  \\t<!-- menu and content will go here -->\\n  </div>\\n</brick-layout>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nTo add the menu and the content horizontally positioned next to each other, we replace the `div` with another `brick-layout` this time with the attribute `horizontal`. Inside we add a `div` for the menu and one for the content. We also add the attribute `flex` to the content-div.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-layout>\\n  <header>\\n    Brick-Layout Basic Examples: Simple\\n  </header>\\n  <brick-layout horizontal flex>\\n    <div id=\\\"menu\\\">\\n      <ul>\\n        <li>Menu Item 1</li>\\n        <li>Menu Item 2</li>\\n        <li>Menu Item 3</li>\\n      </ul>\\n    </div>\\n    <div id=\\\"content\\\" flex>\\n      Content goes here.\\n    </div>\\n  </brick-layout>\\n</brick-layout>\",\n      \"language\": \"html\"\n    },\n    {\n      \"code\": \"html, body {\\n  padding: 0;\\n  margin: 0;\\n  height: 100%;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nTo make it all work we need some css. We do not want to have a `padding` and `margin` outside of our layout and we want our layout to be able fill the whole page, so we add the following css to the html and body.\n\nTo visualize the layout we add some borders:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"header {\\n  border-bottom: 1px solid #ccc;\\n}\\n#menu {\\n  border-right: 1px solid #ccc;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n**Columns**\n\n  * Split the page equally into 4 columns]\n\n[Demo](http://mozbrick.github.io/examples/brick-layout/columns.html)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-layout horizontal>\\n  <div class=\\\"column\\\" flex>1</div>\\n  <div class=\\\"column\\\" flex>2</div>\\n  <div class=\\\"column\\\" flex>3</div>\\n  <div class=\\\"column\\\" flex>4</div>\\n</brick-layout>\",\n      \"language\": \"html\"\n    },\n    {\n      \"code\": \"html, body {\\n  padding: 0;\\n  margin: 0;\\n  height: 100%;\\n}\\n.column {\\n  border-left: 1px solid #ccc;\\n  text-align: center;\\n}\\n.columns:first-of-type {\\n  border: none;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n## Responsive Examples\n\n**Drawer**\n\n  * Headerbar on the top of the page.\n  * Below the Header:\n    * Menu on the left side, turns into a drawer when the page-width is below 768px.\n    * Menu-Button to control the Menu when the page-width is below 768px.\n    * Content taking up the rest of the space.\n\n[Demo](http://mozbrick.github.io/examples/brick-layout/drawer.html)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-layout>\\n  <header>\\n    <brick-action target=\\\"main\\\" action=\\\"toggleDrawer\\\">\\n      <button hide-gt-xs>M</button>\\n    </brick-action>\\n    Brick Layout Example: Simple responsive Drawer\\n  </header>\\n  <brick-layout horizontal id=\\\"main\\\" flex>\\n    <brick-menu id=\\\"menu\\\" drawer-lt-s>\\n      <brick-menu-item selected>Menu Item 1</brick-menu-item>\\n      <brick-menu-item>Menu Item 2</brick-menu-item>\\n      <brick-menu-item>Menu Item 3</brick-menu-item>\\n    </brick-menu>\\n    <div id=\\\"article\\\" flex>\\n      article\\n    </div>\\n  </brick-layout>\\n</brick-layout>\",\n      \"language\": \"html\"\n    },\n    {\n      \"code\": \"html, body {\\n  padding: 0;\\n  margin: 0;\\n  height: 100%;\\n}\\n#header {\\n  border-bottom: 1px solid #ccc;\\n  padding: 12px 9px 9px 9px;\\n}\\n#menu {\\n  border-right: 1px solid #ccc;\\n  padding: 9px;\\n  background: white;\\n}\\n#menu brick-menu-item {\\n  padding: 3px 0;\\n}\\n#menu brick-menu-item[selected] {\\n  font-weight: bold;\\n}\\n#article {\\n  padding: 9px;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n**Tabs**\n\n  * Headerbar on the top of the page.\n  * Below the Header:\n    * Menu on the left side, turns into a tabbar at the bottom of the page when the page-width is below 768px.\n    * Content taking up the rest of the space.\n\n[Demo](http://mozbrick.github.io/examples/brick-layout/tabs.html)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-layout>\\n  <header>\\n    Brick Layout Example: Responsive Tabs\\n  </header>\\n  <brick-layout horizontal-gt-xs flex>\\n    <brick-menu id=\\\"menu\\\" horizontal-lt-s>\\n      <brick-action selected target=\\\"card1\\\" action=\\\"reveal\\\">\\n        Menu Item 1\\n      </brick-action>\\n      <brick-action target=\\\"card2\\\" action=\\\"reveal\\\">\\n        Menu Item 2\\n      </brick-action>\\n      <brick-action target=\\\"card3\\\" action=\\\"reveal\\\">\\n        Menu Item 3\\n      </brick-action>\\n    </brick-menu>\\n    <brick-deck id=\\\"content\\\" flex selected-index=\\\"0\\\">\\n      <brick-card id=\\\"card1\\\" selected>1</brick-card>\\n      <brick-card id=\\\"card2\\\">2</brick-card>\\n      <brick-card id=\\\"card3\\\">3</brick-card>\\n    </brick-deck>\\n  </brick-layout>\\n</brick-layout>\",\n      \"language\": \"html\"\n    },\n    {\n      \"code\": \"html, body {\\n  padding: 0;\\n  margin: 0;\\n  height: 100%;\\n  box-sizing: border-box;\\n}\\n#header {\\n  border-bottom: 1px solid #ccc;\\n  padding: 12px 9px 9px 9px;\\n}\\n#menu {\\n  border-right: 1px solid #ccc;\\n  background: white;\\n}\\n#menu > * {\\n  padding: 9px;\\n  width: 100%;\\n}\\n#menu [selected] {\\n  font-weight: bold;\\n}\\nbrick-card {\\n  padding: 9px;\\n  font-size: 6em;\\n  text-align: center;\\n}\\n@media (max-width: 768px) {\\n  #content {\\n    order: 1;\\n  }\\n  #menu {\\n    border: none;\\n    border-top: 1px solid #ccc;\\n    order: 2;\\n  }\\n  #menu > * {\\n    border-left: 1px solid #ccc;\\n  }\\n  #menu > *:first-child {\\n    border-left: none;\\n  }\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install && bower install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T07:35:00.356Z","excerpt":"A Brick layout component.","is_link":false,"link_url":"","order":6,"project":"5418e64758ac9fc73a2651cc","slug":"brick-layout","sync_unique":"","title":"brick-layout","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-layout

A Brick layout component.

[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-layout/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-layout.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-layout></brick-layout>", "language": "html" } ], "sidebar": true } [/block] See [Examples](#basic-examples) for detailed examples. ## Options **Attributes on <brick-layout>** [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type", "h-2": "Description", "0-0": "`horizontal`", "0-1": "boolean", "1-0": "`open`", "1-1": "boolean", "0-2": "Use a horizontal layout instead of the default vertical layout.", "1-2": "Open child drawer elements." }, "cols": 3, "rows": 2 } [/block] **Attributes on direct child-elements** [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type", "h-2": "Description", "0-0": "`flex`", "1-0": "`drawer`", "1-1": "boolean", "0-1": "boolean", "0-2": "Set `flex: 1` for this element.", "1-2": "Use this element as a drawer. Drawers can he hidden and shown by setting the `show` attribute on the parent `<brick-layout>`." }, "cols": 3, "rows": 2 } [/block] **Attributes on descendent elements** [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type", "h-2": "Description", "0-0": "`hide`", "0-1": "boolean", "0-2": "Hide this element." }, "cols": 3, "rows": 1 } [/block] **Attributes and page widths** All mentioned attributes except `open` can be set to only apply on certain page widths: [block:html] { "html": "<table>\n <tr>\n <th>Attribute</th>\n <th>&lt; 768px (xs)</th>\n <th>≥ 768px (s)</th>\n <th>≥ 992px (m)</th>\n <th>≥ 1200px (l)</th>\n </tr>\n <tr>\n <td>attribute</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n </tr>\n <tr>\n <td>attribute-xs</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-s</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-m</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-l</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n </tr>\n <tr>\n <td>attribute-lt-s</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-lt-m</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-lt-l</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-gt-xs</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n </tr>\n <tr>\n <td>attribute-gt-s</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n </tr>\n <tr>\n <td>attribute-gt-m</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n </tr>\n</table>\n\n<style>\n.yes {\n\tbackground-color: #5db61c;\n color: #fff;\n font-weigh: bold;\n}\n.no {\n\tbackground-color: #bc4543;\n color: #fff;\n}\n</style>" } [/block] Example: The attribute `hide-gt-xs` hides an element when the page-width is greater than 768px. ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Description", "0-0": "`toggleDrawer()`", "1-0": "`openDrawer()`", "2-0": "`closeDrawer()`", "0-1": "Toggle the drawer state.", "1-1": "Open the drawer.", "2-1": "Close the drawer." }, "cols": 2, "rows": 3 } [/block] ## Basic Examples **Simple** * Headerbar on the top of the page * Below the Header: * Menu on the left side, taking up as much space as the menu items need. * Content taking up the rest of the space. [Demo](http://mozbrick.github.io/examples/brick-layout/simple.html) We start with the outmost `brick-layout` to split the page vertically into the Header and the rest below it. We insert a `header` and a `div`. To make the header take up as much space as it needs and the rest below we put the attribute `flex` on the div below the `header`. [block:code] { "codes": [ { "code": "<brick-layout>\n <header>\n \tBrick-Layout Basic Examples: Simple\n </header>\n <div flex> \n \t<!-- menu and content will go here -->\n </div>\n</brick-layout>", "language": "html" } ] } [/block] To add the menu and the content horizontally positioned next to each other, we replace the `div` with another `brick-layout` this time with the attribute `horizontal`. Inside we add a `div` for the menu and one for the content. We also add the attribute `flex` to the content-div. [block:code] { "codes": [ { "code": "<brick-layout>\n <header>\n Brick-Layout Basic Examples: Simple\n </header>\n <brick-layout horizontal flex>\n <div id=\"menu\">\n <ul>\n <li>Menu Item 1</li>\n <li>Menu Item 2</li>\n <li>Menu Item 3</li>\n </ul>\n </div>\n <div id=\"content\" flex>\n Content goes here.\n </div>\n </brick-layout>\n</brick-layout>", "language": "html" }, { "code": "html, body {\n padding: 0;\n margin: 0;\n height: 100%;\n}", "language": "css" } ] } [/block] To make it all work we need some css. We do not want to have a `padding` and `margin` outside of our layout and we want our layout to be able fill the whole page, so we add the following css to the html and body. To visualize the layout we add some borders: [block:code] { "codes": [ { "code": "header {\n border-bottom: 1px solid #ccc;\n}\n#menu {\n border-right: 1px solid #ccc;\n}", "language": "css" } ] } [/block] **Columns** * Split the page equally into 4 columns] [Demo](http://mozbrick.github.io/examples/brick-layout/columns.html) [block:code] { "codes": [ { "code": "<brick-layout horizontal>\n <div class=\"column\" flex>1</div>\n <div class=\"column\" flex>2</div>\n <div class=\"column\" flex>3</div>\n <div class=\"column\" flex>4</div>\n</brick-layout>", "language": "html" }, { "code": "html, body {\n padding: 0;\n margin: 0;\n height: 100%;\n}\n.column {\n border-left: 1px solid #ccc;\n text-align: center;\n}\n.columns:first-of-type {\n border: none;\n}", "language": "css" } ] } [/block] ## Responsive Examples **Drawer** * Headerbar on the top of the page. * Below the Header: * Menu on the left side, turns into a drawer when the page-width is below 768px. * Menu-Button to control the Menu when the page-width is below 768px. * Content taking up the rest of the space. [Demo](http://mozbrick.github.io/examples/brick-layout/drawer.html) [block:code] { "codes": [ { "code": "<brick-layout>\n <header>\n <brick-action target=\"main\" action=\"toggleDrawer\">\n <button hide-gt-xs>M</button>\n </brick-action>\n Brick Layout Example: Simple responsive Drawer\n </header>\n <brick-layout horizontal id=\"main\" flex>\n <brick-menu id=\"menu\" drawer-lt-s>\n <brick-menu-item selected>Menu Item 1</brick-menu-item>\n <brick-menu-item>Menu Item 2</brick-menu-item>\n <brick-menu-item>Menu Item 3</brick-menu-item>\n </brick-menu>\n <div id=\"article\" flex>\n article\n </div>\n </brick-layout>\n</brick-layout>", "language": "html" }, { "code": "html, body {\n padding: 0;\n margin: 0;\n height: 100%;\n}\n#header {\n border-bottom: 1px solid #ccc;\n padding: 12px 9px 9px 9px;\n}\n#menu {\n border-right: 1px solid #ccc;\n padding: 9px;\n background: white;\n}\n#menu brick-menu-item {\n padding: 3px 0;\n}\n#menu brick-menu-item[selected] {\n font-weight: bold;\n}\n#article {\n padding: 9px;\n}", "language": "css" } ] } [/block] **Tabs** * Headerbar on the top of the page. * Below the Header: * Menu on the left side, turns into a tabbar at the bottom of the page when the page-width is below 768px. * Content taking up the rest of the space. [Demo](http://mozbrick.github.io/examples/brick-layout/tabs.html) [block:code] { "codes": [ { "code": "<brick-layout>\n <header>\n Brick Layout Example: Responsive Tabs\n </header>\n <brick-layout horizontal-gt-xs flex>\n <brick-menu id=\"menu\" horizontal-lt-s>\n <brick-action selected target=\"card1\" action=\"reveal\">\n Menu Item 1\n </brick-action>\n <brick-action target=\"card2\" action=\"reveal\">\n Menu Item 2\n </brick-action>\n <brick-action target=\"card3\" action=\"reveal\">\n Menu Item 3\n </brick-action>\n </brick-menu>\n <brick-deck id=\"content\" flex selected-index=\"0\">\n <brick-card id=\"card1\" selected>1</brick-card>\n <brick-card id=\"card2\">2</brick-card>\n <brick-card id=\"card3\">3</brick-card>\n </brick-deck>\n </brick-layout>\n</brick-layout>", "language": "html" }, { "code": "html, body {\n padding: 0;\n margin: 0;\n height: 100%;\n box-sizing: border-box;\n}\n#header {\n border-bottom: 1px solid #ccc;\n padding: 12px 9px 9px 9px;\n}\n#menu {\n border-right: 1px solid #ccc;\n background: white;\n}\n#menu > * {\n padding: 9px;\n width: 100%;\n}\n#menu [selected] {\n font-weight: bold;\n}\nbrick-card {\n padding: 9px;\n font-size: 6em;\n text-align: center;\n}\n@media (max-width: 768px) {\n #content {\n order: 1;\n }\n #menu {\n border: none;\n border-top: 1px solid #ccc;\n order: 2;\n }\n #menu > * {\n border-left: 1px solid #ccc;\n }\n #menu > *:first-child {\n border-left: none;\n }\n}", "language": "css" } ] } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-layout/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-layout.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-layout></brick-layout>", "language": "html" } ], "sidebar": true } [/block] See [Examples](#basic-examples) for detailed examples. ## Options **Attributes on <brick-layout>** [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type", "h-2": "Description", "0-0": "`horizontal`", "0-1": "boolean", "1-0": "`open`", "1-1": "boolean", "0-2": "Use a horizontal layout instead of the default vertical layout.", "1-2": "Open child drawer elements." }, "cols": 3, "rows": 2 } [/block] **Attributes on direct child-elements** [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type", "h-2": "Description", "0-0": "`flex`", "1-0": "`drawer`", "1-1": "boolean", "0-1": "boolean", "0-2": "Set `flex: 1` for this element.", "1-2": "Use this element as a drawer. Drawers can he hidden and shown by setting the `show` attribute on the parent `<brick-layout>`." }, "cols": 3, "rows": 2 } [/block] **Attributes on descendent elements** [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type", "h-2": "Description", "0-0": "`hide`", "0-1": "boolean", "0-2": "Hide this element." }, "cols": 3, "rows": 1 } [/block] **Attributes and page widths** All mentioned attributes except `open` can be set to only apply on certain page widths: [block:html] { "html": "<table>\n <tr>\n <th>Attribute</th>\n <th>&lt; 768px (xs)</th>\n <th>≥ 768px (s)</th>\n <th>≥ 992px (m)</th>\n <th>≥ 1200px (l)</th>\n </tr>\n <tr>\n <td>attribute</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n </tr>\n <tr>\n <td>attribute-xs</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-s</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-m</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-l</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n </tr>\n <tr>\n <td>attribute-lt-s</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-lt-m</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-lt-l</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"no\">no</td>\n </tr>\n <tr>\n <td>attribute-gt-xs</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n </tr>\n <tr>\n <td>attribute-gt-s</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n <td class=\"yes\">yes</td>\n </tr>\n <tr>\n <td>attribute-gt-m</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"no\">no</td>\n <td class=\"yes\">yes</td>\n </tr>\n</table>\n\n<style>\n.yes {\n\tbackground-color: #5db61c;\n color: #fff;\n font-weigh: bold;\n}\n.no {\n\tbackground-color: #bc4543;\n color: #fff;\n}\n</style>" } [/block] Example: The attribute `hide-gt-xs` hides an element when the page-width is greater than 768px. ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Description", "0-0": "`toggleDrawer()`", "1-0": "`openDrawer()`", "2-0": "`closeDrawer()`", "0-1": "Toggle the drawer state.", "1-1": "Open the drawer.", "2-1": "Close the drawer." }, "cols": 2, "rows": 3 } [/block] ## Basic Examples **Simple** * Headerbar on the top of the page * Below the Header: * Menu on the left side, taking up as much space as the menu items need. * Content taking up the rest of the space. [Demo](http://mozbrick.github.io/examples/brick-layout/simple.html) We start with the outmost `brick-layout` to split the page vertically into the Header and the rest below it. We insert a `header` and a `div`. To make the header take up as much space as it needs and the rest below we put the attribute `flex` on the div below the `header`. [block:code] { "codes": [ { "code": "<brick-layout>\n <header>\n \tBrick-Layout Basic Examples: Simple\n </header>\n <div flex> \n \t<!-- menu and content will go here -->\n </div>\n</brick-layout>", "language": "html" } ] } [/block] To add the menu and the content horizontally positioned next to each other, we replace the `div` with another `brick-layout` this time with the attribute `horizontal`. Inside we add a `div` for the menu and one for the content. We also add the attribute `flex` to the content-div. [block:code] { "codes": [ { "code": "<brick-layout>\n <header>\n Brick-Layout Basic Examples: Simple\n </header>\n <brick-layout horizontal flex>\n <div id=\"menu\">\n <ul>\n <li>Menu Item 1</li>\n <li>Menu Item 2</li>\n <li>Menu Item 3</li>\n </ul>\n </div>\n <div id=\"content\" flex>\n Content goes here.\n </div>\n </brick-layout>\n</brick-layout>", "language": "html" }, { "code": "html, body {\n padding: 0;\n margin: 0;\n height: 100%;\n}", "language": "css" } ] } [/block] To make it all work we need some css. We do not want to have a `padding` and `margin` outside of our layout and we want our layout to be able fill the whole page, so we add the following css to the html and body. To visualize the layout we add some borders: [block:code] { "codes": [ { "code": "header {\n border-bottom: 1px solid #ccc;\n}\n#menu {\n border-right: 1px solid #ccc;\n}", "language": "css" } ] } [/block] **Columns** * Split the page equally into 4 columns] [Demo](http://mozbrick.github.io/examples/brick-layout/columns.html) [block:code] { "codes": [ { "code": "<brick-layout horizontal>\n <div class=\"column\" flex>1</div>\n <div class=\"column\" flex>2</div>\n <div class=\"column\" flex>3</div>\n <div class=\"column\" flex>4</div>\n</brick-layout>", "language": "html" }, { "code": "html, body {\n padding: 0;\n margin: 0;\n height: 100%;\n}\n.column {\n border-left: 1px solid #ccc;\n text-align: center;\n}\n.columns:first-of-type {\n border: none;\n}", "language": "css" } ] } [/block] ## Responsive Examples **Drawer** * Headerbar on the top of the page. * Below the Header: * Menu on the left side, turns into a drawer when the page-width is below 768px. * Menu-Button to control the Menu when the page-width is below 768px. * Content taking up the rest of the space. [Demo](http://mozbrick.github.io/examples/brick-layout/drawer.html) [block:code] { "codes": [ { "code": "<brick-layout>\n <header>\n <brick-action target=\"main\" action=\"toggleDrawer\">\n <button hide-gt-xs>M</button>\n </brick-action>\n Brick Layout Example: Simple responsive Drawer\n </header>\n <brick-layout horizontal id=\"main\" flex>\n <brick-menu id=\"menu\" drawer-lt-s>\n <brick-menu-item selected>Menu Item 1</brick-menu-item>\n <brick-menu-item>Menu Item 2</brick-menu-item>\n <brick-menu-item>Menu Item 3</brick-menu-item>\n </brick-menu>\n <div id=\"article\" flex>\n article\n </div>\n </brick-layout>\n</brick-layout>", "language": "html" }, { "code": "html, body {\n padding: 0;\n margin: 0;\n height: 100%;\n}\n#header {\n border-bottom: 1px solid #ccc;\n padding: 12px 9px 9px 9px;\n}\n#menu {\n border-right: 1px solid #ccc;\n padding: 9px;\n background: white;\n}\n#menu brick-menu-item {\n padding: 3px 0;\n}\n#menu brick-menu-item[selected] {\n font-weight: bold;\n}\n#article {\n padding: 9px;\n}", "language": "css" } ] } [/block] **Tabs** * Headerbar on the top of the page. * Below the Header: * Menu on the left side, turns into a tabbar at the bottom of the page when the page-width is below 768px. * Content taking up the rest of the space. [Demo](http://mozbrick.github.io/examples/brick-layout/tabs.html) [block:code] { "codes": [ { "code": "<brick-layout>\n <header>\n Brick Layout Example: Responsive Tabs\n </header>\n <brick-layout horizontal-gt-xs flex>\n <brick-menu id=\"menu\" horizontal-lt-s>\n <brick-action selected target=\"card1\" action=\"reveal\">\n Menu Item 1\n </brick-action>\n <brick-action target=\"card2\" action=\"reveal\">\n Menu Item 2\n </brick-action>\n <brick-action target=\"card3\" action=\"reveal\">\n Menu Item 3\n </brick-action>\n </brick-menu>\n <brick-deck id=\"content\" flex selected-index=\"0\">\n <brick-card id=\"card1\" selected>1</brick-card>\n <brick-card id=\"card2\">2</brick-card>\n <brick-card id=\"card3\">3</brick-card>\n </brick-deck>\n </brick-layout>\n</brick-layout>", "language": "html" }, { "code": "html, body {\n padding: 0;\n margin: 0;\n height: 100%;\n box-sizing: border-box;\n}\n#header {\n border-bottom: 1px solid #ccc;\n padding: 12px 9px 9px 9px;\n}\n#menu {\n border-right: 1px solid #ccc;\n background: white;\n}\n#menu > * {\n padding: 9px;\n width: 100%;\n}\n#menu [selected] {\n font-weight: bold;\n}\nbrick-card {\n padding: 9px;\n font-size: 6em;\n text-align: center;\n}\n@media (max-width: 768px) {\n #content {\n order: 1;\n }\n #menu {\n border: none;\n border-top: 1px solid #ccc;\n order: 2;\n }\n #menu > * {\n border-left: 1px solid #ccc;\n }\n #menu > *:first-child {\n border-left: none;\n }\n}", "language": "css" } ] } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
{"__v":1,"_id":"542344981972e21d7dae4e2f","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-menu/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" <script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"import\\\" href=\\\"src/brick-menu.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-menu>\\n\\t<brick-item selected>Item 1</brick-item>\\n  <brick-item>Item 2</brick-item>\\n  <brick-item>Item 3</brick-item>\\n  <brick-item>Item 4</brick-item>\\n</brick-menu>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\nClicking on one of the sets the clicked item as selected.\n\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) &amp; [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install && bower install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T07:53:24.848Z","excerpt":"A simple Brick vertical menu.","is_link":false,"link_url":"","order":7,"project":"5418e64758ac9fc73a2651cc","slug":"brick-menu","sync_unique":"","title":"brick-menu","type":"basic","updates":["5450d1f27abbbc0800a5e9fa"],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-menu

A simple Brick vertical menu.

[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-menu/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": " <script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-menu.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-menu>\n\t<brick-item selected>Item 1</brick-item>\n <brick-item>Item 2</brick-item>\n <brick-item>Item 3</brick-item>\n <brick-item>Item 4</brick-item>\n</brick-menu>", "language": "html" } ], "sidebar": true } [/block] Clicking on one of the sets the clicked item as selected. ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) &amp; [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-menu/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": " <script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-menu.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-menu>\n\t<brick-item selected>Item 1</brick-item>\n <brick-item>Item 2</brick-item>\n <brick-item>Item 3</brick-item>\n <brick-item>Item 4</brick-item>\n</brick-menu>", "language": "html" } ], "sidebar": true } [/block] Clicking on one of the sets the clicked item as selected. ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) &amp; [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
{"__v":0,"_id":"542344981972e21d7dae4e30","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-tabbar/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"import\\\" href=\\\"src/brick-tabbar.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-tabbar></brick-tabbar>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## brick-tabbar details\n\n**Attributes**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"0-0\": \"`target-event`\",\n    \"h-1\": \"Options (Default)\",\n    \"h-2\": \"Description\",\n    \"0-1\": \"string (`reveal`)\",\n    \"0-2\": \"The event that a tab fires on its target element when the tab is clicked.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n**Accessors**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Property\",\n    \"h-1\": \"Type (Default)\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`target-event`\",\n    \"1-0\": \"`tabs` (getter only)\",\n    \"0-1\": \"string (`reveal`)\",\n    \"0-2\": \"Corresponds to the `target-event` attribute.\",\n    \"1-2\": \"Returns a list of the `<brick-tabbar-tab>` elements in the `<brick-tabbar>`.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n## brick-tabbar-tab details\n\n**Attributes**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Type (Default)\",\n    \"h-2\": \"Description\",\n    \"0-2\": \"The event that a tab fires on its target element when the tab is clicked. If not specified a tab takes the event specified on the parent brick-tabbar.\",\n    \"1-2\": \"The id of the target element of this particular tab.\",\n    \"0-1\": \"string\",\n    \"1-1\": \"string\",\n    \"0-0\": \"`target-event`\",\n    \"1-0\": \"`target`\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n**Accessors**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Property\",\n    \"h-1\": \"Type (Default)\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`target-event`\",\n    \"0-1\": \"string (`reveal`)\",\n    \"0-2\": \"Corresponds to the `target-event` attribute.\",\n    \"1-2\": \"Corresponds to the `target` attrubute.\",\n    \"2-2\": \"getter: Returns the element targeted by the specific tab. setter: Assigns the tab's targeted element. (If target is assigned using this dynamic assignment, the target-selector attribute is removed.)\",\n    \"2-1\": \"node\",\n    \"1-1\": \"string\",\n    \"1-0\": \"`target`\",\n    \"2-0\": \"`targetElement`\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n**Methods**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Method\",\n    \"h-1\": \"Description\",\n    \"0-1\": \"Select the tab.\",\n    \"0-0\": \"`select()`\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\n**Events**\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Event\",\n    \"h-1\": \"Description\",\n    \"0-1\": \"Whenever a brick-tabbar-tab is clicked, and `target-event` is not otherwise specified, a `reveal` event is fired on each of its target elements. It is up to the target element to respond to this event. Some Brick Elements have default responses to the `reveal`.\",\n    \"0-0\": \"`reveal`\",\n    \"1-1\": \"The select event is fired when the tab is explicitly selected, using its `select` method.\",\n    \"1-0\": \"`select`\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install && bower install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T08:04:17.102Z","excerpt":"A Brick tabbar component.","is_link":false,"link_url":"","order":8,"project":"5418e64758ac9fc73a2651cc","slug":"brick-tabbar","sync_unique":"","title":"brick-tabbar","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-tabbar

A Brick tabbar component.

[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-tabbar/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-tabbar.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-tabbar></brick-tabbar>", "language": "html" } ], "sidebar": true } [/block] ## brick-tabbar details **Attributes** [block:parameters] { "data": { "h-0": "Attribute", "0-0": "`target-event`", "h-1": "Options (Default)", "h-2": "Description", "0-1": "string (`reveal`)", "0-2": "The event that a tab fires on its target element when the tab is clicked." }, "cols": 3, "rows": 1 } [/block] **Accessors** [block:parameters] { "data": { "h-0": "Property", "h-1": "Type (Default)", "h-2": "Description", "0-0": "`target-event`", "1-0": "`tabs` (getter only)", "0-1": "string (`reveal`)", "0-2": "Corresponds to the `target-event` attribute.", "1-2": "Returns a list of the `<brick-tabbar-tab>` elements in the `<brick-tabbar>`." }, "cols": 3, "rows": 2 } [/block] ## brick-tabbar-tab details **Attributes** [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type (Default)", "h-2": "Description", "0-2": "The event that a tab fires on its target element when the tab is clicked. If not specified a tab takes the event specified on the parent brick-tabbar.", "1-2": "The id of the target element of this particular tab.", "0-1": "string", "1-1": "string", "0-0": "`target-event`", "1-0": "`target`" }, "cols": 3, "rows": 2 } [/block] **Accessors** [block:parameters] { "data": { "h-0": "Property", "h-1": "Type (Default)", "h-2": "Description", "0-0": "`target-event`", "0-1": "string (`reveal`)", "0-2": "Corresponds to the `target-event` attribute.", "1-2": "Corresponds to the `target` attrubute.", "2-2": "getter: Returns the element targeted by the specific tab. setter: Assigns the tab's targeted element. (If target is assigned using this dynamic assignment, the target-selector attribute is removed.)", "2-1": "node", "1-1": "string", "1-0": "`target`", "2-0": "`targetElement`" }, "cols": 3, "rows": 3 } [/block] **Methods** [block:parameters] { "data": { "h-0": "Method", "h-1": "Description", "0-1": "Select the tab.", "0-0": "`select()`" }, "cols": 2, "rows": 1 } [/block] **Events** [block:parameters] { "data": { "h-0": "Event", "h-1": "Description", "0-1": "Whenever a brick-tabbar-tab is clicked, and `target-event` is not otherwise specified, a `reveal` event is fired on each of its target elements. It is up to the target element to respond to this event. Some Brick Elements have default responses to the `reveal`.", "0-0": "`reveal`", "1-1": "The select event is fired when the tab is explicitly selected, using its `select` method.", "1-0": "`select`" }, "cols": 2, "rows": 2 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-tabbar/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-tabbar.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-tabbar></brick-tabbar>", "language": "html" } ], "sidebar": true } [/block] ## brick-tabbar details **Attributes** [block:parameters] { "data": { "h-0": "Attribute", "0-0": "`target-event`", "h-1": "Options (Default)", "h-2": "Description", "0-1": "string (`reveal`)", "0-2": "The event that a tab fires on its target element when the tab is clicked." }, "cols": 3, "rows": 1 } [/block] **Accessors** [block:parameters] { "data": { "h-0": "Property", "h-1": "Type (Default)", "h-2": "Description", "0-0": "`target-event`", "1-0": "`tabs` (getter only)", "0-1": "string (`reveal`)", "0-2": "Corresponds to the `target-event` attribute.", "1-2": "Returns a list of the `<brick-tabbar-tab>` elements in the `<brick-tabbar>`." }, "cols": 3, "rows": 2 } [/block] ## brick-tabbar-tab details **Attributes** [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type (Default)", "h-2": "Description", "0-2": "The event that a tab fires on its target element when the tab is clicked. If not specified a tab takes the event specified on the parent brick-tabbar.", "1-2": "The id of the target element of this particular tab.", "0-1": "string", "1-1": "string", "0-0": "`target-event`", "1-0": "`target`" }, "cols": 3, "rows": 2 } [/block] **Accessors** [block:parameters] { "data": { "h-0": "Property", "h-1": "Type (Default)", "h-2": "Description", "0-0": "`target-event`", "0-1": "string (`reveal`)", "0-2": "Corresponds to the `target-event` attribute.", "1-2": "Corresponds to the `target` attrubute.", "2-2": "getter: Returns the element targeted by the specific tab. setter: Assigns the tab's targeted element. (If target is assigned using this dynamic assignment, the target-selector attribute is removed.)", "2-1": "node", "1-1": "string", "1-0": "`target`", "2-0": "`targetElement`" }, "cols": 3, "rows": 3 } [/block] **Methods** [block:parameters] { "data": { "h-0": "Method", "h-1": "Description", "0-1": "Select the tab.", "0-0": "`select()`" }, "cols": 2, "rows": 1 } [/block] **Events** [block:parameters] { "data": { "h-0": "Event", "h-1": "Description", "0-1": "Whenever a brick-tabbar-tab is clicked, and `target-event` is not otherwise specified, a `reveal` event is fired on each of its target elements. It is up to the target element to respond to this event. Some Brick Elements have default responses to the `reveal`.", "0-0": "`reveal`", "1-1": "The select event is fired when the tab is explicitly selected, using its `select` method.", "1-0": "`select`" }, "cols": 2, "rows": 2 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ npm install && bower install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
{"__v":0,"_id":"542344981972e21d7dae4e31","api":{"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"params":[],"url":"","auth":"never"},"body":"[block:html]\n{\n  \"html\": \"<a href=\\\"http://mozbrick.github.io/brick-storage-indexeddb/\\\" target=\\\"demo\\\" class=\\\"btn btn-primary\\\">Try It Out</a>\"\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"## Usage\\n\\n1) Import Web Components polyfill:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"bower_components/platform/platform.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"2) Import Custom Element:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"import\\\" href=\\\"src/brick-storage-indexeddb.html\\\">\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:textarea]\n{\n  \"text\": \"3) Start using it:\",\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<brick-storage-indexeddb></brick-storage-indexeddb>\",\n      \"language\": \"html\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## Options\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Options (Default)\",\n    \"h-2\": \"Description\",\n    \"0-2\": \"The database name.\",\n    \"1-2\": \"The name of the unique primary key to use for get, set and remove operations. Defaults to an auto-incrementing `id`.\",\n    \"2-2\": \"One or multiple indices which can be used to order and the results of queries which return multiple items.\",\n    \"0-0\": \"`name`\",\n    \"1-0\": \"`keyname`\",\n    \"2-0\": \"`indexname`\",\n    \"0-1\": \"string (`storage`)\",\n    \"1-1\": \"string (`id`)\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n## Methods\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Method\",\n    \"h-1\": \"Returns a promise for...\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`insert(object)`\",\n    \"0-1\": \"key of the saved object\",\n    \"0-2\": \"Insert an object.\",\n    \"1-2\": \"Insert/update an object.\",\n    \"2-2\": \"Insert/update multiple objects.\",\n    \"3-2\": \"Retrieves the object with the key.\",\n    \"4-2\": \"Deletes the object with the key.\",\n    \"5-2\": \"Retrieves multiple stored objects. If no filtering options are provided, it returns all objects.\\n\\n  * `options.start` - The first key of the results.\\n  * `options.end` - The last key of the results.\\n  * `options.count` - The number of results.\\n  * `options.offset` - The offset of the first result when set to true.\\n  * `options.orderby` - The key/index by which the results will be ordered. `options.start` and `options.end` use this key/index\\n  * `options.reverse` - Reverse the order of the results.\",\n    \"6-2\": \"Returns the number of stored objects.\",\n    \"7-2\": \"Deletes all database entries.\",\n    \"7-1\": \"undefined\",\n    \"6-1\": \"number of stored items\",\n    \"5-1\": \"array multiple objects\",\n    \"4-1\": \"undefined\",\n    \"3-1\": \"object\",\n    \"2-1\": \"-\",\n    \"1-1\": \"key of the saved object\",\n    \"1-0\": \"`set(object)`\",\n    \"2-0\": \"`setMany(objects)`\",\n    \"3-0\": \"`get(key)`\",\n    \"4-0\": \"`remove(key)`\",\n    \"5-0\": \"`getMany(options)`\",\n    \"6-0\": \"`size()`\",\n    \"7-0\": \"`clear()`\"\n  },\n  \"cols\": 3,\n  \"rows\": 8\n}\n[/block]\n## Development\n\nBrick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS.\n\nThis repository comes outfitted with a set of tools to ease the development process.\n\nTo get started:\n\n**Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ npm install -g bower gulp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**Install local dependencies:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ bower install && npm install\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nWhile developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.\n\nTo run the development server:\n  * Run `gulp server`\n  * Navigate to [http://localhost:3001](http://localhost:3001)\n\nTo simply build and lint your code, run `gulp build`.\n\nYou can also push your code to GitHub Pages by running `gulp deploy`.","category":"542344981972e21d7dae4e22","createdAt":"2014-09-17T08:11:06.462Z","excerpt":"","is_link":false,"link_url":"","order":9,"project":"5418e64758ac9fc73a2651cc","slug":"brick-storage-indexeddb","sync_unique":"","title":"brick-storage-indexeddb","type":"basic","updates":[],"user":"5250b3ad5ac09b3564000005","version":"542344981972e21d7dae4e20","childrenPages":[]}

brick-storage-indexeddb


[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-storage-indexeddb/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-storage-indexeddb.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-storage-indexeddb></brick-storage-indexeddb>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options (Default)", "h-2": "Description", "0-2": "The database name.", "1-2": "The name of the unique primary key to use for get, set and remove operations. Defaults to an auto-incrementing `id`.", "2-2": "One or multiple indices which can be used to order and the results of queries which return multiple items.", "0-0": "`name`", "1-0": "`keyname`", "2-0": "`indexname`", "0-1": "string (`storage`)", "1-1": "string (`id`)" }, "cols": 3, "rows": 3 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Returns a promise for...", "h-2": "Description", "0-0": "`insert(object)`", "0-1": "key of the saved object", "0-2": "Insert an object.", "1-2": "Insert/update an object.", "2-2": "Insert/update multiple objects.", "3-2": "Retrieves the object with the key.", "4-2": "Deletes the object with the key.", "5-2": "Retrieves multiple stored objects. If no filtering options are provided, it returns all objects.\n\n * `options.start` - The first key of the results.\n * `options.end` - The last key of the results.\n * `options.count` - The number of results.\n * `options.offset` - The offset of the first result when set to true.\n * `options.orderby` - The key/index by which the results will be ordered. `options.start` and `options.end` use this key/index\n * `options.reverse` - Reverse the order of the results.", "6-2": "Returns the number of stored objects.", "7-2": "Deletes all database entries.", "7-1": "undefined", "6-1": "number of stored items", "5-1": "array multiple objects", "4-1": "undefined", "3-1": "object", "2-1": "-", "1-1": "key of the saved object", "1-0": "`set(object)`", "2-0": "`setMany(objects)`", "3-0": "`get(key)`", "4-0": "`remove(key)`", "5-0": "`getMany(options)`", "6-0": "`size()`", "7-0": "`clear()`" }, "cols": 3, "rows": 8 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ bower install && npm install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.
[block:html] { "html": "<a href=\"http://mozbrick.github.io/brick-storage-indexeddb/\" target=\"demo\" class=\"btn btn-primary\">Try It Out</a>" } [/block] [block:textarea] { "text": "## Usage\n\n1) Import Web Components polyfill:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<script src=\"bower_components/platform/platform.js\"></script>", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "2) Import Custom Element:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<link rel=\"import\" href=\"src/brick-storage-indexeddb.html\">", "language": "html" } ], "sidebar": true } [/block] [block:textarea] { "text": "3) Start using it:", "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<brick-storage-indexeddb></brick-storage-indexeddb>", "language": "html" } ], "sidebar": true } [/block] ## Options [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Options (Default)", "h-2": "Description", "0-2": "The database name.", "1-2": "The name of the unique primary key to use for get, set and remove operations. Defaults to an auto-incrementing `id`.", "2-2": "One or multiple indices which can be used to order and the results of queries which return multiple items.", "0-0": "`name`", "1-0": "`keyname`", "2-0": "`indexname`", "0-1": "string (`storage`)", "1-1": "string (`id`)" }, "cols": 3, "rows": 3 } [/block] ## Methods [block:parameters] { "data": { "h-0": "Method", "h-1": "Returns a promise for...", "h-2": "Description", "0-0": "`insert(object)`", "0-1": "key of the saved object", "0-2": "Insert an object.", "1-2": "Insert/update an object.", "2-2": "Insert/update multiple objects.", "3-2": "Retrieves the object with the key.", "4-2": "Deletes the object with the key.", "5-2": "Retrieves multiple stored objects. If no filtering options are provided, it returns all objects.\n\n * `options.start` - The first key of the results.\n * `options.end` - The last key of the results.\n * `options.count` - The number of results.\n * `options.offset` - The offset of the first result when set to true.\n * `options.orderby` - The key/index by which the results will be ordered. `options.start` and `options.end` use this key/index\n * `options.reverse` - Reverse the order of the results.", "6-2": "Returns the number of stored objects.", "7-2": "Deletes all database entries.", "7-1": "undefined", "6-1": "number of stored items", "5-1": "array multiple objects", "4-1": "undefined", "3-1": "object", "2-1": "-", "1-1": "key of the saved object", "1-0": "`set(object)`", "2-0": "`setMany(objects)`", "3-0": "`get(key)`", "4-0": "`remove(key)`", "5-0": "`getMany(options)`", "6-0": "`size()`", "7-0": "`clear()`" }, "cols": 3, "rows": 8 } [/block] ## Development Brick components use [Stylus](http://learnboost.github.io/stylus/) to generate their CSS. This repository comes outfitted with a set of tools to ease the development process. To get started: **Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):** [block:code] { "codes": [ { "code": "$ npm install -g bower gulp", "language": "shell" } ] } [/block] **Install local dependencies:** [block:code] { "codes": [ { "code": "$ bower install && npm install", "language": "shell" } ] } [/block] While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code. To run the development server: * Run `gulp server` * Navigate to [http://localhost:3001](http://localhost:3001) To simply build and lint your code, run `gulp build`. You can also push your code to GitHub Pages by running `gulp deploy`.