Skip to content

Latest commit

 

History

History
512 lines (379 loc) · 17.9 KB

README.md

File metadata and controls

512 lines (379 loc) · 17.9 KB
Raw

Tile

Chainable styling library for React. Built on top of Stitches.

Install

npm install tile-css

Usage Examples

User card (CodeSandbox):

import React from "react";
import { HStack, VStack, View, style } from "tile-css";

export function UserCard(props: {}) {
  return (
    <Container>
      <ProfilePhoto src="https://cldup.com/JuBBlQRbI1.jpg" />
      <User>
        <h1>Azer Koçulu</h1>
        Founder of Sway and Ray Labs.
      </User>
    </Container>
  );
}

const Container = HStack() // Horizontal stack
  .size(350)
  .space({ gap: 20, inner: 16, outer: 24 })
  .border(10, { color: "#eee" })
  .round(18, { rightBottom: 0 }) // disable round for right bottom
  .align({ y: "center" })
  .element();

const ProfilePhoto = View("img")
  .size(100, 100)
  .round("100%")
  .shadow()
  .element();

const User = VStack()
  .fg("#666")
  .sans(16, { leading: 1.25 })
  .select(
    "h1",
    style().margin(0).fg("#222").text(28, { weight: 700, tracking: -2 })
  )
  .element();

In addition to Frame, you can use HStack (orders items horizontally) and VStack (vertically) factory methods:

import { Frame, style } from 'tile-css';

const TestBox = Vstack("90vw", "90vh") // Vertically ordered items
  .align({ x: "center", y: "end" }) // align content to bottom center
  .scale(2.5) // Apply `scale` transform
  .border(10, { color: "blue" })
  .round(5) // Round by 5px
  .text(24) // font-size: 24px
  .mobile(style().padding(0)) // Set `padding` to 0, if user is on mobile
  .element();

export const App = () => {
  return (
    <TestBox>
      <div>Hello</div>
      <div>World</div>
    </TestBox>
  );
};

API

Accessibility

The Accessibility module in Tile provides methods for enhancing the accessibility of your React components. Currently, it focuses on text selection control.

import { View } from "tile-css"

const AccessibleQuote = View('blockquote')
  .selection({
    bg: 'rgba(0, 123, 255, 0.2)',
    fg: 'navy'
  })
  .element();

export const ImportantMessage = () => (
  <AccessibleQuote>
    This quote is selectable with custom highlight colors.
    It enhances readability and indicates that the text can be copied.
  </AccessibleQuote>
);

Methods:

Alignment

Methods for controlling the alignment of content within flex and grid containers.

import { View } from "tile-css"

const Container = View('100%', '100vh')
  .align({ x: 'center', y: 'end' }) // align contents to bottom center
  .element();

export const AppLayout = () => (
  <ResponsiveLayout>
    <Header />
    <MainContent />
    <Footer />
  </ResponsiveLayout>
);

Methods:

Aspect

Set the aspect ratio of an element.

import { View } from "tile-css"

const SquareElement = View()
  .aspect(1)
  .bg("red")
  .element();

export const SquareDemo = () => (<SquareElement />)

Methods:

Backdrop

Apply backdrop filter effects to elements.

import { View } from "tile-css"

const FrostedGlassCard = View(300, 200)
  .backdrop({
    blur: 10,
    saturate: "180%",
    brightness: "105%"
  })
  .bg('rgba(255, 255, 255, 0.2)')
  .border(1, { color: 'rgba(255, 255, 255, 0.3)' })
  .round(15)
  .padding(20)
  .element();

export const GlassCard = ({ children }) => (
  <FrostedGlassCard>{children}</FrostedGlassCard>
);

Methods:

Border

Methods for applying and manipulating border styles in React components.

import { View } from "tile-css"

const FancyButton = View('button')
  .size(200, 50)
  .color({ fg: 'blue', bg: 'white' })
  .border(2, { color: 'blue' })
  .round({ x: 25, y: 10 })
  .onHover(
    style()
      .color({ bg: 'blue', fg: 'white' })
      .border(2, { color: 'white' })
  )
  .element();

export const CustomButton = ({ children }) => (
  <FancyButton>{children}</FancyButton>
);

Methods:

Box

Methods for creating and manipulating layout containers. Use these functions to set dimensions, position elements, and control other box model properties in your React components.

import { View } from "tile-css"

const ResponsiveCard = View()
  .box({
    display: 'flex',
    flexDir: 'column',
    justify: 'center',
    items: 'center',

  })
  .element();

export const Card = ({ children }) => (
  <ResponsiveCard>{children}</ResponsiveCard>
);

Methods:

Colors

Methods for applying color-related styles to React components.

import { View } from "tile-css"

const KittenButton = View('button')
  .fg("#ff0")
  .bg({
    url: 'https://placekitten.com/100x100.jpg',
    size: 'cover'
  })
  .element();

export const FancyButton = ({ children }) => (
  <KittenButton>{children}</KittenButton>
);

Methods:

Cursor

Methods for setting cursor styles in React components.

import { View, Cursor } from "tile-css"

const InteractiveElement = View()
  .size(100)
  .bg('lightblue')
  .cursor(Cursor.Pointer)
  .element();

export const CursorDemo = () => <InteractiveElement />;

Methods:

Flex

Methods for creating and manipulating flex layouts in React components.

Methods:

Grid

Methods for creating and manipulating grid layouts in React components.

Methods:

Outline

Methods for applying outline styles to React components.

Methods:

Responsive

Methods for creating responsive and scalable layouts in React components.

const ResponsiveBox = View()
  .mobile(style().width('100%').bg('red'))
  .element();

Methods:

Scroll

Methods for controlling scrolling behavior and customizing scrollbars in React components.

const VerticalScrollableBox = View()
  .scroll({ y: true }) // Enable vertical scrolling
  .size(300)
  .element();

Methods:

Selectors

Methods for applying styles to various element states, pseudo-elements, and custom selectors in React components.

const HoverBox = View()
  .bg('blue')
  .onHover(style().bg('darkblue'))
  .element();

Methods:

Shadow

Methods for applying box shadow styles to React components.

const LightShadowBox = View()
  .shadow()
  .size(200)
  .element();

Methods:

Size

Methods for setting dimensions of React components.

import { View } from "tile-css"

const ResponsiveSquare = View()
  .size(600, 300) // width: 600px, height: 300px
  .bg('lightblue')
  .element();

export const SquareDemo = () => <ResponsiveSquare />;

Methods:

Spacing

Methods for applying spacing styles to React components.

import { View } from "tile-css"

const SpacedCard = View()
  .size(200)
  .padding({ x: 20, y: 15 }) // left, right: 20px -- top, bottom: 15px
  .margin(10, { right: 0 }) // 10px around, except right
  .element();

export const CardWithSpacing = ({ children }) => (
  <SpacedCard>{children}</SpacedCard>
);

Methods:

Text

Methods for applying text styles to React components.

const Info = View('p')
  .sans(16, {
    color: 'gray.800',
    weight: 500,
    leading: 1.6,
    tracking: '0.5px'
  })
  .element();

export const InfoSection = () => (
  <Info>
    This paragraph demonstrates responsive typography with hover effects.
  </Info>
);

Methods:

Transform

Methods for applying CSS transforms to React components.

const Card = View('div')
  .scale(1.5) // zoom in by 1.5
  .rotate(90) // 90deg
  .translate(-25, -10) // x, y
  .element();

export const InteractiveCard = ({ children }) => (
  <Card>{children}</Card>
);

Methods:

Sponsor

raylabs - logo