Transifex toolset css library
CSS
Latest commit 7ddf26b Feb 20, 2017 @jimzarkadas jimzarkadas Adds new grid sizes
Permalink
Failed to load latest commit information.
base Adds box sizing to base reset styles Nov 30, 2016
config Adds new text object Feb 20, 2017
helpers Adds helpers Oct 9, 2016
objects Adds new media object gutter size Feb 20, 2017
utilities Adds new grid sizes Feb 20, 2017
README.md Update README.md Sep 27, 2016

README.md

Transifex Marketing CSS UI toolkit

In this repository you will find all of the styles that are used in Transifex marketing and documentation websites.

Architecture

Our architecture follows the concept of Style Guide Driven Development and is based on ITCSS. It uses the BEMIT technique for HTML classes naming and focuses on keeping a modular, scalable and maintenable stylesheets codebase.

Files are structured as much simple as possible so that everything is easily discoverable. Each developer is free to create subfolders in each of the following folders in order to group files. First level folders though cannot be changed, only subfolders.

Config

Files with global settings.

Note: You don't have to keep all of your variables in these files. In this folder we keep only variables like breakpoints and brand colors that need to be accessed from everywhere. If you want to keep for example the padding of a specific object, you should write it in the object file with a scope or namespace in order to avoid conflicts with global variables.

config
├── _typography.scss
├── _colors.scss
└── etc.

Helpers

Files with mixins & functions.

helpers
├── _pxtorem.scss
├── _imagepath.scss
└── etc.

Base

Default styles of base elements. A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors.

base
├── _reset.scss
├── _typography.scss
└── etc.

Objects

Class-based selectors which define undecorated design patterns like grid or media object.

objects
├── _headings.scss
├── _inline-list.scss
├── _tables.scss
├── _grid.scss
├── _container.scss
└── etc.

Components

Class-based selectors that contain cosmetic CSS.

components
├── _modals.scss
├── _form.scss
├── _primary-nav.scss
├── _footer-nav.scss
├── _tabs.scss
├── _breadcrumb.scss
├── _accordion.scss
└── _hero.scss

Utilities

These are single-purpose, highly reusable classes that do one thing extremely well. We have utilities for things like margins, paddings, text alignment, font sizing, display properties, positioning properties, and more.

utilities
├── _typography.scss
├── _align.scss
├── _display.scss
└── etc.

Scope

These classes signify that a class creates a new styling context or Scope. They are used when we want to apply styles to auto-generated markup where we do not have control of HTML classes (eg. WYIWYG editors)

scopes
├── _blog-content.scss
└── etc.

Shame.scss

All hacks we are not proud of, together. Read more here.

_shame.scss

Manifest files

Files that include only @import statements. These are the main files that will be compiled to actual CSS and imported into our project.


├── _base.scss
├── _signup.scss
├── _main.scss
└── etc.

HTML Class naming

As menitoned before, we use the BEMIT technique with custom prefixes.

Block

  • o-name for objects (e.g. o-button)
  • c-name for components (e.g. c-form)
  • u-name for utilies (e.g. u-display-inlineBlock)
  • s-name for scopes (e.g. s-home)

Element E.g. <input type="text" class="c-form__input" />

Modifier E.g. <form class="c-form--horizontal">

Naming conventions & guidelines

  • [is|has]-stateName for states, e.g. is-open / has-dropdown
  • @breakPoint - for screen specific styles e.g. u-textAlign-center@md (align center only on medium devices)
  • js-name for JS specific use. We never use classes without js prefix in our scritps.

Further read