Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add list of most useful abbreviations #16

Open
iteles opened this issue May 20, 2017 · 3 comments
Open

Add list of most useful abbreviations #16

iteles opened this issue May 20, 2017 · 3 comments

Comments

@iteles
Copy link
Member

iteles commented May 20, 2017

When I first started using tachyons I found that there was quite a long list of things I kept having to look up. It would be good to have a 'starter crib sheet' for the most used abbreviations and their meanings across tachyons.

A good example of this is here: https://github.com/dwyl/learn-tachyons/blame/master/README.md#L326

@nelsonic
Copy link
Member

@iteles this would be a very useful addition for beginners! 🎉

@iteles
Copy link
Member Author

iteles commented May 21, 2017

Some that aren't making it into the 'beginners' round but are also pretty useful (things like whitespace for example didn't make it onto this list and can be easily looked up):

  • measure limits line length to what is generally agreed to be a readable line length
  • tracked should only be used for all caps text and ensures readable letter spacing
  • There are a number of font families already set up in tachyons with appropriate fallbacks but this module should be extended
  • fs-normal forces a standard font style
  • ttx transforms lettering to uppercase (ttu), lowercase (ttl) or capitalises the first letter (ttc)
  • [.debug] adds a 1px gold border to all elements which are given this class
    • For a quick and more widespread debug, uncomment out the debug module line at the bottom of src/tachyons.css and then run node run build from the root of the project
  • border-box is applied by default to all elements where this makes sense (making a declared width the actual width of the element, regardless of padding or borders added)
  • Basic grids are super easy in tachyons and this page gives you some simple examples
  • An absolutely positioned element can fill its parent relatively positioned element by using the class absolute--fillin conjunction with the absolute class (this also supports all of the standard tachyons break points)
  • Several options are provided for box shadow, from shadow-1 to shadow-5 (note that the variation in these are not shadow sizes but shadow positions)
  • pointer adds a pointer to the element on hover

iteles added a commit that referenced this issue May 21, 2017
iteles added a commit that referenced this issue May 21, 2017
iteles added a commit that referenced this issue May 24, 2017
iteles added a commit that referenced this issue May 29, 2017
@iteles
Copy link
Member Author

iteles commented May 29, 2017

Not sure whether the above should make it into our readme or not, maybe redundant (i.e. people have read the basics, now they want to read the full docs).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants