Nagging Penguin Matriarchs

    ressheet

    1.2.0 • Public • Published

    RESSheet

    Only ~3kb, no external dependencies & supports all major browsers

    React Evaluated StyleSheet, better known as RESS, is a tiny preprocessor that aims to be for React what LESS is to CSS. Highlights:

    • Easy to use and get started with
    • Light-weight, minified version is less than 1kb
    • No dependencies, built without the clutter of dependencies
    • Consistency across browsers (including the notorious Internet Explorer)
    • MIT Licensed, perfect for personal and commercial use

    Showcase

    Getting Started

    Installation

    Package could be installed via npm.

    npm install ressheet --save
    

    Import / require() Package

    ES6 Import Approach:

    import RESSheet from 'ressheet'

    NPM / CommonJS require() Approach:

    var RESSheet = require('ressheet')

    Usage

    RESSheet allows you to write better StyleSheets with React (Native) by using component props as CSS-like classes. Check the following title component:

    import React, { Component } from 'react'
    import { Text } from 'react-native'
    import RESSheet from 'ressheet'
     
    class Title extends Component {
      constructor(props) {
        super(props)
      }
     
      render() {
        let titleStyles = new RESSheet(this.props, {
            default: {
              fontWeight: 'bold',
              color: '#000',
              fontSize: 25,
              textAlign: 'center'
            },
            
            'h1, h2, h3, h4, h5, h6': {
              marginBottom: 12,
              fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif",
              textTransform: 'uppercase',
     
              fancy: {
                fontFamily: 'cursive',
                fontStyle: 'italic'
              }
            },
     
            h1: { fontSize: 30 },
            h2: { fontSize: 25 },
            h3: { fontSize: 20 },
            h4: { fontSize: 15 },
            h5: { fontSize: 10 },
            h6: { fontSize: 7 }
          })
     
        return <Text style={titleStyles} children={this.props.children} />
      }
    }

    I bet you noticed that new RESSheet(props, {...}) accepts two parameters, namely: props object and the RESSheet object. I used a class component just for demonstration, however always make sure to use stateless components where possible. Anyways, the <Title /> component could now be used as follows:

    <Title>This is an ordinary title</Title>
    <Title h1>This is an H1 title</Title>
    <Title h2 fancy>This is a fancy H2 title</Title>
    <Title h3>This is an H3 title</Title>
    <Title h6>This is an H6 title</Title>

    The following would then display:

    Notice how RESSheet allows multi selectors in 'h1, h2, h3, h4, h5, h6': {...}. Styles specified there would affect components with any h1 - h6 props. RESSheet also features nested, styles similiar to LESS, as seen in the above demo.

    Without RESSheet, the above code would've been larger. This code is valid for both, react and react-native.

    Browser & Device Support

    Note: RESSheet supports both react and react-native out-of-the-box, along with all major browsers as highlighted below:

    Android IOS Chrome Edge Firefox IE Opera Safari
    (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

    Contributing

    RESSheet is a free and open source library, and I'd appreciate any help you're willing to give - be it fixing bugs, improving documentation, or suggesting new features or enhancements.

    License

    RESSheet is licensed under the MIT License which makes it great for both personal and commercial use.

    Enjoy ;)

    Install

    npm i ressheet

    DownloadsWeekly Downloads

    12

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    168 kB

    Total Files

    7

    Last publish

    Collaborators

    • bukharim96