Giter VIP home page Giter VIP logo

growcss's Introduction



spectrum opensource Netlify Status

GrowCss is a simple, flexible and extensible modular frontend framework for react.

Documentation

You find the documentation on growcss.com.

Branch Status

Build Status

Version policy

GrowCss adheres to semantic versioning. However, we only consider constructs directly importable at the package level or from files at the root. Everything else is considered package-internal and may be subjected to changes, moves, renames, etc.

Browser support

Browsers list
1% global browser
ie >= 11
last 1 Android versions
last 1 ChromeAndroid versions
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions
last 2 iOS versions
last 2 Edge versions
last 2 Opera versions

Right-to-left support

All components can render in LTR or RTL, depending on the dir attribute set on the html element. (dir="rtl" will flip the direction of everything.

Contributing

If you would like to help take a look at the list of issues and check our Contributing guild.

Note: Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Sending Feedback

We are always open to your feedback.

License

The GrowCss framework is open-sourced software licensed under the MIT license

growcss's People

Contributors

prisis avatar renovate-bot avatar renovate[bot] avatar semantic-release-bot avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

prisisforks

growcss's Issues

[Component] Tags

The Tags component displays as a tag with an optional link and/or button to remove the given tag.

[Component] Well Section

Short description

  • background image / with parallax support breakpoints
  • background color
  • background video

[Component] Button

Short description

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

[Component] Divider

Short description

Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.

Property Description Type Default
dashed whether line is dashed Boolean false
type direction type of divider enum: vertical horizontal
orientation this is optional, if not set it will have the text in the center enum: leftright center

[Component] Banner

Short description

This banner component is designed to display a prominent message at the top of the page. It animates its opening and closing.

Props
children react.Node
Content to be shown next to the icon. Typically text content but can contain links.

Node
icon react.Node
Icon to be shown left of the main content.

Node
isOpen boolean = false
Defines whether the banner is shown. An animation is used when the value is changed.

Use stylelint

Short description

  • Create a new repository for the rules

https://stylelint.io/
https://github.com/styled-components/stylelint-processor-styled-components

module.exports = {
  plugins: [
    'stylelint-order',
  ],
  rules: {
    // Base rules
    indentation: 2,
    'number-leading-zero': 'never',
    'string-quotes': 'double',
    'selector-max-id': 0,
    'selector-list-comma-newline-after': 'always',
    'rule-empty-line-before': [
      'always',
      { ignore: ['after-comment'] },
    ],
    'comment-empty-line-before': [
      'always',
      { except: ['first-nested'] },
    ],
    'block-opening-brace-space-before': 'always',
    'declaration-colon-space-after': 'always',
    'declaration-colon-space-before': 'never',
    'declaration-block-single-line-max-declarations': 1,
    'declaration-property-value-blacklist': { '/^border/': ['none'] },
    'at-rule-empty-line-before': [
      'always',
      { ignore: ['after-comment'], except: ['first-nested'] },
    ],
  },
};

[Component] Menu / navigation

Short description

  • full width menu
  • full width menu with humburger
  • sidebar menu (vertical menu)
  • sidebar menu with humburger
  • menu should support sub menu
    • with image link
    • with xy-grid
  • can be static on scroll
  • items can be aligned
  • can be used wit react router
  • item can be a accordion menu
  • should support media queries

[Component] Progress

Short description

Display the current progress of an operation flow.

types

  • line circle dashboard

[Component] breadcrumbs

Short description

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

  • Should support react-router

[Component] Image

Short description

  • lazy image
  • figcaption with align
  • load img if is scrolled into view

Action required: Add a Renovate config

Hi,

You will need to add a config to this repository if you want Renovate to continue creating PRs. Renovate will soon begin skipping all repositories that don't have a valid config found, even if you've received PRs before.

To keep functionality exactly the same, you can add an empty JSON config ({}) to your repo in any of the following files: renovate.json, .github/renovate.json, .renovaterc, .renovaterc.json

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.