Skip to content
This repository has been archived by the owner on Oct 14, 2022. It is now read-only.

Latest commit

 

History

History
54 lines (41 loc) · 2.33 KB

README.md

File metadata and controls

54 lines (41 loc) · 2.33 KB

x-ui

x-ui is based on a modified/stripped version of Tachyons CSS, a functional CSS framework.

Some of the original utility classes have been removed, and others have been added, along with a reorganization of the available breakpoints, support for custom color palettes, box-shadows, and minimal browser reset styles.

This is an opinionated structure built for my personal use, but still very flexible to add/change almost everything to suit specific use cases.

Usage

Required nodejs and npm installed.

  • Install: $ npm install
  • Build: $ npm build
  • Dev with watch & browsersync: $ npm start

Edit theme.css file to change variable settings for: typescale, spacing(applied to paddings, margins, fixed widths and heights), colors, box-shadows, transition timing and duration, breakpoint values.

What utilities have been removed from the original Tachyons

  • 🚫 normalize.css
  • 🚫 font families
  • 🚫 skins and skins:pseudo
  • 🚫 border colors
  • 🚫 box-shadows
  • 🚫 floats, clears and clearfix
  • 🚫 table styling classes
  • 🚫 debug classes
  • 🚫 show/hide class hover classes
  • 🚫 add box-shadow on hover classes
  • 🚫 breakpoint *-ns
  • 🚫 all .aspect-ratio-* classes
  • 🚫 transitions from .link class
  • 🚫 .dim, .glow and .underline-hover
  • 🚫 .bg-animate, .grow and .grow-large

What has been Modified/added

  • Minimal reset and basic browser default overrides

  • Default system fonts or if browser supports variable fonts, use the PT Root UI typeface included

  • Basic color palette for wireframing (for background-color, border-color and color)

  • The above color palette also contemplates :hover, :focus and :active states for background-color, border-color and color

  • Custom box-shadow utility classes, includes :hover & :focus states for each

  • Basic form presets

  • breakpoints use min-width only

  • new default breakpoints:

    • *-m = 640px
    • *-l = 960px
    • *-xl = 1280px

  • .hover-animate with editable timing and easing variables in theme.css, which when used together with .hover-*, .focus-*ad .active-* classes adds transition animation

  • .mt-auto and .mb-auto classes

  • .z-*, .o-* now available in all breakpoints, and a new .z--1: z-index: -1 was added to all breakpoints too.