# :muscle: Adonis: Aphrodite's lover Adonis combines the best of [Aphrodite](https://github.com/Khan/aphrodite) and [styled-components](https://github.com/styled-components/styled-components): Named DOM elements, stylable via object literals with support for inheritance, overriding and theming while staying lightweight (28 KB / 7.6 KB gzipped) # Installation ``` npm install --save adonis ``` # API ```js import React, { Component } from 'react' import adonis from 'adonis' class App extends Component { render () { return (

This is red.

This turns red on hover.

This turns red when the browser is less than 600px wide.

This is blue and turns red when the browser is less than 600px wide.

) } } const Section = adonis.div({ width: '500px', height: '100px', textAlign: 'center', marginBottom: '20px' }, { red: { backgroundColor: 'red' }, blue: { backgroundColor: 'blue' }, hover: { ':hover': { backgroundColor: 'red' } }, small: { '@media (max-width: 600px)': { backgroundColor: 'red' } } }) ``` ## Creating an Adonis Component Adonis components can be created from DOM elements, React Components or other Adonis Components: ```js // A styled `div` tag: const Title = adonis.div({ fontSize: '24px' }) // Overriding `Title`'s styles const SubTitle = adonis(Title)({ fontSize: '15px', fontStyle: 'italic' }) // Overriding styles of a React component class Button extends React.Component({ render () { // You need to pass the `styles` prop in order to override this component's styles return } }) const ButtonContainer = adonis.div({ padding: '5px 10px' }) // Primary button will have `padding: 5px 10px` as well as `background: blue` const PrimaryButton = adonis(Button)({ background: 'blue' }) ``` ## Variations and flags Adonis adds support for element variations that can be toggled using properties passed to the element: ```js const Button = adonis.div( // Base styles { width: '100px', height: '50px', background: 'grey' }, // Variation styles { primary: { background: 'blue' } } )

	Stars	Issues	Version	Updated	Created
adonis	43	2	0.9.0	7 years ago	7 years ago
hapi	14,499	71	18.1.0	5 years ago	13 years ago
inversify-express-utils	566	22	6.4.6	6 months ago	8 years ago
loopback	13,243	16	3.28.0	3 years ago	11 years ago
restify	10,697	121	11.1.0	a year ago	13 years ago

adonis vs hapi vs inversify-express-utils vs loopback vs restify

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past