1148659 - Update CSS to match component styles

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Bugzilla Lite, defect)

Comment 1

[Dale Harvey (:daleharvey)]

Hey Michael, I heard you were developing one of the lightsaber applications and had done a good job on copying across the shared/component styling. For Bugzilla Lite I dont want to use components until I can get them working in a cross browser way, http://v1.bzlite.com/create/ works on the web / in chrome and I want it to stay that way.

I need to fix up the styling to be consistent however, got a pointer to the app you have been building, or and approaches to how to get the consistent styling? Cheers

Comment 2

[Michael Henretty [:mikehenrty][:mhenretty]]

The application I have been building is the Hacker Marketplace [1], and it actually does use gaia web components. So I haven't been copying the styles, but just using and improving what's there. As such it only works with features like web components and fat arrow syntax enabled :/

It sounds like you need the style guide for web components. Amy Lee has that, so I'm ni? her here to get that attached.

Also, you probably know this but you can see all the web components in action here [2]. That is a little out of date with recent updates to gaia WC, but we should be updating that soon.

Feel free to ni? again if you have more questions from me. Otherwise I'll let Amy upload the style guide.

1.) https://github.com/fxos/directory
2.) http://gaia-components.github.io/gaia-components/

Comment 3

[Amy Lee [:amylee] UX]

(In reply to Michael Henretty [:mhenretty] from comment #2)
> The application I have been building is the Hacker Marketplace [1], and it
> actually does use gaia web components. So I haven't been copying the styles,
> but just using and improving what's there. As such it only works with
> features like web components and fat arrow syntax enabled :/
> 
> It sounds like you need the style guide for web components. Amy Lee has
> that, so I'm ni? her here to get that attached.
> 
> Also, you probably know this but you can see all the web components in
> action here [2]. That is a little out of date with recent updates to gaia
> WC, but we should be updating that soon.
> 
> Feel free to ni? again if you have more questions from me. Otherwise I'll
> let Amy upload the style guide.
> 
> 1.) https://github.com/fxos/directory
> 2.) http://gaia-components.github.io/gaia-components/

Hi, 

There isn't an official style guide for the web components. I have a photoshop file of the components that are being used. I'll update the spec with style specifications. In the meantime, I think you can use the current spec as a reference to spacing elements. The rem measurements are in CSS pixels so for the Flame device it would be rems x1.5. Let me know if you have any questions.

Comment 4

[Amy Lee [:amylee] UX]

An FYI, the header component is standard across the OS so you can reference the style of any current header.

Comment 5

[Amy Lee [:amylee] UX]

Hi Dale, 

I've updated the visual spec to include component styles/measurements to help with CSS styling. Let me know if you have any questions. 

Updated spec is attached to the meta bug: https://bug1134701.bugzilla.mozilla.org/attachment.cgi?id=8586260

Comment 6

[Dale Harvey (:daleharvey)]

Attachment: https://github.com/mozilla-b2g/bzlite/pull/3

Comment 7

[Doug Sherk (:drs) (inactive)]

Comment on attachment 8587463 [details] [review]
https://github.com/mozilla-b2g/bzlite/pull/3

Looks good, but my review wasn't super thorough here since it's almost all CSS changes. It's a bit unfortunate that we couldn't at least re-use some of the terminology from WC, like CSS var naming.

Comment 8

[Dale Harvey (:daleharvey)]

Cheers, As mentioned on IRC, avoiding new features that will give cross browser issues for now

Landed in: https://github.com/mozilla-b2g/bzlite/commit/aa8a17c926bf4a4b500ee812792bf2e1fb430053