styled components rhythm
1.0.0
Ritmo vertical de 12 px com linhas de base corretamente alinhadas
Tipo lindamente alinhado com componentes estilizados
npm i @ceteio/styled-components-rhythm
ou, com fios:
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 >
) ; A principal exportação é uma função que retorna um objeto de ritmo adequado para adicionar a um componentes com estilo <ThemeProvider> :
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
const rhythm = styledComponentsRhythm ( options ) ;
// { theme: ..., global: ... } options ( Object )baseFontSize ( Number ): O tamanho da fonte rem do seu elemento raiz (ou seja; o <body> ).rhythmHeight ( Number ): o tamanho da grade vertical rem , ao qual o texto terá sua linha de base alinhada. Funciona melhor quando se divide uniformemente ( baseFontSize * defaultLineHeight ).capHeights ( Object ): mapa do nome da fonte da font-family -> Altura proporcional das letras maiúsculas. As alturas podem ser calculadas com esta ferramenta. Por exemplo: {
Lato : 0.72 ,
}defaultLineHeight ( Number ): Padrão para setFontWithRhythm() abaixo. Deve ser um valor sem unidade, que será relativo ao tamanho da fonte de um elemento.debug ( Boolean ): injetará linhas horizontais vermelhas no corpo para depurar visualmente alinhamentos.defaultOutputType ( String ): Defina o tipo de saída do setFontWithRhythm() & global() . 'string' : retorne uma string css. 'object' : retorne um objeto de estilo CSS. Padrão: 'string' . Existem duas peças no quebra -cabeça, as quais devem ser usadas para ter ritmo vertical eficaz; rhythm.theme e 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 ) Passe este objeto para um componente componentes estilizados ThemeProvider como o tema:
const rhythm = styledComponentsRhythm ( options ) ;
return < ThemeProvider theme = { rhythm . theme } > ... </ ThemeProvider > ; global([outputType]) => String Uma sequência contendo CSS global que precisa ser aplicada. Melhor feito usando injectGlobal de componentes estilosos:
const rhythm = styledComponentsRhythm ( options ) ;
injectGlobal ` ${ rhythm . global ( ) } ` ; ou componente <Global> da Emotion:
< Global styles = { rhythm . global ( 'object' ) } />Parâmetros
outputType ( String ): 'string' : retorne uma string css. 'object' : retorne um objeto de estilo CSS. Padrão: o valor do defaultOutputType . Agora você tem acesso ao seguinte através do suporte theme dentro de um componente estilizado:
rhythmHeightO valor passado ao criar o objeto tema.
setFontWithRhythm(fontName, fontSizeRem[, desiredLineHeight[, outputType]]) => StringA principal função que gerará o CSS necessário para alinhar corretamente a fonte a uma linha de base do ritmo.
Esta função faz 2 suposições:
padding-top ou margin-bottom neste elemento.Parâmetros
fontName ( String ): deve corresponder ao nome da fonte, como você o declararia na font-family da propriedade CSS.fontSizeRem ( Number ): um múltiplo de baseFontSize .desiredLineHeight ( Number ): será arredondado para a linha de ritmo mais próxima, para que você não precise se preocupar.outputType ( String ): 'string' : retorne uma string css. 'object' : retorne um objeto de estilo CSS. Padrão: o valor do defaultOutputType .A saída é a sequência CSS para adicionar ao componente:
const H1 = styled . h1 `
${ props => props . theme . setFontWithRhythm ( 'Lato' , 3 ) }
` ;Ou como um objeto usando o suporte CSS (em componentes e emoção com estilo):
const H1 = props => (
< h1 css = { theme => theme . setFontWithRhythm ( 'Lato' , 3 , 1 , 'object' ) } />
) ; rhythmSizing(multiple) => Number Um auxiliar simples para calcular multiple * rhythmHeight .
Funciona muito bem para definir margens ou preenchimento:
const H1 = styled . h1 `
margin-top: ${ props => props . theme . rhythmSizing ( 3 ) } rem;
` ; capsize By Seek: "Usando os metadados da fonte, o texto agora pode ser dimensionado de acordo com o auge de suas letras maiúsculas enquanto apara o espaço acima das letras maiúsculas e abaixo da linha de base".basekick de Michael Taranto é outra implementação da mesma coisa, direcionada a menos.
