styled components rhythm
1.0.0
Rythme vertical 12px avec des lignes de base correctement alignées
Type magnifiquement aligné avec des composants stylisés
npm i @ceteio/styled-components-rhythm
Ou, avec du fil:
yarn add @ceteio/styled-components-rhythm
import { ThemeProvider , injectGLobal } , styled from 'styled-components' ;
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
const rhythm = styledComponentsRhythm ( {
baseFontSize : 1 , // 1rem. Browser default makes this 16px
baseLineHeight : 1.2 , // unitless line-height, see: https://css-tricks.com/almanac/properties/l/line-height/#comment-1587658
rhythmHeight : 0.75 , // rem units. With browser default, this is 16px * 0.75rem == 12px
capHeights : {
// Calculated with https://codepen.io/sebdesign/pen/EKmbGL?editors=0011
Lato : 0.72 ,
} ,
debug : true ,
} ) ;
injectGLobal `
/* Reset global margins and padding */
h1, p {
margin: 0;
padding: 0;
}
/* Using Lato font https://fonts.google.com/specimen/Lato */
@import url('https://fonts.googleapis.com/css?family=Lato')
${ rhythm . global ( ) }
` ;
const H1 = styled . h1 `
${ props => props . theme . setFontWithRhythm ( 'Lato' , 3 ) }
margin-top: ${ props => props . theme . rhythmSizing ( 3 ) } rem;
` ;
const Paragraph = styled . p `
${ props => props . theme . setFontWithRhythm ( 'Lato' , 1 ) }
margin-top: ${ props => props . theme . rhythmSizing ( 2 ) } rem;
` ;
export default ( ) => (
< ThemeProvider theme = { rhythm . theme } >
< H1 > Hello world </ H1 >
< Paragraph > How are you today? </ Paragraph >
< Paragraph > Feeling quite < em > aligned </ em > ! </ Paragraph >
</ ThemeProvider >
) ; L'exportation principale est une fonction qui renvoie un objet rythmique adapté pour ajouter à un composant stylé <ThemeProvider> :
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
const rhythm = styledComponentsRhythm ( options ) ;
// { theme: ..., global: ... } options ( Object )baseFontSize ( Number ): la taille de la police rem de votre élément racine (c'est-à-dire; le <body> ).rhythmHeight ( Number ): la taille de la grille verticale rem , à laquelle le texte sera aligné sur sa ligne de base. Fonctionne le mieux lorsqu'il se divise uniformément en ( baseFontSize * defaultLineHeight ).capHeights ( Object ): carte du nom de police font-family -> hauteur proportionnelle des lettres majuscules. Les hauteurs peuvent être calculées avec cet outil. Par exemple: {
Lato : 0.72 ,
}defaultLineHeight ( Number ): par défaut pour setFontWithRhythm() ci-dessous. Doit être une valeur sans unité, qui sera relative à la taille de la police d'un élément.debug ( Boolean ): injectera des lignes horizontales rouges au corps pour les alignements de débogage visuellement.defaultOutputType ( String ): Définissez le type de sortie de setFontWithRhythm() & global() . 'string' : renvoie une chaîne CSS. 'object' : renvoyez un objet de style CSS. Par défaut: 'string' . Il y a deux pièces dans le puzzle, qui doivent être utilisées pour avoir un rythme vertical efficace; rhythm.theme et rhythm.global :
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
import { injectGlobal , ThemeProvider } from 'styled-components' ;
const rhythm = styledComponentsRhythm ( options ) ;
injectGlobal ` ${ rhythm . global ( ) } ` ;
return < ThemeProvider theme = { rhythm . theme } > ... </ ThemeProvider > ; theme ( Object ) Passez cet objet à un composant stylé ThemeProvider comme thème:
const rhythm = styledComponentsRhythm ( options ) ;
return < ThemeProvider theme = { rhythm . theme } > ... </ ThemeProvider > ; global([outputType]) => String Une chaîne contenant des CS mondiaux qui doivent être appliqués. Mieux fait en utilisant injectGlobal de Styled-Composant:
const rhythm = styledComponentsRhythm ( options ) ;
injectGlobal ` ${ rhythm . global ( ) } ` ; ou composant <Global> émotion:
< Global styles = { rhythm . global ( 'object' ) } />Paramètres
outputType ( String ): 'string' : renvoie une chaîne CSS. 'object' : renvoyez un objet de style CSS. Par défaut: la valeur de defaultOutputType . Vous avez désormais accès à ce qui suit via le theme dans un composant stylé:
rhythmHeightLa valeur transmise lors de la création de l'objet thème.
setFontWithRhythm(fontName, fontSizeRem[, desiredLineHeight[, outputType]]) => StringLa fonction principale qui générera le CSS nécessaire pour aligner correctement la police sur une ligne de base rythmique.
Cette fonction fait 2 hypothèses:
padding-top ou margin-bottom sur cet élément.Paramètres
fontName ( String ): devrait correspondre au nom de la police comme vous le déclarez dans la font-family de la propriété CSS.fontSizeRem ( Number ): un multiple de baseFontSize .desiredLineHeight ( Number ): sera arrondi à la ligne de rythme la plus proche afin que vous n'ayez pas à vous inquiéter.outputType ( String ): 'string' : renvoie une chaîne CSS. 'object' : renvoyez un objet de style CSS. Par défaut: la valeur de defaultOutputType .La sortie est la chaîne CSS à ajouter au composant:
const H1 = styled . h1 `
${ props => props . theme . setFontWithRhythm ( 'Lato' , 3 ) }
` ;Ou comme objet utilisant l'hélice CSS (à la fois dans les composants stylisés et l'émotion):
const H1 = props => (
< h1 css = { theme => theme . setFontWithRhythm ( 'Lato' , 3 , 1 , 'object' ) } />
) ; rhythmSizing(multiple) => Number Une aide simple pour calculer multiple * rhythmHeight .
Fonctionne très bien pour définir des marges ou un rembourrage:
const H1 = styled . h1 `
margin-top: ${ props => props . theme . rhythmSizing ( 3 ) } rem;
` ; capsize par Seek: "En utilisant des métadonnées de police, le texte peut désormais être dimensionné en fonction de la hauteur de ses majuscules tout en réduisant l'espace au-dessus des lettres majuscules et en dessous de la ligne de base."basekick de Michael Taranto est une autre implémentation de la même chose, ciblant moins.
