buildingfirefoxos / building-blocks Goto Github PK

View Code? Open in Web Editor NEW

292.0 292.0 97.0 390.18 MB

Reusable components for Firefox OS

License: Other

HTML 54.94% CSS 38.53% JavaScript 6.53%

building-blocks's People

Contributors

Stargazers

Watchers

Forkers

dinomne o-schneider lholmquist exexzian torooproject neferetheka albertowska gnesis fredericranft rimobile joshmo555 janschmiedgen johncatley tpiasecki-polcode jacksonfdam giomaroliver evanxd olliewells nathanpc luisangonzalez julcasans agz78 k88hudson p16i coyan julianmiller montazze aleksandr-pushkarev nellynette nucliweb iddar vipinks pablobm oscareroles mbriango netmarti alefteris upirons appsbu-de gasolin renanveroneze ajsierra h14 derekroth ruththompson sebastienblanc caseyyee yunagasawa 12finger gtorodelvalle ripper2hl yitanffix ccaballero casarock denny-cnf v-supreetha psep zunibux stuartnz anthi-mi claercio sudarshanreddykurri swallowave tasfujimoto isaacweathers maxgfeller rgaiacs tomdigicon nicodel vtsatskin oscaru iosif3diana carl0sarmas dvsgnr monessem ecordoba24 imromec gopalmeena hadesain prasannamoharana dbarjs jlamim llacroix okkosh harunandreas vulpestools kugehajime jourderui chirilo stevenguz dominuskernel wpundiplomacy forging2012 olifink ykankaya arnav999

building-blocks's Issues

Have CSS performance benchmark such as adobe topcoat.io did

I think it might helps for Building Blocks refactor

live example http://bench.topcoat.io/

write script to autoprefix BuildingBlocks

The goal is generate cross platform friendly version instead of add additional cross_platform.css.

Since myth does not allow pass browser options.
use provecss could generate browser prefixes for
last 2 versions,Firefox ESR,Opera 12.1,BlackBerry 10,Android 4

We could evaluate with following command

npm install -g provecss
provecss headers.css headers.out.css --browsers all

It will add missing webkit- prefixes and keep existing moz- prefixes. So we could keep BuildingBlocks in gaia and generate cross platform friendly version.

What we need to do is

write a bash script or grunt command to automate this conversion.
remove cross_browser.css and use preprocessor

Link to "Object menu" redirects to homepage.

There is a link named "Object menu" on the sidebar that links to http://buildingfirefoxos.com/building-blocks/object-menu.html, and clicking it redirects to the home page.

Provide SVG icons

The icon images are supposedly in a vector format in the original photoshop source. It should therefore be relatively easy to provide SVG versions of the icons. Vector format icons are needed when these icons are used at larger sizes.

Last item does not appear with drawers

Hi,

When thera are a lot of items, the laster does not appear on scrolling.
Example with this code:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta charset="utf-8">

    <title>Drawer</title>

    <link rel="stylesheet" href="style/headers.css">
    <link rel="stylesheet" href="style/drawer.css">

    <link rel="stylesheet" href="icons/styles/action_icons.css">
    <link rel="stylesheet" href="icons/styles/media_icons.css">
    <link rel="stylesheet" href="icons/styles/comms_icons.css">
    <link rel="stylesheet" href="icons/styles/settings_icons.css">

    <link rel="stylesheet" href="util.css">
</head>

<body>
    <section data-type="sidebar">
        <header>
            <menu type="toolbar">
                <a href="#">Close</a>
            </menu>
            <h1>Panel</h1>
        </header>
        <nav>
            <ul>
                <li>
                    <a href="#">Item 1</a>
                </li>
                <li>
                    <a href="#">Item 2</a>
                </li>
                <li>
                    <a href="#">Item 3</a>
                </li>
                <li>
                    <a href="#">Item 4</a>
                </li>
                <li>
                    <a href="#">Item 5</a>
                </li>
                <li>
                    <a href="#">Item 6</a>
                </li>
                <li>
                    <a href="#">Item 7</a>
                </li>
                <li>
                    <a href="#">Item 8</a>
                </li>
                <li>
                    <a href="#">Item 9</a>
                </li>
                <li>
                    <a href="#">Item 10</a>
                </li>
                <li>
                    <a href="#">Item 11</a>
                </li>
                <li>
                    <a href="#">Item 12</a>
                </li>
                <li>
                    <a href="#">Item 13</a>
                </li>
                <li>
                    <a href="#">Item 14</a>
                </li>
                <li>
                    <a href="#">Item 15</a>
                </li>
                <li>
                    <a href="#">Item 16</a>
                </li>
                <li>
                    <a href="#">Item 17</a>
                </li>
                <li>
                    <a href="#">Item 18</a>
                </li>
                <li>
                    <a href="#">Item 19</a>
                </li>
                <li>
                    <a href="#">Item 20</a>
                </li>
                <li>
                    <a href="#">Item 21</a>
                </li>
                <li>
                    <a href="#">Item 22</a>
                </li>
                <li>
                    <a href="#">Item 23</a>
                </li>
                <li>
                    <a href="#">Item 24</a>
                </li>
                <li>
                    <a href="#">Item 25</a>
                </li>
            </ul>
        </nav>
    </section>

    <section id="drawer" role="region">
        <header>
            <a href="#drawer"><span class="icon icon-menu">panel</span></a>
            <h1>Drawer</h1>
        </header>
        <section></section>
    </section>
</body>

</html>
</code>

Rename the project

The project name "Building Firefox OS" is completely misleading since the project has nothing to do with building the operating system but rather is about building Apps for Firefox OS.

Supported codepages info incomplete in some fonts

Fira Sans Bold and Medium are the only ones that have all supported codepages marked (CP-125...0,1,2,3,4,7,8)

Whereas:
Light, Light-Italic,
Regular, Regular-Italic,
Medium-Italic,
and Bold-Italic
all have only CP-125...0,2,4,7 marked in font metadata.

The issue is present in both OTF and TTF versions.

Action Icons notshowing well on Tabs

i had to change actions_icons.css
Line 54:

[role="tablist"].bottom > [role="tab"] > a.action-icon:before {
top: 0.5rem;
}

[role="tablist"].bottom > [role="tab"] > a.action-icon:before {
margin: 0.5rem 0 0 -1.5rem;
}

Browser detection

Integrate a js snippet like this: https://gist.github.com/Mte90/11087393
the script will be add a class in the body like Modernizr.

Convert CSS to LESS

You should make the code available as LESS files, if you need help, just write me.

Small fix in markup (style_unstable/tabs/index.html)

While running the Validator in the Firefox Marketplace it showed this warning:

Markup parsing error

Warning: The markup file has more closing tags than it has opening tags.
style_unstable/tabs/index.html
74
75

Header search

The head is wrongly positioned.

evaluate write CSS with myth preprocessor

myth is a CSS pre-processor act like CSS polyfill
https://github.com/segmentio/myth

Looks more fit for our concerns.

Myth lets you write pure CSS while still giving you the benefits of tools like LESS and Sass. You can still use variables and math functions

benifits:

real css, so no interpreter needed in development phase
can remove browser-specific prefix, which could be generated by pre-processor.
css variable will be pre-processed for production code, less performance impact

need to do:

check if it's able to generate specific-browser prefix (ex: pass 'ff 28' for ff only prefix)
segmentio/myth#16 (@basiclines nice to see you again 😄 )

Suggestion: a more friendly URL to the zip file for Fira Sans?

I may be barking up the wrong tree here, but in short, hosting the publicly downloadable files on Box gives nearly unusable URLs for the direct links.

Allow me to provide some context. I'm attempting to add Fira to homebrew-cask's font repo at https://github.com/caskroom/homebrew-fonts, which allows users to download and install fonts from the command line.

Here's an example file: https://github.com/caskroom/homebrew-fonts/blob/master/Casks/font-source-sans-pro.rb

The address given on the Fira Typeface page is a convenience URL that takes the user to a download page: https://mozilla.box.com/s/4dhgg18ybvlqojoi10zw

The direct link is

https://dl.boxcloud.com/bc/2/2dd8dfd76cc49aa8aa38833d94d38f40/oxsr6n5bVQhyic6N7TfrMf0sVTkQUOBIH0HsZBGRDI0si84Chpt_3ZjzaZYMPOwbyyATOQjCMtuz5i34lvwOP6jpszWlLv8WEdznyZPTapEL7jhsMH-dydGXCG7uH9b3oAP7jkXgaUO2k-1Qz1gBVmHEBw0D4q0oEnYMytv70dHUDhaA9cvIdhSFLIX4G02LEO_7eN1Ejro7hHZYHl4AQ7zdRcORXq1O4hZjTyk4euhn5w__6RtEwHVun-CD5A40jHEl7L1jbhrvCev9t5_cuJB2Xd2thFDQ2LxgxdSjtwmk59sc9drmGpIcLr9zbXhYiDFJG_qnFTjdL9MyNlqBy7PbSD0e5YcSQxZdcH5DLHIReMPNB1V17dFB4vfNtkfIQPpvIB74a-r4Vt3Tw9qhSCwhsIT7tifx6p42OWJH-uEfa0Lfqnd9zQqKA4UtSmVU92QegSNM5sJ1ajS7PxL4tRloS7gS4dItpGGYimgXQ6QlayacVdkAdnnfTvjqHkA6kxTCwOn03bEiYrveljqmHxS0JUpCZXcJtdvuvlw3wKvleOWK3slCIjUi1xW3CIjKQes27j_v6FYkXDVoI1Z8hgDU_ijGxISjlBrsKGWMsrlCNfwbCPuf8uLVhsSYca7XEdsnEqoV05kIQHucfHThTKTa31fvwmqo41uQe5z65t87y53cHVDzp3aeS_6SPyXFRw8m5TEOSbTDQOGvOF8sAm6wnqEu_d7FpNqJ7Wkd6IzNecQB7iAsOOgZhg_zzvSL/0d13d936d57721f3f26072d688ec5be79da7845e5269daf0c322526e58f64e83/

(currently—I expect these long URLs are tokenized and expire, making it even harder to download)

But, you can't actually go to that URL. You get an error message:

The link you're trying to access can't be used to share files. Please ask the file owner to provide you with a shared link instead. Contact Box Support if you need help.

Structured CSS via @import and pre-processor

for case like https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/blob/v2/style/headers.css

ex:

headers.css

/* headers.css */
@import url("headers/layout.css");
@import url("headers/layout_mobile.css");
@import url("headers/layout_tablet.css");

The PROS:

clean structured
follow CSS standard
developer does not have to include extra styles if we support more form factors

The CONS:

will introduce performance issue in production

Fortunately we can fix it by use pre-processor to detect @import statement and inline the css files in production.

There are some script like https://github.com/simme/rework-importer can interpret and inline all @import css into single file.

With pre-processor, the basic css file will be inlined to single header.css file

/* headers.css */
headers {
}
/* mobile style */
headers .mobile {
}
/* tablet style */
@media (min-width: 768px) and (orientation: portrait) {
  headers {
  }
}

And we can pass some conditions for production mode, for example: pass mobile type to the build system, pre-processor could pick layout.css and layout_mobile.css but ignore layout_tablet.css, generate an inline header.css.

The PROS:

previous PROS
reduce size
better performance by move out unnecessary styles

The CONS:

need enhance the pre-processor to make it possible

@rnowm does this proposal reasonable or useful for Building-Blocks?

Update Building Blocks to pass the Content Security Policy of Firefox Marketplace

Steps to reproduce: Create a zip file with the repository contents, update to the Validator in Firefox Marketplace and check the results:

Now it shows some messages "CSP Violation Detected" because there is <script> tags inside HTML pages, JavaScript code in forms (onsubmit="return false;") and setTimeout (although this one is only because they want a function as a parameter and the parser can't distinguish between Javascript functions or strings).

It think is important to check these messages because many people are using the Building Blocks and then discovers there are 'violations' caused by Building Blocks elements.

Example app and files does not follow Firefox OS Style Convention

When running the demo app and using the 'block'.css files the css is not always correct.
The best example, and actually the only one I know, is the header.

In the actual headers.css file there is a line when describing "section[role="region"] > header:first-child {" which says: "background-color: #F97C17;".

Obviously this will not yield the gradient and feel of the header.png which should be used. I don't know from where but I have another headers.css which instead has: " background: url(headers/images/ui/header.png) repeat-x 0 0;
background-size: auto 100%;"

This gives the correct result. But there might be more errors to the .css-files, considering there are at least one.
Is this meant to be, or should it maybe be changed?

mention that this is deprecated

mention in the readme.md that the building blocks will be replaced with gaia-elements and further develeopment is unneccesary

Incomplete tarball (Bower)

(I cleaned the cache and removed and readded the Building Blocks to Bower before submitting this issue.)

After running

$ bower install
bower not-cached git://github.com/buildingfirefoxos/Building-Blocks.git#~1.3.1
bower resolve git://github.com/buildingfirefoxos/Building-Blocks.git#~1.3.1
bower download https://github.com/buildingfirefoxos/Building-Blocks/archive/v1.3.1.tar.gz
bower extract building-blocks#~1.3.1 archive.tar.gz
bower invalid-meta building-blocks is missing "main" entry in bower.json
bower invalid-meta building-blocks is missing "ignore" entry in bower.json
bower resolved git://github.com/buildingfirefoxos/Building-Blocks.git#1.3.1
bower install building-blocks#1.3.1

building-blocks#1.3.1 bower_components/building-blocks

I have 19 files in the 'style' folder.

Running

wget https://github.com/buildingfirefoxos/Building-Blocks/archive/v1.3.1.tar.gz

specified by Bower, does the same (so I suspect it is not a Bower or a cache problem).

However, just downloading the zip file seems to have all the files (45) in the 'style' folder.

Web site should explain its relation to Mozilla.org/com

The web site is in a separate domain 'buildingfirefoxos.com". However, it has a Mozilla style header. Is the web site related to Mozilla? Is it a Mozilla project?

The web site should explain the relation of the project to Mozilla.

Explain the approach used by building blocks

The page http://buildingfirefoxos.com/building-blocks/ needs to start with an explanation of the system of HTML elements, CSS files and Image Sprites that are proposed for use. The section should not immediately jump to the example of action-items.html.

The approach proposed by this site is significantly more complicated than a straight forwards approach using HTML. The use of a single icon for the configure menu, for example, requires a slew of CSS files and a huge image sprite; in old school HTML this would be a single <button...> element and one, small, image. The explanation should give an indication of how your approach structures HTML elements, CSS classes (and their grouping into files) and the PNG sprites for the different category of elements. The explanation should also give some of the reasoning for and justification of this approach. Image sprites, for example, originated as a response to the latency of HTTP requests (a single request could be made for all the icon images which would be used on a site); a web app on an actual device has completely different tradeoffs (zero latency, severe memory constraints) making it unclear why the web approach would still be considered suitable for apps on a physical device.

tagging version for reuse

Please consider have tags such as v1.3.x, the first 2 digits correspondent to Firefox OS main version, the third is for Building-Blocks.

There're 2 related issues fired under mozilla-b2g/Gaia-UI-Building-Blocks:

Project should start using git tags mozilla-b2g/Gaia-UI-Building-Blocks#68
make Building-Blocks bower installable mozilla-b2g/Gaia-UI-Building-Blocks#76

And would you consider delete that unmaintained repository?

Typo error "buton"

In the page http://buildingfirefoxos.com/building-blocks/action-menu.html
In Note field:
<button type="buton">
Maybe:
<button type="button">

Wrong icon position

With the last updates the css for the action_icons.png is different.
Needed a check for all the icon used in the components.

seperate demo app code from library code

In my opinion this should be like a library that you can conveniently include it to your app without having to strip the demo app files first.

Clarify the audience(s) for your site

The Building Blocks section of the site seems to be for App developers, probably primarily Gaia developers (is the default color scheme intended only for more merely required of Gaia apps?) but possibly also third party developers.

The Transtions section of the site seems mostly geared at the design of the main app since most transtions are out of the hands of developers of regular Apps. The situation is confusing, making readers wonder who the target audience might be.

The Download section of the site includes access to the Font file something that is presumably installed on all devices and should therefore not be used by App developers.

So presumably this site is acting in several different roles for several different audiences. That needs to be clarified in general and specified explicitly when a section only targets a certain group.

Evaluate way to remove not used BB styles per app in build time

from #36 copying the BB to each app on build time and do something like:
https://github.com/giakki/uncss

to remove per app unused styles.

Provide a point of contact

Your work, and the general confusion over styling and app resources for Firefox OS, raises many questions.

Neither the web site nor the GitHub repo provide any indication of where conversations, questions, and discussion of this work should take place. It would be useful to have that information both in the Readme.md of the GitHub site and on the website.

Don't abuse WAI-ARIA

Hello,

a few days ago, a (blind) QA of Mozilla, Marco Zehe, published some guidelines for styling Firefox OS Apps accessible on his blog.

You can read about it in these articles:

Please respect them in a further version of Building Blocks, since documentation like the Quick Guide for Firefox OS Development by André Garzia base upon your work. So you're bearing a responsibility ;-)

Thanks

Documentation out of date

Hello,

thanks for this repo! I appreciate it.

However, it's partially out-of-date. For example, I want to use the mediastorage icon as described in the online documentation but it's not available in the .css any more.

So please update your information!

Regards

Ryuno-Ki

Remove the inline css in app.html

scrollable class and firefox desktop

I have see that the scrollable class in Firefox desktop insert the scroll and in firefox for android create some problems.

There is a way for fix this?

Blocks not playing well together with Brick components

I just came across a problem when I was mixing together Building Blocks (specifically headers) and components from Mozilla's Brick http://mozilla.github.io/brick/ (specifically x-layout).

Turns out these two don't work that well together because the CSS selectors for Building Blocks are too specific. For example, I was able to fix some things by replacing every instance of section[role=region] with [role=region].

My question: do blocks need to have so specific selectors? Could these be relaxed a bit so that they can play better with other libraries?

I guess a longer-term question would be: do Mozilla/FirefoxOS have plans to turn Building Blocks into x-tag elements?

Building Blocks as a framework

Hello everyone. I have been using building blocks for sometimes and I compare it with Ionic, App Framework and JQ mobile. Building Blocks is a good starting point for an mobile app (firefox os especially) but after developing 2 apps for firefox os and trying Ionic and frameworks like it I realized that Building Blocks needs it too. My suggestion is making a version of Building Blocks wich runs with angular Js or EmberJs.

Missing cyrillic letters for Bulgarian (and Macedonian) in Fira fonts

Please add uni0400 & uni0450 (small & capital cyrillic i with grave) needed for Bulgarian and Macedonian, and uni040D & uni045D (small & capital cyrillic ie with grave) needed for Macedonian languages. Add them in Fira fonts, please!

evaluate BEM naming convention

I noticed that the css selectors does not changed a lot in https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/tree/v2/style/headers

I'd like to hear @rnowm your opinion of adopting some syntax naming rules such as BEM
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

With this naming rule, we could easier recognize what this selector does, use more flatten css selector to applying styles, avoid cascade selector error which csslint reports.

With BEM naming style, the bb-header might looks like

.bb-header /* the block */
.bb-header__subheader /* the block with element */
.bb-header__menu
.bb-header__menu--action  /* the block with element and modifier */

For class inheritance, LESS can also come to help

.bb-header menu {
  height: 100%;
  padding: 0;
  margin: 0;
}

.bb-header__menu
@import bb-header

Broken link in readme

The link to buildingfirefoxos.com is broken in the readme file. It currently goes to a github 404 page.

Slider/drawer menu auto-expanded on larger displays.

In order to make applications built with building blocks useful outside of just the mobile phone, certain elements should responsively adjust when the users display is larger.

The main thing that comes to mind is the slider/drawer menu. On a tablet or desktop display, the side-bar content should have the ability to be permanently displayed while the main content area can be used as well.

Does this feature already exist (is there some setting to enable it?)? If not, are there plans to add this feature?

Add that you need "seekbars.js" to the documentation

On the docs page here:
http://buildingfirefoxos.com/building-blocks/seek-bars.html

There should be a note to add in seekbars.js in your app as well.