Trellisheets
Herein lies guidelines, base styles, tools, and examples for writing CSS for Trello.
Styleguide
The first thing you should do is read the styleguide.md.
In general, break up your CSS into as many small, modular, encapsulated parts as
possible, then import them as needed.
I’m making a new Trello site. How do I do that, briefly?
Copy the styles from /src. Copy the package.json, gulpfile.coffee,
and tools/. Use ./tools/build to build. Tweak the tooling for your project.
Strip any packages or components you don’t use.
I’m making a new Trello site. How do I do that, in detail?
We’re using…
- Gulp, a build tool
- LESS, a CSS preprocessor, and
- Autoprefixer, which applies browser prefixes
You can replace LESS and Gulp with whatever you like, so long as
you are adhere to the styleguide which you should read. The
styles and tooling here are written for LESS, so it’s a good place to start.
All the packages for building our CSS are on npm. Use npm install to install
them. You probably don’t want to include the packages in your project, so
include node_modules in your .gitignore, like here.
Gulp builds the LESS files. You can use the example
package.json and gulpfile.coffee to get
started. Those are just boilerplate; you’ll change these for your project.
Specifically, you don’t need http-server. You can just remove the line.
What’s in /tools? ./tools/build just calls the default gulp task which
builds the files in /src/entries. These are minified and
production-ready. ./tools/watch will watch for changes to style files and
automatically rebuild them. Use this for development. You can bring your own
scripts and tooling, of course.
You’ll likely have a core.css for all the pages on the site, then other CSS
files for specific pages, depending on the size of the project. Gulp will build
any files in /src/entries, so just add them there.
Reading through the style guide (have you read it yet?), you’ll see that we
try and keep our CSS pretty vanilla. We don’t heavily rely on preprocessors. We
mainly just use LESS for imports, variables, some mixins, and very shallow
nesting (like &:hover).
Autoprefixer has been tremendously useful. You can
write CSS to spec and it will write the vendor-prefixed declarations for you. No
more -webkit-*. If we drop browsers in the future, all we have
to do is change the browser list in the gulpfile. See
browserslist for more information.
Are these the styles we use on the web client?
No. The web client doesn't use the base styles and components provided here, but it does stick to the style guide (please read it). These styles should be used as a starting point for almost everything else: blogs, landing pages, etc.
Where does brand-colors.less come from?
They are exported from Trellicolors, which is the canonical source. You can get them in LESS or SCSS flavored variables. Also check out the Colors section in the Brand Guide for how we use brand colors.
I want to edit or add stylesheets to this repo.
- Read the style guide.
npm install- Add CSS to
src/**/and import in respective/src/entriesfiles. ./tools/watch, to build and watch styles./tools/serve, to serve the site- Visit localhost:8080 to test.
- Add to public/index.html or another example page.
- Make changes in a branch and open a pull request.