GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ceteio → Styled Components Rhythm

ceteio / Styled Components Rhythm

Vertical Rhythm and Font Baselines with Styled Components

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

cssfontstyled-componentscss-in-js

Projects that are alternatives of or similar to Styled Components Rhythm

Styled Theme
Extensible theming system for styled-components 💅
Stars: ✭ 183 (+140.79%)
Mutual labels:  font, styled-components, css-in-js
Design System
Priceline.com Design System
Stars: ✭ 604 (+694.74%)
Mutual labels:  styled-components, css-in-js
Glamorous Native
React Native component styling solved💄
Stars: ✭ 566 (+644.74%)
Mutual labels:  styled-components, css-in-js
Polished
A lightweight toolset for writing styles in JavaScript ✨
Stars: ✭ 7,074 (+9207.89%)
Mutual labels:  styled-components, css-in-js
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. 💅
Stars: ✭ 428 (+463.16%)
Mutual labels:  styled-components, css-in-js
Design System Utils
👩‍🎨 Access your design tokens with ease
Stars: ✭ 465 (+511.84%)
Mutual labels:  styled-components, css-in-js
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+9276.32%)
Mutual labels:  styled-components, css-in-js
Reactackle
Open-source components library built with React and Styled-Components.
Stars: ✭ 278 (+265.79%)
Mutual labels:  styled-components, css-in-js
Cattous
CSS in JSX for lazy developers, built using styled-components and styled-system
Stars: ✭ 38 (-50%)
Mutual labels:  styled-components, css-in-js
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-47.37%)
Mutual labels:  styled-components, css-in-js
Styled Theming
Create themes for your app using styled-components
Stars: ✭ 1,067 (+1303.95%)
Mutual labels:  styled-components, css-in-js
Twin.macro
🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+6659.21%)
Mutual labels:  styled-components, css-in-js
Glamorous
DEPRECATED: 💄 Maintainable CSS with React
Stars: ✭ 3,681 (+4743.42%)
Mutual labels:  styled-components, css-in-js
React Redux Saga Boilerplate
Starter kit with react-router, react-helmet, redux, redux-saga and styled-components
Stars: ✭ 535 (+603.95%)
Mutual labels:  styled-components, css-in-js
Css In Js Benchmarks
Stars: ✭ 360 (+373.68%)
Mutual labels:  styled-components, css-in-js
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: ✭ 761 (+901.32%)
Mutual labels:  styled-components, css-in-js
Cabana React
A design system built especially for both Sketch and React. 💎⚛️
Stars: ✭ 58 (-23.68%)
Mutual labels:  styled-components, css-in-js
react-native-css-in-js-benchmarks
CSS in JS Benchmarks for React Native
Stars: ✭ 46 (-39.47%)
Mutual labels:  styled-components, css-in-js
Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 260 (+242.11%)
Mutual labels:  styled-components, css-in-js
Styled Components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Stars: ✭ 35,473 (+46575%)
Mutual labels:  styled-components, css-in-js
View All Similar Projects ➔

12px vertical rhythm with correctly aligned baselines

Styled Components Rhythm

Beautifully aligned type with Styled Components

Installation

npm i @ceteio/styled-components-rhythm

or, with yarn:

yarn add @ceteio/styled-components-rhythm

Usage

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

Creating Rhythm

The main export is a function which returns a rhythm object suitable for adding to a Styled Components <ThemeProvider>:

import styledComponentsRhythm from '@ceteio/styled-components-rhythm';

const rhythm = styledComponentsRhythm(options);
// { theme: ..., global: ... }

options (Object)

  • baseFontSize (Number): The rem font size of your root element (ie; the <body>).
  • rhythmHeight (Number): The rem vertical grid size, to which text will have its baseline aligned. Works best when it divides evenly into (baseFontSize * defaultLineHeight).
  • capHeights (Object): Map of font-family font name -> proportional height of capital letters. Heights can be calculated with this tool. For example: 
    {
  Lato: 0.72,
}
  • defaultLineHeight (Number): Default for setFontWithRhythm() below. Must be a unitless value, which will be relative to the font size of an element.
  • debug (Boolean): Will inject red horizontal lines to body for visually debugging alignments.

Setting the theme

There are two pieces to the puzzle, both of which must be used to have effective vertical rhythm; rhythm.theme, and 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)

Pass this object to a Styled Components ThemeProvider as the theme:

const rhythm = styledComponentsRhythm(options);

return <ThemeProvider theme={rhythm.theme}>...</ThemeProvider>;

global (String)

A string containing global CSS that needs to be applied. Best done using styled-component's injectGlobal:

const rhythm = styledComponentsRhythm(options);

injectGlobal`${rhythm.global}`;

Using the theme values

You now have access to the following via the theme prop within a styled component:

rhythmHeight

The value as passed when creating the theme object.

setFontWithRhythm(fontName, fontSizeRem, desiredLineHeight) => String

The main function which will generate the CSS necessary to correctly align the font to a rhythm baseline.

This function makes 2 assumptions:

  1. All previous elements on the page are also correctly aligned to your vertical rhythm.
  2. You will not manually set padding-top or margin-bottom on this element.

Parameters

  • fontName (String): Should match the font name as you would declare it in the CSS property font-family.
  • fontSizeRem (Number): A multiple of baseFontSize.
  • desiredLineHeight (Number): Will be rounded to the nearest rhythm line so you don't have to worry.

The output is the CSS string to add to the component:

const H1 = styled.h1`
  ${props => props.theme.setFontWithRhythm('Lato', 3)}
`;

rhythmSizing(multiple) => Number

A simple helper to calculate multiple * rhythmHeight.

Works great for setting margins or padding:

const H1 = styled.h1`
  margin-top: ${props => props.theme.rhythmSizing(3)}rem;
`;

Related Projects

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].