DOCSEARCHbyAlgolia
Submit Docs

Tachyons CSS

repository·main·Indexed 11 days ago

https://github.com/tachyons-css/tachyons

A functional CSS framework version 4.12.0 providing single-purpose utility classes for building responsive, high-performance user interfaces. It features a mobile-first architecture, an 8px baseline grid, an infinitely nestable responsive grid system, and 490 accessible color combinations.

Tokens
560
Snippets
4
Records
5
Agent score
46%

What's inside Tachyons

  1. Tachyons Core Concepts and Features

    main

    Tachyons is a functional CSS framework designed for speed, responsiveness, and reusability. Key characteristics include:

    • Mobile-first architecture: Designed with a mobile-first approach.
    • Single-purpose classes: Uses a class structure where each class does one thing extremely well.
    • Responsive Grid: Features an infinitely nestable responsive grid system.
    • Lightweight: The core library is approximately 14kB and optimized for maximum gzip compression.
    • Accessibility: Includes 490 accessible color combinations and ensures CSS does not impede HTML functionality.
    • Baseline: Uses an 8px baseline grid.
    • Compatibility: Works with plain HTML, React, Ember, Angular, Rails, and other frameworks.

  2. Compile Tachyons CSS

    main

    If you are modifying the source files in tachyons/src, you can compile your changes into minified and unminified CSS files located in the css directory.

    • Watch mode: Use npm start (or npm run build:watch) to compile changes and watch the src directory for updates.
    • One-time build: Use npm run build to compile the CSS once without watching for changes.
    # Watch for changes and compile
npm start
# OR
npm run build:watch

# Build once
npm run build

  3. Use the Tachyons CDN

    main

    The fastest way to integrate Tachyons into your project is to include the minified CSS file via a <link> tag in the <head> of your HTML document.

    <link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">

  5. Check for CSS class mutations

    main

    Tachyons includes a linter to ensure that classes have not been redefined or 'mutated'. This is useful for detecting naming collisions if you are integrating Tachyons with other CSS libraries or custom styles.

    npm run mutations