1.3.0 • Published 9 years ago

buryem v1.3.0

Weekly downloads
3
License
MIT
Repository
github
Last release
9 years ago

buryem

Got style conflicts? Bury 'em!

Based on Barium by Yuanyan Cao.

Features

  • Keep Simple: No cascading, No nesting
  • No Conflict: Selectors are generated and are unique
  • Better CSS Support: Pseudo Classes, Media Queries
  • Automatically Add things: Vendor Prefixes, Default "px" unit to numeric values where needed

Installation

npm i buryem --save

Developing

To build locally, run:

npm install --ignore-scripts
npm run build

Usage

import buryem from 'buryem';


const animations = buryem.createAnimations({
	blurh: {
		"33%": {
			transform: "translateX(2px)"
		},
		"66%": {
			transform: "translateX(-2px)"
		},
		"100%": {
			transform: "translateX(0px)"
		}			
	}
}, 'optional-readable-namespace');

const styles = buryem.create({
  btn: {
    display: 'inline-block',
    color: '#000',
    padding: '6px 12px',
    marginBottom: '0',
    fontSize: '14px',
    fontWeight: 'normal',
    lineHeight: '1.428571429',
    textAlign: 'center',
    whiteSpace: 'nowrap',
    verticalAlign: 'middle',
    cursor: 'pointer',
    backgroundImage: 'none',
    border: '1px solid transparent',
    borderRadius: '4px',
    userSelect: 'none',

    ':hover': {
      color: '#fff',
      animation: `${animations.blurh} .5s infinite`
    },
    // Try resizing the window!
    '@media (max-width: 500px)': {
      backgroundColor: '#5bc0de',
      borderColor: '#46b8da'
    }
  }
}, 'optional-readable-namespace');

const Example = (props) => (
	<div>
		<button className={styles.btn}>
			Click Me <span data-nah="nah">or nah</span>
		</button>
		<style>
			{/* if you need to reach into the children you can do this */}
			{`
				.${styles.btn} [data-nah="nah"] {
					color: #f0f;
				}
			`}
		</style>
	</div>
);

Pass an object as a 3rd argument to any of these methods and they will add or append the styles to be injected to it as a __cssText property.

1.3.0

9 years ago

1.2.6

9 years ago

1.2.5

9 years ago

1.2.4

9 years ago

1.2.3

10 years ago

1.2.2

10 years ago

1.2.1

10 years ago

1.2.0

10 years ago

1.1.0

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago