styled components rhythmダウンロード - styled components rhythmソースコードのダウンロード

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 >
) ;

API

リズムを作成します

メインエクスポートは、スタイルのコンポーネントに追加するのに適したリズムオブジェクトを返す関数<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 ）：default for setFontWithRhythm()以下。要素のフォントサイズに関連するユニットレス値である必要があります。
debug （ Boolean ）：視覚的にデバッグアライメントのために、赤い水平線を体に注入します。
defaultOutputType （ String ）： setFontWithRhythm() ＆ global()の出力タイプを設定します。 'string' ：CSS文字列を返します。 'object' ：CSSスタイルのオブジェクトを返します。デフォルト： 'string' 。

テーマを設定します

パズルには2つのピースがあり、どちらも効果的な垂直リズムを持つために使用する必要があります。 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 ）：cssプロパティフォント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プロップを使用したオブジェクトとして（スタイルのコンポーネントと感情の両方で）：

 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;
` ;

styled components rhythm

スタイルのコンポーネントリズム

インストール

使用法

API

リズムを作成します

`options` （ `Object` ）

テーマを設定します

`theme` （ `Object` ）

`global([outputType]) => String`

テーマ値を使用します

`rhythmHeight`

`setFontWithRhythm(fontName, fontSizeRem[, desiredLineHeight[, outputType]]) => String`

`rhythmSizing(multiple) => Number`

関連プロジェクト

Geometry Rhythm Jumper最新版

太鼓の達人リズムコネクト

リズム音楽ソフトウェア

スピンリズムXD

リズムスターズクライミング

Win7x64 コンポーネント

chat.petals.dev

GPT Prompt Templates

GPTyped

fedraserif

fontplayer

XiaoyaPixel

Google Dorks

shepherd

mongo express

styled components rhythm

スタイルのコンポーネントリズム

インストール

使用法

API

リズムを作成します

options （ Object ）

テーマを設定します

theme （ Object ）

global([outputType]) => String

テーマ値を使用します

rhythmHeight

setFontWithRhythm(fontName, fontSizeRem[, desiredLineHeight[, outputType]]) => String

rhythmSizing(multiple) => Number

関連プロジェクト

`options` （ `Object` ）

`theme` （ `Object` ）

`global([outputType]) => String`

`rhythmHeight`

`setFontWithRhythm(fontName, fontSizeRem[, desiredLineHeight[, outputType]]) => String`

`rhythmSizing(multiple) => Number`