Comparing version 3.1.1 to 4.0.0-beta.3
{ | ||
"name": "tachyons", | ||
"version": "3.1.1", | ||
"description": "Performant, mobile-first, and 100% responsive modular css framework.", | ||
"version": "4.0.0-beta.3", | ||
"description": "Functional CSS for humans", | ||
"author": "mrmrs", | ||
"style": "src/tachyons.css", | ||
"style": "css/tachyons.css", | ||
"files": [ | ||
@@ -21,38 +21,40 @@ "css", | ||
"copy-files": "^0.1.0", | ||
"immutable-css-cli": "^1.1.1", | ||
"normalize.css": "^3.0.3", | ||
"tachyons-background-size": "^3.0.2", | ||
"tachyons-base": "^1.2.2", | ||
"tachyons-border-colors": "^3.1.1", | ||
"tachyons-border-radius": "^3.0.2", | ||
"tachyons-border-style": "^2.0.1", | ||
"tachyons-border-colors": "^4.0.4", | ||
"tachyons-border-radius": "^4.0.0", | ||
"tachyons-border-style": "^3.0.0", | ||
"tachyons-border-widths": "^2.0.1", | ||
"tachyons-borders": "^2.0.2", | ||
"tachyons-box-sizing": "^3.0.3", | ||
"tachyons-box-sizing": "^3.1.0", | ||
"tachyons-clears": "^2.0.3", | ||
"tachyons-cli": "^0.3.3", | ||
"tachyons-colors": "^4.0.2", | ||
"tachyons-colors": "^5.1.0", | ||
"tachyons-coordinates": "^2.2.0", | ||
"tachyons-debug": "^1.1.1", | ||
"tachyons-display": "^3.0.3", | ||
"tachyons-display": "^4.0.0", | ||
"tachyons-floats": "^2.0.3", | ||
"tachyons-font-family": "^4.0.2", | ||
"tachyons-font-family": "^4.1.1", | ||
"tachyons-font-style": "^2.2.2", | ||
"tachyons-font-weight": "^4.0.2", | ||
"tachyons-forms": "^1.1.0", | ||
"tachyons-forms": "^2.0.1", | ||
"tachyons-heights": "^4.0.2", | ||
"tachyons-hovers": "^2.0.4", | ||
"tachyons-images": "^1.0.3", | ||
"tachyons-letter-spacing": "^2.0.3", | ||
"tachyons-letter-spacing": "^2.1.0", | ||
"tachyons-line-height": "^2.0.3", | ||
"tachyons-links": "^2.0.3", | ||
"tachyons-links": "^3.0.0", | ||
"tachyons-lists": "^2.0.3", | ||
"tachyons-max-widths": "^3.0.3", | ||
"tachyons-max-widths": "^3.1.0", | ||
"tachyons-modules": "^1.0.3", | ||
"tachyons-opacity": "^1.0.0", | ||
"tachyons-overflow": "^2.0.3", | ||
"tachyons-position": "^4.1.2", | ||
"tachyons-spacing": "^4.0.3", | ||
"tachyons-overflow": "^3.0.0", | ||
"tachyons-position": "^5.0.0", | ||
"tachyons-skins": "^3.1.0", | ||
"tachyons-spacing": "^5.0.2", | ||
"tachyons-text-align": "^2.0.3", | ||
"tachyons-text-decoration": "^3.0.3", | ||
"tachyons-text-decoration": "^3.1.0", | ||
"tachyons-text-transform": "^3.0.3", | ||
"tachyons-type-scale": "^4.0.3", | ||
"tachyons-type-scale": "^5.0.1", | ||
"tachyons-typography": "^2.0.3", | ||
@@ -62,4 +64,5 @@ "tachyons-utilities": "^1.1.3", | ||
"tachyons-visibility": "^1.0.3", | ||
"tachyons-white-space": "^2.0.3", | ||
"tachyons-widths": "^4.0.1" | ||
"tachyons-white-space": "^3.0.0", | ||
"tachyons-widths": "^4.0.1", | ||
"tachyons-word-break": "1.0.0" | ||
}, | ||
@@ -89,5 +92,7 @@ "contributors": [ | ||
"scripts": { | ||
"start": "node build.js && tachyons src/tachyons.css > css/tachyons.css && tachyons src/tachyons.css -m > css/tachyons.min.css" | ||
"build": "node build.js && npm start", | ||
"mutations": "immutable-css src/tachyons.css --strict", | ||
"start": "tachyons src/tachyons.css > css/tachyons.css && tachyons src/tachyons.css -m > css/tachyons.min.css" | ||
}, | ||
"dependencies": {} | ||
} |
119
readme.md
# TACHYONS | ||
CSS for designing faster than the speed of light. | ||
Functional CSS for humans. | ||
For the full set of documentation, please see [tachyons.io](http://tachyons.io). | ||
Quickly build and design new UI without writing CSS. | ||
## About | ||
Tachyons is a work in progress and still heavily in flux. | ||
The important parts of tachyons are the separation of concerns and the mobile-first | ||
and modular architecture. | ||
More documentation and examples will be coming. For now - reading the source files | ||
in the src directory are a great way to get up to speed. I promise they are not complicated. | ||
There is now a [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com). Submit your email to be automatically invited. | ||
## TLDR; | ||
Build responsive, performant, and easy to maintain interfaces faster than the speed of light. | ||
## Principles | ||
@@ -35,45 +20,75 @@ | ||
* Mobile-first css | ||
* Single-purpose class architecture | ||
* Single-purpose class structure | ||
* Optimized for maximum gzip compression | ||
* Less than 20kB when minified and gzipped | ||
* 7.2kB when minified and gzipped | ||
* Usable across projects | ||
* Infinitely nestable responsive grid system | ||
* Several color palettes | ||
* Currently built on rework | ||
* Built with Postcss | ||
## Getting started | ||
The easiest way to use tachyons is to include the minified file in the head. | ||
If you want to reduce the size of the library greatly on production I suggest | ||
using [uncss](https://github.com/giakki/uncss) to remove styles you aren't referencing. | ||
Docs can be found at http://tachyons.io/docs | ||
The modules are generally pretty small and thus easy to read and grock if you're familiar with css at all. | ||
### Modify the source | ||
Set up the project by cloning the repo, navigating into it, and installing the necessary dependencies by running the following commands: | ||
### Use the CDN | ||
The quickest and easiest way to start using tachyons is to include a reference | ||
to the minified file in the head of your html file. | ||
The latest version can always be found at the link below. | ||
```html | ||
<link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/tachyons-css/tachyons.min.css"> | ||
``` | ||
git clone git@github.com:mrmrs/tachyons.git yourProject | ||
cd yourProject | ||
rm -rf .git | ||
git init | ||
git add remote git@github.com/yourUserName/yourProject.git | ||
npm install . && npm start | ||
Currently the latest version is 4.0.1-beta | ||
```html | ||
<link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/tachyons-css/4.0.1-beta/tachyons.min.css"> | ||
``` | ||
You can alternatively fork the repo and clone your own version of it. | ||
### Local Setup | ||
### To run the development environment | ||
Clone the repo from github and install dependencies through npm. | ||
``` | ||
npm start | ||
git clone https://github.com/tachyons-css/tachyons.git | ||
cd tachyons | ||
npm install | ||
``` | ||
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. | ||
## Some things I've built with Tachyons | ||
#### Build | ||
##### First time | ||
Tachyons is available as a series of small self contained css modules. They aren't dependent on eachother but | ||
are designed to play well together. But tachyons is also just css. And you should feel free to edit css | ||
that is in your project. The first time you build tachyons all of the css gets installed through npm, but the modules | ||
then get copied over to your local src directory and then the tachyons-cli uses a series of postcss plugins to | ||
compile the source down to vanilla css. | ||
##### Updating | ||
If you want to update a tachyons partial, update the module through npm and run the build command again. Note | ||
this will copy over all source files, so if you've modified src/ your changes might be overwritten. | ||
```npm run build``` | ||
#### Dev | ||
If you want to just use src as a jumping off point and edit all the code yourself, you can compile all of your wonderful changes by running | ||
```npm start``` | ||
This will output both minified and unminified versions of the css to the css directory. | ||
## Some websites that use modules from the tachyons project | ||
* http://bluebottlecoffee.com | ||
* http://aboutlife.com | ||
* http://clrs.cc | ||
* http://mrmrs.io/gradients | ||
* http://joinoneroom.com | ||
* https://www.getnoodl.es | ||
* https://natwelch.com | ||
* http://mrmrs.io/profile/ | ||
* http://mn-ml.cc | ||
* http://clrs.cc | ||
* http://gfffs.com | ||
* http://pesticide.io | ||
@@ -83,20 +98,14 @@ * http://mrmrs.io/btns/ | ||
* http://mrmrs.cc | ||
* http://mrmrs.io | ||
* http://mrmrs.io/up/ | ||
* http://mrmrs.io/beats/ | ||
* http://designbytyping.com | ||
* http://☠☣.ws | ||
* http://mrmrs.io/writing | ||
* http://fade.pics | ||
* http://gfffs.com | ||
## A Note on Class Names | ||
And of course... | ||
* http://tachyons.io | ||
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. | ||
I like unix a lot and subscribe to naming conventions like cp over copy for common classes that I use frequently. | ||
## Help | ||
That being said I think the naming in Tachyons needs work and I am open to hearing peoples | ||
feedback on things they like and also the things they don't like. Once Tachyons is a little more finished I | ||
will be generating different 'flavors' of the framework that use different naming patterns. | ||
One version being a more verbose class naming system that seems to be aligned with what many people prefer. | ||
If you have a question feel free to open an issue here or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com). | ||
@@ -103,0 +112,0 @@ ## License |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
121
211185
46
55
5187
2