GithubHelp home page GithubHelp logo

parata's Introduction

Parata

Circle CI Code Climate Stories in Ready

Component based styles for the web. Parata enforces you to build re-usable components for the web and generates a component wise styleguide.

Getting Started

Parata is packaged as a grunt plugin. So, make sure you install GruntJS. There is a generator included which is packaged as a yeoman generator. Refer here to get started on the generator: https://github.com/cybrilla/generator-parata

Or simply run: $ npm install -g generator-parata. You may require root permissions for it. Also make sure you have yeoman installed. Make sure you read the docs: https://github.com/cybrilla/generator-parata

Quick example

Generate a button component if you haven't created one using the generator. Open components/button/ in your editor.

Add some styling

/**
  * @component button
  * @description Button.
  * @variants primary | secondary | default
  */

button {
  color: #F5F5F5;
  padding: 10px;
  &:hover {
    cursor: pointer;
  }
  &.primary {
    background: blue;
  }
  &.secondary {
    background: red;
  }
  &.default {
    background: yellow;
  }
}

Import the component to components/app.scss

/**
  * Bootstrap file for all styles
  */

  @import 'button/style'

Create an HTML sample / example for the component in example.html

<example for="button">
<button class="{{ variant }}">{{ variant }}</button>
</example>

Create a javascript snippet for the component in example.html

<script for="button">
alert("Hello I'm a component!");
</script>

Build

$ grunt parata --build

Serve

$ grunt serve

This will start a server at http://localhost:8888.

parata's People

Contributors

afamyial avatar mano3493 avatar prayagverma avatar swaroopsm avatar waffle-iron avatar

Stargazers

avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

afamyial prayagverma

parata's Issues

Components integrated page

In order to have different components in a page, we should be able to include a component in a say layout template. For Eg:

<html>
  <head></head>
  <body>
    <div class="col-md-12">
      <div class="col-md-6">{{include table}}</div>
       <div class="col-md-6">{{include form}}</div>
    </div>
</html>

Use iframe for components

Each component in the browser must be displayed using an iframe rather than just spitting up the html straight forward.

Typography

Should be able to add custom fonts.
Need a separate typography component.

Starter Kit

Need a sass starter kit that can be cloned readily. This will reduce the initial steps of setting up grunt, sass, watch etc.

Improve testing

The tests currently are very minimum and few of them fails. We need solid test cases. Also hooking up to a CI server like CircleCI or Travis to run builds must be integrated.

Override component template

In order to specify a layout for a component page, it would be better off to override the default component html template.

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.