Skip to content

MozillaKNITOpenSource/UICAP

Repository files navigation

UICAP:Future of UX/UI

License: MPL-2.0 Coverage Status


What is UICAP?

alt text

UICAP solves problem of many users who have not better experience of web page surfing on Firefox and other browsers. Basically it's an UI framework which will help developers to make a webpage which is browser independent and provides best user experience to all users.It'll contain some other advance components which is not provided in other amazing UI frameworks like Twitter Bootstrap, Flat UI, and Ionic. There are many more but we can list all here.

We've written a short manual explaining how you can adapt it for your own needs.


Getting started

There are many ways of using UICAP in your projects. Here a brief introduction of the recommended two methods:

CDN - just give me the file

We're working on it.

Bower - to personalize UICAP

We're working on it.

NPM

We're working on it.

Other ways

You can always download the latest minimized version from github, clone the repository or download it. Or clone it: `git clone https://github.com/MozillaKNITOpenSource/UICAP.git

Example usage

After including the stylesheet as indicated in the Getting started:

<form>
  Whats your fav in following?

  <label>
    <select name="feature">
      <option value="semantic">    HTML5 </option>
      <option value="lightweight"> Lightweight    </option>
      <option value="css3">         CSS3      </option>
      <option value="responsive">  Responsive     </option>
    </select>
  </label>

  <input type="email" placeholder="Email">

  <button class="primary"> Subscribe! </button>
</form>

Advantages

  • Only CSS3 is needed and your HTML5 stays highly semantic*.

  • Under 10kb when minimized and gzipped with all plugins.

  • Normalize.css is used as a base, achieving a solid foundation.

  • Support: IE 9+ and others. No fancy CSS3 on IE 8.

  • Responsive: The nav and the grids are responsive.

Disadvantages

  • Difficult to drop in an already created project. This is what I meant by invasive. This is not within the new scope of the project.

Alternatives and why I still created UICAP

Milligram: A minimalist CSS framework

Bootstrap: Really comprehensive, but too many files and too heavy for most of the websites. It also relies too much on javascript. Still cannot get the <select> right out of the box.

Min: a tiny, basic css framework. It has great browser support. No <select> right, and it's too inexpressive.

Contributing

You are encouraged to contribute to UICAP. To write a new plugin, just copy one of the existing ones (specially recommend "button") and modify the files. The code must be linted with scss-lint, except the PropertySortOrder which is ignored for a better code structure.

Give your Ideas for UICAP

To contribute in UICAP by giving your ideas please go through here

Authors


Communication Links

Dear Contributors you all can join our community by going through below links: Gitter


Some amazing considerations

  • Fontello an icon library that plays really nice with others.