WIP: Ratchet 2

[connors]

The initial launch of Ratchet aimed to provide the simplest way to prototype iPhone apps in HTML, CSS, and JavaScript. It's been pretty quiet around here ever since that initial release but this pull request should give some insight into the upcoming 2.0 release.

This pull request doesn't reflect the final feature set or todo list for version 2.0. We'll be updating the pr with new features and todos as we continue development. Think of this as a living document.

General

• Create an base theme.
• Create an iOS 7 platform theme.
• Create an Android platform theme.
• Docs built on Jekyll.
• Use pygments in Jekyll instead of prettify.js.
• Switch from a Makefile to using Grunt.
• Updated design for the docs.

CSS

With 2.0, Ratchet is going to be rewritten in SASS. Among other things, this will allow for greater flexibility in theming the look a feel of your prototypes. We'll also be pruning the CSS to remove unneeded code.

• SASS rewrite
• Cut down on the use of attribute selectors. Performance isn't there yet.
• Write a simple set of mixins to make development easier.
• Rename some component classes to be more intuitive.
• Remove the old reset css and use normalize.css instead.
• Remove excess gradients and shadows.
• Remove docs folder
• General clean up.
• Update Normalize to version 3.

Nav bars

• Now uses the class .bar-nav.
• iOS theme: Nav bars are now transparent to allow the apps content to bleed through.
• .content now uses padding-top and padding-bottom to allow content to bleed through the nav bar.
• Directional buttons are deprecated in favor of more flexible buttons.
• Use Ratchicons in buttons

Tab bars

• Support for text only tab bars.
• Simplify tab bar markup.
• Use Rachticons for tabs.
• iOS Theme: Tab bars are now transparent to allow the apps content to bleed through.

Standard bars

• Properly add support for .footer-secondary and .footer-secondary-tab

Segmented controllers

• Go back to using the .active class
• Simplify markup and css

Table views

• Rename to .table-view.
• iOS theme: Use hairline dividers.
• Include active states to list items when :active.
• Support for left aligned media objects (images or icons).

Buttons

• Additional styles for outlined and filled buttons.
• Buttons can now include Ratchicons.
• Support for button element.
• Add link button style
• Change the base class and prefix to .btn

Badges

• Use class name .badge instead of .count
• Support for normal and inverted counts

Popovers

• Popovers now use normal .bar-nav
• iOS theme: Backdrop element now has a dark overlay added to offset the popover element.

Forms

• Support full width forms that go edge to edge.

Toggles

• Use labels and checkboxes for the markup.
• Create base style toggle
• Create iOS7 style toggle
• Create Android style toggle

Push

• iOS theme: Update push animations based on iOS 7.

Headings & body copy

• Add support for headings
• Add support for paragraphs

Ratchicons

With 2.0 we'll be introducing Ratchicons, custom designed icons for Ratchet. We'll be adding a base set and continuing to expand as we go.

• Include base set of Ratchicons.

Themes

• Default base theme.
• Platform iOS 7 theme.
• Platform Android theme.

[benschwarz]

Looks like you're making great progress here!

[nghuuphuoc]

Really looking forward the v2!

[zlatanvasovic]

@benschwarz @nghuuphuoc Good to see that. ^^

[dmackerman]

Good job dude. Was actually thinking about tackling this myself.

[18601673727]

Good job, You guys are making miracle!

[emkman]

So excited for this latest progress, especially SASS and iOS 7 theme. Thanks guys!

[benschwarz]

While you're all tied up 'making miracles' @connors, can I help?

[zlatanvasovic]

@benschwarz Send pull requests...

[dmackerman]

@connors I was going to take a stab at:

• Include active states to list items when :active.
• Support for images in lists.

Just want to make sure I'm not working over you.

[connors]

Glad to see people are excited!

@benschwarz Haha yeah dude there's plenty to do so if anything in the list above strikes you, please go for it. The only big thing not listed up there that I'd love to include is a side drawer ala, Snap.js. Could be legit to do our own but I'm tempted to just use snap.js.

@dmackerman I haven't jumped into that work yet but it's super important. Feel free to take a stab at it.

[nghuuphuoc]

+1 for a drawer. We can use Snap.js to save the development time

[zlatanvasovic]

@connors You should look at old issues, and call them confirmed or wont fix. I think that they can be closed, because of many things changed.

[connors]

@zdroid Yep I plan on going through and closing and organizing past issues soon.

[zlatanvasovic]

@connors kk

[connors]

Hey folks, just a heads up, I plan on doing a redesign and refactor of the docs soon. After that is feeling a bit more solid I'll switch the default branch to 2.0.0-wip until v2 is shipped. With that change I'll hook up David to watch our dependencies.

[rmetzler]

is browser support for Android included in v2.0? #90

[zlatanvasovic]

@rmetzler I asked @connors to work on Android version. You should wait a some time, but Android will be supported anytime.

[akre54]

+1 for Android support from me too. Will help out with anything if needed.

[yocontra]

Is the standard class for an activated list item .selected or .active? I've seen .active in everything but segmented-controller where it is .selected

[zlatanvasovic]

Hey @connors, Eric is right. .active or .selected? What's better by
iOS7 HIG?

2013/10/25 Eric Schoffstall notifications@github.com

Is the standard class for an activated list item .selected or .active?
I've seen .active in everything but segmented-controller where it is
.selected

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/213#issuecomment-27128545
.

Zlatan Vasović - ZDroid

[connors]

@contra & @zdroid Yep it's inconsistent right now. I had originally decided to switch to a .selected class everywhere. I started to implement it first in the segmented-controller component but I hadn't gotten around to making the change everywhere else.

That said, I think it'd be better to go back to using an .active class everywhere. It makes more sense to me considering it better matches the pseudo selector :active. I'll change the segmented controller class back to use .active or one of you guys are free to do a pull request.

[yocontra]

@connors PR is at #237

Just noticed the components dropdown on the 2.0 docs isn't working. I think push might be intercepting the links.

[connors]

What do you say we merge this?

[zlatanvasovic]

@connors What will happen with @maker organization?

[connors]

@zdroid The @maker org will be used for other cool projects!

[zlatanvasovic]

OK. :)

2014-02-25 17:05 GMT+01:00 Connor Sears notifications@github.com:

@zdroid https://github.com/ZDroid The @maker https://github.com/makerorg will be used for other cool projects!

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/213#issuecomment-36023526
.

Zlatan Vasović - ZDroid

[yocontra]

Congrats on 2.0 - this was a pretty huge undertaking

🎊

[connor]

💣

[dmackerman]

Awesome job!