Herein lies guidelines, base styles, tools, and examples for writing CSS for Trello.
The first thing you should do is read the
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
./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?
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 install to install
them. You probably don’t want to include the packages in your project, so
node_modules in your
.gitignore, like here.
Gulp builds the LESS files. You can use the example
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.
./tools/build just calls the default gulp task which
builds the files in
/src/entries. These are minified and
./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
Autoprefixer has been tremendously useful. You can
write CSS to spec and it will write the vendor-prefixed declarations for you. No
-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.
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.
- Add CSS to
src/**/and import in respective
./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.