What is Queso?

This is a guide to branding elements used for product development at The Texas Tribune. It's a CSS framework and platform-agnostic approach to maintaining consistent UI/UX for our end users.

Getting Started

How to use queso styles in your project.

SCSS

  1. Install the SCSS files as a dependency:

    npm install @texastribune/queso-ui --save-dev

  2. Create an imports file to install each SCSS file. You'll rarely need all of the components or layouts so just take what you need for your project and override as you please.

      
// styles.scss

@import '@texastribune/queso-ui/assets/scss/1-settings/all';
// Optional: Add overrides to queso SCSS variables or new variables here
// @import 'settings/all';
// @import 'settings/my-custom-vars';

@import '@texastribune/queso-ui/assets/scss/2-tools/all';
@import '@texastribune/queso-ui/assets/scss/3-resets/all';
@import '@texastribune/queso-ui/assets/scss/4-elements/all';
@import '@texastribune/queso-ui/assets/scss/5-typography/all';

// components
@import '@texastribune/queso-ui/assets/scss/6-components/icon/icon';
@import '@texastribune/queso-ui/assets/scss/6-components/navbar/navbar';
@import '@texastribune/queso-ui/assets/scss/6-components/site-footer/site-footer';

// Optional: Add overrides to queso components or new components here
// @import 'components/navbar';
// @import 'components/site-footer';
// @import 'components/my-custom-component';

// layout
@import '@texastribune/queso-ui/assets/scss/7-layout/align';
@import '@texastribune/queso-ui/assets/scss/7-layout/container';
@import '@texastribune/queso-ui/assets/scss/7-layout/content-grid';
@import '@texastribune/queso-ui/assets/scss/7-layout/display';
@import '@texastribune/queso-ui/assets/scss/7-layout/width';

// utilities
@import '@texastribune/queso-ui/assets/scss/utilities/all';

    Note: You may need to adjust the paths on the @imports. Example:

    @import 'node_modules/@texastribune/queso-ui/assets/scss/1-settings/all';

  3. Compile SCSS into CSS. In many projects, we use queso-tools to handle compiling assets. Alternatively, dart-sass is a great, low-dependency compiler.

CSS CDN

Coming soon

Style API

We don't normally think of a CSS framework as data, but this library is built out in such a way that we can access various parts of the system through JSON endpoints.

Endpoints

Examples