mozbrick / brick Goto Github PK

UI Web Components for Modern Web Apps

License: Other

JavaScript 89.91% CSS 10.09%

brick's Introduction

Brick

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.

Install

Brick can be installed using the Bower package manager:

bower install mozbrick/brick

To use Brick in your project, place the following in the <head> of your main HTML:

<script src="bower_components/brick/dist/platform/platform.js"></script>
<link rel="import" href="bower_components/brick/dist/brick.html">

If you are already using Polymer, platform.js or a web browser that supports Web Components, you do not need the above <script> tag.

Development

Brick (and its components) are developed using tools built in JavaScript running on node.js.

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:

npm install -g bower gulp

Building Brick from source

Once you have the prerequisites, you're ready to clone and build from source.

Run the following:

git clone [email protected]:mozbrick/brick.git
cd brick
npm install
bower install
gulp build

If you'd like to work on all the Brick components at once, try this handy script:

#!/bin/bash
repos=(
  brick
  brick-action
  brick-appbar
  brick-button
  brick-calendar
  brick-common
  brick-deck
  brick-dialog
  brick-flipbox
  brick-form
  brick-input
  brick-layout
  brick-listview
  brick-menu
  brick-storage-indexeddb
  brick-tabbar
)
for repo in "${repos[@]}"
do
  git clone https://github.com/mozbrick/$repo.git;
done

Components

Here is a list of the components currently in the primary distribution of Brick:

If you encounter issues with a component, please file issues against the individual component repositories.

brick's People

Contributors

Stargazers

Watchers

Forkers

pennyfx bussiere arnaldoroman garmjs vaishaksuresh benzwjian vivekjishtu sanghoo utkarshx stubben iikati pochadri pysjp libin shidhincr jordan-carl timwright12 lokidg yomigits nicholasareed soyjavi fabiomagnoni yaroslavb havefuninlearning robertsky123 allmywant arasbm sergslon jibiabraham lholmquist nvdnkpr pedroso alain-andre zedric cyrke hlj mohanraaj agiza davgit intfrr signpostmarv rnowm vinodkashyap ridjohansen benjohnston beclossakp jeffgca butelo tinhspace bkardell gkoberger anupamme rakhy mythmon eakcantey nschonni hero76 jdmathur ravan91 devildeveloper kublaj brettsenna josephilipraja juno5460 brentini jdgomezb vinodj re-enter-rupok roachhd anurajricky tehsis rakesh-mohanta watilde c-ong chambita web5design marti1125 shaohua p0ffsrule chrislim robing potch ryanseys moberemk abhishekvp scottmichaud oidc-joe parikhutsav nrmjba rodms10 mzaman islobods33 enterprizer imclab hihihippp michaelwiss dotch iyangming sschepis mk-pmb

brick's Issues

Make?

Hey guys

Make?

In nodeland??

I thought Grunt was the commonly accepted solution to the building-phase-problem.

:-)

x-iconbutton tag does not preserve CSS class

steps to reproduce:

create a back button <x-iconbutton class="back">Back</x-iconbutton>
inspect the element in the browser and see that it has turned into <span class="x-iconbutton-label">
note that the CSS class has not been carried over into the span tag

Give <card>s a 'show' method.

This method will simply trigger a 'show' event on that card.

Add a nuget package

Hi,

Do you think it can be possible to maintain a Nuget package ?

Thanks.

DatePicker crashes on Firefox

"http://mozilla.github.io/brick/dist/brick.js:2" I got this crash when opening DatePicker demo page everytime with Firefox.

x-calendar quoting bug for Date object

Why does the following work

<x-calendar chosen='[["2013-07-10", "2013-07-11"]]' controls multiple></x-calendar>

and the following doesn't work?

<x-calendar chosen="[['2013-07-10', '2013-07-11']]" controls multiple></x-calendar>

double/single quote assignment for attributes and arrays should not affect whether it is a valid Date object?

Move callbacks to events where possible

Hopefully this will actually simplify code, and allow for easier extension.

x-tooltips stretch parent containers even when not visible

When x-tooltips are not visible, they still affect document flow, causing parent containers to stretch if the tooltip is too large.

Attempts at setting display:none when hidden remove capability for CSS transitions (short of using requestAnimationFrame, which isn't supported on Android browsers). Currently looking into a width/height 0 based approach.

Add Hamburger-style menu shift component

Would be a nice companion to Deck.

Layout demo flexbox issues in FF18

At the moment, if the section of an x-layout tag causes overflow, it won't constrain its height to fit the phone demo area on the demo page in FF18 (ie: old flexbox support). However, it will act fine in the testing page in component/layout/demo/testpage.html.

Since release is so close and this is a demo page only issue, this isn't a major issue, but I'm filing this issue as a reminder to go back and debug it later.

Allow clicking on a specific date to create an event

It would be good to allow a double-tap/click to open an event option where we can enter information. It would be even better if the event could allow me to add in custom HTML (if I want to include <ul><li></li></ul>, <h1>, <form> etc)

Localizing x-calendar

Need to add support for other languages for month names in x-calendar, either with more labels or with the option to add custom labels

event.returnValue is deprecated

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

calendar component not accessible

the calendar component (http://mozilla.github.io/brick/demos/calendar/index.html) is an interactive data table, but is not marked up as one and therefore the relationships between the data and headers is not conveyed (amongst other things) Suggest looking at the ARIA date picker design pattern http://www.w3.org/WAI/PF/aria-practices/#datepicker for info on making it understandable/usable accessibility wise

`x-calendar` `controls` attribute doesn't seem to work

Leaving off the controls attribute doesn't seem to affect whether makeControls is called, and controls are always added.

Question? <x-slide></x-slide> internal scroll

Could I add internal scroll using overflow: scroll ?
and also I have tabs with different height.

Rename show/hide/toggleTooltip to just their simple names, 'show', 'hide', 'toggle'.

Add Date Range selection to x-calendar

I highly recommend adding proper date range selection to the x-calendar component as selecting multiple dates one by one is not what users expect. Every calendar "widget" should provide this feature (and I guess most of the good ones do).

x-calendar drag toggling does not work on mobile devices

When dragging across dates in mobile devices, dates are not toggled like when viewed in desktop browsers. This is due to an issue in the touchenter vs mouseenter logic, and will be addressed soon.

website is down

I just noticed http://mozilla.github.io/brick/index.html is down. I don’t know how else to contact you, so I create this issue hoping you get an email. Here is the error on homepage:

Error 503 Backend is unhealthy

Backend is unhealthy
Guru Meditation:

XID: 3654671732

Varnish cache server

Move each component into its own repo

Once the components are moved into individual repos I can register them with Bower and add them to the X-Tag Registry.

There are also other advantages like versioning and issue tracking on a per element basis.

Calendar Control - IE10 Bug

On the calendar "Basic calendar with navigation controls" demo here:
http://mozilla.github.io/brick/demos/calendar/index.html

If you click the previous month arrow several times eventually the calendar will disappear and insert a huge grey line through the center of the entire page (see attached image).

System is Windows 7 - IE 10.0.9200

demo bug in home

the content is overflow.

Styling x-tabbar-tab

How to style x-tabbar-tab? Neither

x-tabbar-tab {
    color: #fff;
    background: #7cc4e7;
}

nor

#x-tabbar-tab-custom {
    color: #fff;
    background: #7cc4e7;
}

seem to work.

Integration with other form elements could stand some work

Hello. First, thanks for the open stuff. I think I'd much prefer this library to some others.

Now, here's the trouble. On a simple, existing, uninteresting form I added a date picker. It works! What it doesn't (yet) do is "integrate": by that I mean crafting style to match the existing form isn't obvious, what with some extra wrapping with their own bordering and padding. There's also some data format hinting in the pick element that should really be matched on other elements (email, number input) but we don't have info how to do that.

Your work is beta so in principle things like this are TODO. I'm just ahead of the curve. ;-) Thank you!

rename x-view to x-layout

reserving name 'view' for an MVC-inspired usage.

On brick's website, overflow: hidden the flipping

Since the demo shows a stylized phone, the transition should probably not break out of the phone's screen.

Though admittedly, that would be pretty cool in real life.

Layout and Decks together don't seem to work.

I tried to embed a deck inside a layout and while the header/footer displayed, the deck content did not.

Code:

    <header>
        I'm the header!
    </header>
    <section>

        <x-deck id="mainDeck">
            <x-card>
                0
                <span>I'm the first card!</span>
            </x-card>
            <x-card >
                1
                These cards can contain any markup!<br>

            </x-card>
            <x-card>
                2
            </x-card>
        </x-deck>
    </section>

    <footer>
        <button id="prevButton">Previous</button>
        <button id="nextButton">Next</button>
    </footer>

</x-layout>

Note - it works in Firefox, but in Chrome the deck content is hidden.

Automated testing

Let's get a basic presence on Travis, and expand from there! I'll start with the basic "does the current brick bundle even load without JS errors" heartbeat.

Add Ideal Browser Support

Is this a latest version of modern browsers only thing? Or are we aiming to support ie8+?

x-deck and x-slide should respond to swipe gesture

First let me tell you, I think brick is a very cool project. In order to learn more about brick, I started developing a simple Firefox OS app using it. I used x-slide, and then pushed to the phone -- thinking to myself: it is all going to work out of the box. Little did I know, it seems that brick currently does not handle swipe gestures at all.

When someone uses a slide deck, they expect to be able to naturally swipe left and right -- when the app runs on a touch device.

Here are two questions for you:

what are your current plans for adding swipe gestures, to the x-slide and x-deck
how do you envision this kind of event handling be added to brick elements in general?

And last, I like to express my interest in helping to find a solution and implement it. So, please let me know what your thoughts are, and if you are open to community contributions. Thanks!

Brick logo is missing on Android stock browser

This affects Android stock browser as recent as the Galaxy S4 running Android 4.3

Augment the x-layout demo to show advanced features

We should be showing off the more advanced features of x-layout, so people can see that it is more that just CSS with semantics.

Download link broken

The download link at http://mozilla.github.io/brick/download.html is broken

create mortar-angular-list-detail

Safari no-go

Demos work great for me in Win7 Firefox, but not in Safari (not Win7, OS X nor iOS).

Not being able to play with it in a mobile browser makes this a nonstarter for me at the moment.

clicking dates in next/previous month picks wrong date

On http://mozilla.github.io/brick/demos/datepicker/index.html , click to bring up the date picker, then click a grayed-out date from the next or previous month; for example, in September 2013, click the grayed-out 2 for October 2nd.

Result: instead of picking 2013-10-02, or advancing to October without selecting anything, it advances to October and picks whatever date is underneath where you clicked in the new month, in this case 2013-10-30. That's clearly the wrong behavior. If your click location is still gray in the new month, it does something weirder like picking a random date from that column; for example, in December 2013 click, click January 4 and it jumps to Feb 1st!

This in Firefox 23.0 on Ubuntu 13.04. The "Forcing polyfill UI view" does the right thing in Chromium 28.0.1500.71 Ubuntu 13.04

Homepage throwing JS error in Chrome

Getting this in Chrome dev tools and the 'flip' demo won't work:

Uncaught TypeError: Cannot read property 'labels' of undefined brick.js:2

Migrate component styles to Stylus?

Sass is nice! except that it adds ruby to our build stack. Would be awesome to move to Stylus, a JS-based CSS preprocessor. Thoughts?

17 Is the calendar Demo broken ? It always displays only 1 date

I went to the calendar demo in this url

http://mozilla.github.io/brick/component/calendar/demo/index.html

There I can see only one date for each examples. Is it a bug ?

Syntax Error in demo in Google Chrome

I use Chrome 28.0.1500.95 m and brick's demo page is failing with console message
Uncaught TypeError: Cannot read property 'labels' of undefined brick.js:2

Add more obvious way to find more demos

Currently, demos live under Documentation - can we add something to make that more clear?

Components Sidebar Dropping too low

The Components Sidebar is positioned a bit too low and as such tooltip menu option is hidden while scrolling down the page. This might be resolved possibly reducing the top margin for the Components Menu.

Attaching a screenshot of the page to better explain the issue:-

Make x-calendar/x-datepicker responsive

Right now, the days of x-calendars are a fixed size. We should change this to be more responsive using percentages of the container calendar.

May want to refactor the calendar content sizes to be based on the calendar's size instead of the other way around for a more responsive approach.

Missing font from download?

Running a simple calendar demo I see this in the Network panel:

http://localhost/testingzone/bricktests/brick/OpenSans-SemiBold.ttf

The font is not included with the download. It certainly doesn't prevent me from playing with Brick, but I assume that this font should be removed from the CSS perhaps? Or included w/ the download?

Rename 'suffledeck' to 'deck' and 'shuffledeck-slide' to 'card'

It turns out this component maps well to an existing metaphor, let's use it!

Separate Functional and Visible styles

I'd like each component to have a functional style file and a visual style file that we can optionally leave out in favor of other skins.

I'm volunteering to do this separation as part of the stylus migration.

Font filename misspelled

OpenSans-Semibold.ttf in dist/ needs to have an uppercase "b" in "bold". Compare what the CSS file says, and use the exact same spelling :)

@mattbasta pointed it out to me that my app has a 404, and this was why.

Thanks!

icon button is not a button

no semantics are exposed in accessibility layer ie no role. suggest using native HTML <button> input type=button etc. If that is not an option refer to the ARIA design pattern for a button http://www.w3.org/WAI/PF/aria-practices/#button for making custom buttons accessible.