GithubHelp home page GithubHelp logo

courner's People

Contributors

thetaz25 avatar

Watchers

 avatar  avatar

courner's Issues

Add Center Component

What component is missing?
A dedicated component that will center its content.
A switch for "expand to full size" which sets width and height to 100% would be nice.

Create a wrapper component for Inputs

The component should have the following features:

  • Display a label
  • Display some descriptive text
  • Display some error text

Following concepts need to be introduced:

  • Breakpoints (Mobile, Tablet, Desktop)

Behaviour like in https://codepen.io/chriscoyier/full/AvYQdv :

  • On Desktop and Larger sizes, have the label and the input on the same row, Label is right-aligned.
  • On Tablet sizes, the label and the input are on the same row, Label is left-aligned.
  • On Phone sizes, Label and Input are on the same column, Label is above the input.
  • Descriptive Text will be shown below the input (optionally)
  • Error Text will be shown below the descriptive text (optionally)
  • Optionally the error text can also be displayed instead of the descriptive text

Create a paper component

Features:

  • Elevation (needs to be implemented)
  • Has Courner
  • Can have border
  • Interactive optional

Refactor SCSS utilities (functions and mixins) throughout the project

After the development of the first components, I do have a more clearer idea on how to tackle styling.

Provide longer, or complex style definitions via mixins and functions in SCSS.

Specifics:

  • transition property in "fast", "medium" and "slow", that accepts the properties that should be included as well as the timing definition.
  • Color rework, prepare everything for design tokens as far as it can get
  • Convencience-methods for colors (e.g. border-color(<DESIGN-TOKEN>) )
  • Convencience-methods for more complex css selectors (as needed)

Storybook Example: Login Screen

What example are you missing?
I want a Example Login Screen that shows usage of input components with layout components. Example should include inputs for user + password, checkbox for "remember me", link to "forgot password" and button to do the login.

Design/Style

  • The input fields should be located centralized.
  • The input fields should be contained on a paper component with elevation.
  • There is a title (h1) that introduces the user with a messages to log in.
  • The title's variant can be changed with controls
  • Input for username with errortext can be changed via controls
  • Input for password with errortext can be changed via controls
  • Checkbox for remember me is included
  • Link for "Forgot Password" is displayed (no linking)
  • Button for "Register" and "Login", Login is primary (no actions)

Added Value
First example, usage of different inputs with some data display components together with some layouting

Missing Components to fulfil

  • InputWrapper Component (see #5 )
  • Center Component (TBD)

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.