# :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
@adonisjs/framework	15,515	3	5.0.13	5 years ago	7 years ago
adonis			0.9.0	7 years ago	7 years ago
knex			3.1.0	5 months ago	11 years ago
restify	10,703	121	11.1.0	a year ago	13 years ago
typeorm			0.3.20	4 months ago	8 years ago

@adonisjs/framework vs adonis vs knex vs restify vs typeorm

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past