I think that Ratchet could be a good alternative for jQuery mobile — not just for apps, but also as mobile websites framework. Personally I like that Ratchet is small and bloat-free. But mobile sites need to support different mobile browsers: Opera mobile, IE (Windows Phone) and Firefox mobile too. Maybe full support for all browsers is difficult task (for example, animation and other things), but I'm sure that even correct vendor prefixes for CSS (not only -webkit-, but -o-, -moz- and -ms-) could make first step in right direction. What do you think?

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

• [x] Create an base theme.
• [x] Create an iOS 7 platform theme.
• [x] Create an Android platform theme.
• [x] Docs built on Jekyll.
• [x] Use pygments in Jekyll instead of prettify.js.
• [x] Switch from a Makefile to using Grunt.
• [x] 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.

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

Nav bars

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

Tab bars

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

Standard bars

• [x] Properly add support for .footer-secondary and .footer-secondary-tab

Segmented controllers

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

Table views

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

Buttons

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

Badges

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

Popovers

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

Forms

• [x] Support full width forms that go edge to edge.

Toggles

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

Push

• [x] iOS theme: Update push animations based on iOS 7.

Headings & body copy

• [x] Add support for headings
• [x] 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.

• [x] Include base set of Ratchicons.

Themes

• [x] Default base theme.
• [x] Platform iOS 7 theme.
• [x] Platform Android theme.

LMK if this needs any revisions, hopefully this is good enough to :ship:

Sorry if the commits seem a little messy, I kept pulling from the upstream master to keep my local copy updated.

Screenshot: https://www.dropbox.com/s/99mktsg8bwutxr8/Screen%20Shot%202014-02-26%20at%2011.48.59%20PM.png

:hand:

Added a slide up from the bottom modal window that could be used to:

• Choose the account that you're posting with (see Tumblr.app)
• Confirm the details of a form before posting it
• Post a reply to a message thread

• See test/components/modals.html for a working demo.
• Tested in webkit, only.
• Uses position: fixed, so it won't work in iOS before version 5.0

Any queries? @fat @dhgamache @connors ?

Yes, that is tribe.

Fixes #682.

Instead of hijacking the href attribute of an anchor tag to indicate a selector of a modal that we'd like to display on it being clicked. We can rather make use of a data-modal attribute to indicate the selector of the desired modal.

Hi,

We talked about to add unit test to Ratchet (https://github.com/twbs/ratchet/issues/723). This is why I made this PR.

I chose to use Jasmine. It's the beginning I'll add more unit tests if it's ok.

/CC @cvrebert

Fixes #280. Fixes #285.

TODO:

• [x] Check the global directives
• [x] Fix the device image isn't updated with the component used.
• [x] Agree on the JSHint options
• [x] Enable bitwise and ~~immed~~, remove boss

/CC @connor @connors @cvrebert @mdo

SCRIPT438: Object doesn't support property or method 'addEventListener' 
ratchet.js, line 29 character 3

I sort of worked around this but I don't like my way

  if (!window.addEventListener) {
    window.attachEvent('touchend', function (event) {
      var modal = getModal(event);
      if (modal) {
        if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
        event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
      }
    });
  } else {
    window.addEventListener('touchend', function (event) {
      var modal = getModal(event);
      if (modal) {
        if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
        event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
      }
    });
  }

Integrate grunt-contrib-connect, grunt-open, add a task watch docs, run build and do live reload. After run $ grunt server, open docs in a localhost:8000 and run watch task.

Fixes #539: Integrate grunt-scss-lint: I integrated grunt-scss-lint just because it looks good. Then, there were some warning by scss-lint so I've fixed that.

This is totally a WIP, but it works for me in both Firefox and Chome without any TypeErrors.

/CC @connor @connors @fat

Any suggestions are welcome.

PS. IE is broken after #446

Can you help me please with this problem? i want to store files on firebase . i have all files with the same size in storage firebase (16 B ),and when i open them there are no content.

`import { Component } from '@angular/core'; import { File} from '@ionic-native/file/ngx'; import { FileChooser } from '@ionic-native/file-chooser/ngx'; import { FilePath } from '@ionic-native/file-path/ngx'; import { FireBaseService } from '../services/firebase-service.service'

@Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'],

}) export class HomePage {

fileforSending ; fileUri :string; filePath :string; fileName :string; fileType :string; buffer ; entry;

constructor( private fireService:FireBaseService, private fileChooser:FileChooser, private file :File, private pathConverter :FilePath) { }

choose(){ this.fileChooser.open() .then(uri => { //getting URI of a choosen file this.fileUri = uri; return this.file.resolveLocalFilesystemUrl(this.fileUri);

}).then(fileEntry => {
  this.entry = fileEntry;
  this.entry.file((arg) => {
  //getting mime type of a file
  this.fileType = arg.type;})

}).then(() => {
  return this.pathConverter.resolveNativePath(this.fileUri)

}).then((filePath) => {
  //converting file URI to normal file PATH & file NAME
  this.filePath = filePath.substring(0, filePath.lastIndexOf('/'));
  this.fileName = filePath.substring(filePath.lastIndexOf('/'), filePath.length).replace("/", "");
  
}).then(async () => {
  return await this.file.readAsArrayBuffer(this.filePath, this.fileName)
}).then(async (file) => {
    //getting file 
    await this.fireService.uploadFileToStorage(file, this.fileType, this.fileName);
})
.catch(err =>  {
    console.log('error: ', err)
});

} } `

import { Injectable } from '@angular/core'; import {AngularFireDatabase} from "@angular/fire/database";

import {AngularFireStorage} from "@angular/fire/storage";

@Injectable({ providedIn: 'root' }) export class FireBaseService {

constructor(private af: AngularFireStorage){}

async uploadFileToStorage(file, type, name) {
    const randomId = Math.random()
        .toString(36)
        .substring(2, 8);

    let oMyBlob = new Blob([file], {type : type})
    console.log(oMyBlob)
    const uploadTask = this.af.upload(
        `files/${new Date().getTime()}_${randomId}_${name}`,
        oMyBlob
    );

    uploadTask.then(async res => {
        console.log('file upload finished!');
    }).catch(err =>  {
        console.log('file wasnt upload. Error: ' + err);
    });
}

}

export { FireBaseService as ExportedClass };

Sorry to use an issue for this question, but couldn't find a community. I've seen there hasn't been any movement since 2016, however there's no notice on the README.md nor the goratchet.com page that says anything about it going down/deprecated/closed/whatever.

Does someone know what happened to this project?

I have a web project only target to mobile users, kind of PWA. So I don't need mobile-first or responsive CSS library.

since yesterday I try to find simple css/js library that target only mobile browser, surprisingly I couldn’t find even a single one, most library are for both mobile and desktop. I found some mobile only framework like framewrok7, ionic, onsen.io but they are full featured framework that might overkill me.

after spent several hours on google finally I found Ratchet, I'm very glad because it match my need, the exact library I want, but sadly there are some small bugs and the last commit is 2 years ago.

My point is Ratchet is unique library on the market and I believe many developers have situation to need Ratchet

I am using cordova and ratchet to build a mobile application but my icon cant display correctly. Is there any solution Phone:Redmi note3

My code `