Giter Club home page Giter Club logo

modernizr-ui's Introduction

Modernizr UI

To do

Any active issues go through our GitHub Issues. We're not adding everything upfront; instead, focusing by priority.

Any archived issues, or unassigned issues remain in the Trello board.

Getting started

  1. Ensure you have all the prerequisites installed

    • npm install -g webpack bower grunt-cli docpad
  2. Load the dependencies into your project

    • npm install && bower install
  3. Start the task runner

    • grunt for webpack-dev-server, sass and html
  4. Go to: http://localhost:8080/webpack-dev-server/

Deploy

  1. Use the following Grunt task to clear the build folder and generate the files with Docpad

    • grunt dist
  2. (Temporary step) Remove the leading /./ for the style and script tags, generated in dist/index.html

  3. Deploy to Github Pages with

    • grunt gh-pages

Terminology

Work in process. Please contribute.

This is the terminology we're using for the new interface:

  • 'Builder UI' - this appears when you click 'Start' from the homepage, and is used to create a custom download.
  • 'Builder Process' - the script that needs to run in order to create a custom download
  • 'Selection' - whatever the user has selected for their custom download
  • 'Detects' - the main set of core and contributed browser tests
  • 'Meta data' - a dictionary of detects, parsed from the original Modernizr repo. Essentially a list of detects, with attached tags and types.
  • 'Tags' - organised categories, e.g. 'svg', powered by docblocks
  • 'Results' - the items that appear in the main list of the builder

modernizr-ui's People

Contributors

chrishale avatar joecritch avatar patrickkettner avatar paulirish avatar ryanseddon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

modernizr-ui's Issues

Increase visibility of site navigation

Faruk has pointed out the site navigation is hidden when you're outside of the homepage. We're considering having a more consistent bar across the top.

This is currently with Faruk in sketching/wireframe stages.

Build options UI

A user needs to be able to choose the following:

  • Grunt configuration
  • Minified download
  • Non-minified download

First step is to prototype the layout of the UI. This is probably going to be an overlay that appears when you click Build.

After that, we'll need to hook it up to the actual builder integration.

Code style

It'd make sense if we followed Modernizrs coding guidelines basically convert the tabs to 2 spaces. I could do a PR that is just massive white space change along with adding an .editorconfig file

Responsive grid

This is something that Jon and I have already prototyped. I'll work on moving it into the site.

Custom build integration

We need to hook the builder UI into the builder process. I'm in the dark on this one, but is there anything that's required from a UI perspective, in order to integrate?

Left-hand sidebar considerations

Faruk and I were discussing moving anything that's a 'group' or 'tag' into the left-hand sidebar, and therefore making it more useful and reducing dead space.

We're considering how many tags we have to work with, which will heavily affect the UI. (This is currently with Faruk; feel free to reassign.)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.