This is a pre-production deployment of Warehouse, however changes made here WILL affect the production instance of PyPI.
Latest Version Dependencies status unknown Test status unknown Test coverage unknown
Project Description

Collection of Sass styles and mixins for use at the Texas Tribune.

Installation and Configuration

You can install this using pip like this:

pip install tt_sass

Once installed, you need to add it to your INSTALLED_APPS. You can do that however you like or you can copy-and-paste this in after your INSTALLED_APPS are defined.

INSTALLED_APPS += ['tt_sass', ]

tt_sass relies on django-staticfiles in order to work. You must run the collectstatic command inside your project like this:

python manage.py collectstatic --link

Remember, you must re-run this command any time you add new staticfiles.

Now you’re ready to start using tt_sass.

Usage

You can use this inside your Sass by adding the following:

@import "tt_sass/texastribune"

Once you’ve done that, you need to compile your Sass. Assuming you’re using the default Texas Tribune setup of having a static directory at your project root, you should run the following:

sass --load-path=static/ --watch --poll --compass static

This command setups up the path correctly for all of your code and watches the file for changes.

Using the Grid

The grid is based off of Chris Coyer’s simple grid. The syntax has been changed around a little bit and it’s been mixinified, but the concept is the same.

To create a grid, similar to a row in frameworks like Foundation and Bootstrap, you use the .grid class. Inside a grid, you add cells and tell them how far to span. For example, you do this to create a grid with 12 columns (the default) and two cells, one of 8 columns and one of 4 columns:

<div class="grid">
    <div class="cell w-8"></div>
    <div class="cell w-4"></div>
</div>

Creating a Semantic Grid

TODO

Using the Responsive Mixins

tt_sass provides you with a breakpoint mixin for handling responsive design. It ships with the following breakpoints built-in:

mobile-portrait
defaults to max-width: 320px
mobile
defaults to max-width: 720px
tablet
defaults to min-width: 720px
classic
defaults to min-width: 960px

You can over ride any of these values by setting a variable by their name prior to importing tt_sass/texastribune.

You use the mixin like this:

p
    +breakpoint(mobile)
        font-size: 1.2em
    +breakpoint(tablet)
        font-size: 1.1em
    +breakpoint(classic)
        font-size: 1.0em

You can specify an arbitrary breakpoint as well:

div
    +breakpoint("max-width: 500px")
        background-color: red

Various Helpers

TODO

Examples

All of these are being documented in the example/ Django project. See that directory for instructions on how to run that project.

Contributing

This project is released in hopes that it helps people understand how you might build your own Sass framework for use in the context of a Django project. As such, contributions from those outside the Texas Tribune probably won’t be accepted.

Release History

Release History

0.2.3

This version

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.2.2

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.2.1

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.2.0

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.1.0

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

Download Files

Download Files

TODO: Brief introduction on what you do with files - including link to relevant help section.

File Name & Checksum SHA256 Checksum Help Version File Type Upload Date
tt_sass-0.2.3.tar.gz (9.9 kB) Copy SHA256 Checksum SHA256 Source Jan 14, 2013

Supported By

WebFaction WebFaction Technical Writing Elastic Elastic Search Pingdom Pingdom Monitoring Dyn Dyn DNS Sentry Sentry Error Logging CloudAMQP CloudAMQP RabbitMQ Heroku Heroku PaaS Kabu Creative Kabu Creative UX & Design Fastly Fastly CDN DigiCert DigiCert EV Certificate Rackspace Rackspace Cloud Servers DreamHost DreamHost Log Hosting