artin/tachyons
1
0
Fork 0
mirror of https://github.com/tachyons-css/tachyons.git synced 2026-02-06 13:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update readme. Remove reference to scss.

Browse Source
This commit is contained in:
mrmrs 2015-02-02 15:59:01 -08:00
parent e6000e72de
commit e1b70d8a74
1 changed files with 21 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
README.md
View File

@ -9,32 +9,28 @@ Build responsive, performant, and easy to maintain interfaces faster.
* Everything should be 100% responsive
* Everything should be readable on any device
* Everything should be as performant as possible
* Everything should be as performant as possible
* Designing in the browser should be easy
* It should be easy to change an interface without breaking any existing interfaces
* Doing one thing extremely well promotes reusability and reduces repetition
* Doing one thing extremely well promotes reusability and reduces repetition
## Features
* Mobile-first css
* Mobile-first css
* Single-purpose class architecture
* Optimized for maximum gzip compression
* 8.57kB when minified and gzipped
* 10.7kB when minified and gzipped
* Usable across projects
* Infinitely nestable responsive grid system
* Nice default color palettes
* Currently built on sass. Will eventually move the main build to rework,
* Several color palettes
* Currently built on sass. Will eventually move the main build to rework,
but will offer ports for less, sass, stylus, and vanilla css.
## Getting started
The easiest way to use tachyons is to include the minified file in the head.
The easiest way to use tachyons is to include the minified file in the head.
You can include the latest, minified version of tachyons by including this in the head of your html file
### Include it in a project
```
<link rel="stylesheet" src="http://tachyons.io/css/tachyons.min.css">
```
I will add version controlled cdn hosted options soon.
@ -56,17 +52,17 @@ You can alternatively fork the repo and clone your own version of it.
```
npm start
```
This will watch the sass directory and do the following on file change:
* Compile scss files down to css/tachyons.css and css/tachyons.min.css
* Run autoprefixer on css/tachyons.css (this allows you to keep vendor prefixes out of your source files)
* Run csslint and print the results to your terminal window.
* Run an instance of browser-sync - this causes any browsers or devices pointing to your local server to reload on file change. It will also keep all browsers in sync with eachother i.e. they will
all scroll simultaneously. If you fill out a form on one device all devices will be updated with that content. It's a huge help if you are testing multiple browsers or devices.
This will watch the src directory and do the following on file change:
* Compile rework css files
* Run autoprefixer (this allows you to keep vendor prefixes out of your source files)
* Run an instance of browser-sync - this causes any browsers or devices pointing to your local server to reload on file change. It will also keep all browsers in sync with eachother i.e. they will all scroll simultaneously. If you fill out a form on one device all devices will be updated with that content. It can be a huge help if you are testing multiple browsers or devices.
## Built with Tachyons
## Some things I've built with Tachyons
* http://joinoneroom.com
* http://mn-ml.cc
* http://clrs.cc
* http://gfffs.com
* http://pesticide.io
* http://mrmrs.io/btns/
* http://zachhurd.com
@ -77,42 +73,19 @@ all scroll simultaneously. If you fill out a form on one device all devices will
* http://designbytyping.com
* http://☠☣.ws
## Tachyons is built with
* https://github.com/gulpjs/gulp
* https://github.com/shakyShane/browser-sync
* https://github.com/dlmanning/gulp-sass
* https://github.com/postcss/autoprefixer
* https://github.com/jonathanepollack/gulp-minify-css
* https://github.com/hparra/gulp-rename
* https://github.com/sun-zheng-an/gulp-shell
* https://github.com/sindresorhus/gulp-size
* https://github.com/CSSLint/csslint
* https://github.com/coderhaoxin/gulp-file-include
* https://github.com/t32k/stylestats
* https://github.com/giakki/uncss
* https://github.com/gulpjs/gulp-util
* https://github.com/floatdrop/gulp-watch
## File Sizes
| Name | | gzipped |
|----------------------|----------------|----------------|
| tachyons.css | 74.43 kB | 13.03 kB |
| tachyons.min.css | 47.43 kB | 8.57 kB |
## Class Names
## A Note on Class Names
As tachyons started out as an experiment in css performance - many of the names
were programmatically generated using vim macros based on the content of the properties and values
they represent. As I have begun to work on tachyons more and use it in the wild,
I've begun to codify common classes to things that my brain naturally leans towards remembering.
were programmatically generated using vim macros based on the content of the properties and values
they represent. As I have begun to work on tachyons more and use it in the wild,
I've begun to codify common classes to things that my brain naturally leans towards remembering.
I like unix a lot and subsribe to cp over copy any day of the week.
That being said I think the naming in Tachyons needs a lot of work and I am open to hearing peoples
feedback on things they like and things they don't like. Once Tachyons is a little more finished I
will be generating different 'flavors' of the framework. One version being a more verbose class naming system
that seems to be what many people prefer.
that seems to be inline what many people prefer.
## License
The MIT License (MIT)