styled components rhythm
1.0.0
Вертикальный ритм 12px с правильно выровненными базовыми показателями
Красиво выровнен тип со стилизованными компонентами
npm i @ceteio/styled-components-rhythm
или, с пряжей:
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 >
) ; Основной экспорт - это функция, которая возвращает ритм -объект, подходящий для добавления в стилизованные компоненты <ThemeProvider> :
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
const rhythm = styledComponentsRhythm ( options ) ;
// { theme: ..., global: ... } options ( Object )baseFontSize ( Number ): размер шрифта rem вашего корневого элемента (т.е. <body> ).rhythmHeight ( Number ): размер вертикальной сетки rem , на который текст будет иметь свой базовый уровень. Работает лучше всего, когда он распределяется равномерно на ( baseFontSize * defaultLineHeight ).capHeights ( Object ): карта font-family имени шрифта -> пропорциональная высота заглавных букв. Высоты могут быть рассчитаны с помощью этого инструмента. Например: {
Lato : 0.72 ,
}defaultLineHeight ( Number ): по умолчанию для setFontWithRhythm() ниже. Должен быть без единичного значения, которое будет относительно размера шрифта элемента.debug ( Boolean ): будет вводить красные горизонтальные линии в тело для визуальной отладки выравнивания.defaultOutputType ( String ): установите тип вывода setFontWithRhythm() & global() . 'string' : вернуть строку CSS. 'object' : вернуть объект стиля CSS. По умолчанию: 'string' . В головоломке есть две части, которые должны использоваться, чтобы иметь эффективный вертикальный ритм; rhythm.theme и 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 ) Передайте этот объект в стиле компонентов ThemeProvider в качестве темы:
const rhythm = styledComponentsRhythm ( options ) ;
return < ThemeProvider theme = { rhythm . theme } > ... </ ThemeProvider > ; global([outputType]) => String Строка, содержащая глобальные CSS, которую необходимо применить. Лучше всего сделать с помощью injectGlobal в стиле-компоненте:
const rhythm = styledComponentsRhythm ( options ) ;
injectGlobal ` ${ rhythm . global ( ) } ` ; или эмоциональный <Global> компонент:
< Global styles = { rhythm . global ( 'object' ) } />Параметры
outputType ( String ): 'string' : вернуть строку CSS. 'object' : вернуть объект стиля CSS. По умолчанию: значение defaultOutputType . Теперь у вас есть доступ к следующему через theme подпорки в стиле компонента:
rhythmHeightЗначение, прошедшее при создании объекта темы.
setFontWithRhythm(fontName, fontSizeRem[, desiredLineHeight[, outputType]]) => StringОсновная функция, которая будет генерировать CSS, необходимые для правильного выравнивания шрифта с базовой линией ритма.
Эта функция делает 2 предположения:
padding-top или margin-bottom на этом элементе.Параметры
fontName ( String ): следует соответствовать имени шрифта, поскольку вы заявили о его font-family .fontSizeRem ( Number ): кратный baseFontSize .desiredLineHeight ( Number ): будет округлена до ближайшей линии ритма, чтобы вам не приходилось беспокоиться.outputType ( String ): 'string' : вернуть строку CSS. 'object' : вернуть объект стиля CSS. По умолчанию: значение defaultOutputType .Выход - это строка CSS, чтобы добавить в компонент:
const H1 = styled . h1 `
${ props => props . theme . setFontWithRhythm ( 'Lato' , 3 ) }
` ;Или в качестве объекта, использующего CSS Prop (как в стилизованных компонентах, так и в эмоциях):
const H1 = props => (
< h1 css = { theme => theme . setFontWithRhythm ( 'Lato' , 3 , 1 , 'object' ) } />
) ; rhythmSizing(multiple) => Number Простой помощник, чтобы рассчитать multiple * rhythmHeight .
Отлично подходит для установки маржи или прокладки:
const H1 = styled . h1 `
margin-top: ${ props => props . theme . rhythmSizing ( 3 ) } rem;
` ; capsize By Seek: «Используя метаданные шрифта, текст теперь может быть измерен в соответствии с высотой его заглавных букв, когда обрезает пространство над заглавными буквами и ниже базовой линии».basekick от Майкла Таранто - еще одна реализация того же самого, нацеленную на меньшее.
