# :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	44	2	0.9.0	7 years ago	7 years ago
feathers			2.2.4	6 years ago	10 years ago
hapi	14,357	55	18.1.0	5 years ago	12 years ago
inversify-express-utils	551	28	6.4.3	2 years ago	7 years ago
restify	10,659	111	11.1.0	7 months ago	12 years ago

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

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past