Build mobile apps with simple HTML, CSS, and JavaScript components.

  • By Bootstrap
  • Last update: Sep 19, 2022
  • Comments: 15

Ratchet

GitHub Release Build Status devDependency Status

Build mobile apps with simple HTML, CSS, and JS components.

Table of contents

Getting started

  • Clone the repo with git clone https://github.com/twbs/ratchet.git or just download the bundled CSS and JS
  • Read the docs to learn about the components and how to get a prototype on your phone
  • Check out examples

Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the tagged downloads.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

ratchet/
├── css/
│   ├── ratchet.css
│   ├── ratchet.min.css
│   ├── ratchet-theme-android.css
│   ├── ratchet-theme-android.min.css
│   ├── ratchet-theme-ios.css
│   └── ratchet-theme-ios.min.css
├── js/
│   ├── ratchet.js
│   └── ratchet.min.js
└── fonts/
    ├── ratchicons.eot
    ├── ratchicons.svg
    ├── ratchicons.ttf
    └── ratchicons.woff

We provide compiled CSS and JS (ratchet.*), as well as compiled and minified CSS and JS (ratchet.min.*). The Ratchicon fonts are included, as are the optional Android and iOS platform themes.

Documentation

Ratchet's documentation is built with Jekyll and publicly hosted on GitHub Pages at http://goratchet.com. The docs may also be run locally.

Running documentation locally

  1. If necessary, install Jekyll (requires v3.0.x).
  1. Install the Ruby-based syntax highlighter, Rouge, with gem install rouge.
  2. From the root /ratchet directory, run jekyll serve in the command line.
  3. Open http://localhost:4000 in your browser, and boom!

Learn more about using Jekyll by reading its documentation.

Documentation for previous releases

Documentation for v1.0.2 has been made available for the time being at http://goratchet.com/1.0.2/ while folks transition to Ratchet 2.

Previous releases and their documentation are also available for download.

Support

Questions or discussions about Ratchet should happen in the Google group or hit us up on Twitter @GoRatchet.

Contributing

Please file a GitHub issue to report a bug. When reporting a bug, be sure to follow the contributor guidelines.

Troubleshooting

A small list of "gotchas" is provided below for designers and developers starting to work with Ratchet.

  • Ratchet is designed to respond to touch events from a mobile device. In order to use mouse click events (for desktop browsing and testing), you have a few options:
    • Enable touch event emulation in Chrome (found in the overrides tab in the web inspector preferences)
    • Use a JavaScript library like fingerblast.js to emulate touch events (ideally only loaded from desktop devices)
  • Script tags containing JavaScript will not be executed on pages that are loaded with push.js. If you would like to attach event handlers to elements on other pages, document-level event delegation is a common solution.
  • Ratchet uses XHR requests to fetch additional pages inside the application. Due to security concerns, modern browsers prevent XHR requests when opening files locally (aka using the file:// protocol); consequently, Ratchet does not work when opened directly as a file.
    • A common solution to this is to simply serve the files from a local server. One convenient way to achieve this is to run python -m SimpleHTTPServer <port> to serve up the files in the current directory to http://localhost:<port>

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Ratchet is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible.

Releases will be numbered with the following format:

<major>.<minor>.<patch>

And constructed with the following guidelines:

  • Breaking backward compatibility bumps the major while resetting minor and patch
  • New additions without breaking backward compatibility bumps the minor while resetting the patch
  • Bug fixes and misc changes bumps only the patch

For more information on SemVer, please visit http://semver.org/.

Maintainers

Connor Sears

Created by Connor Sears, Dave Gamache, and Jacob Thornton.

License

Ratchet is licensed under the MIT License.

Github

https://github.com/twbs/ratchet

Comments(15)

  • 1

    Support for other browsers

    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?

  • 2

    WIP: Ratchet 2

    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.
  • 3

    Fix for issue #261, removed carets from Android list view

    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:

  • 4

    Added modal window feature

    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

    modal-demo

    • 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.

  • 5

    Specify modal selector in data attribute

    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.

  • 6

    Add unit test to Ratchet

    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

  • 7

    Add JSHint support and enable strict mode

    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

  • 8

    IE 8 JS errors

    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)
          }
        });
      }
    
  • 9

    Integrate `grunt-contrib-connect` for easier local development

    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.

  • 10

    Fixes #539: Integrate grunt-scss-lint

    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.

  • 11

    JS fixes

    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

  • 12

    readAsArraybuffer issue

    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 };

  • 13

    Is this project dead?

    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?

  • 14

    Comeback Ratchet!

    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

  • 15

    Ratchet's icon cant display

    I am using cordova and ratchet to build a mobile application but my icon cant display correctly. Is there any solution Phone:Redmi note3 screenshot_2017-11-22-23-40-25-493_com class6 fyp

    My code `