TEF Components

What is it?

TEF Components is a UI Kit, aimed to use in Telefonica projects. Although is an open source project, so we encorage you to use it anywhere! And we would appreciate your contribution back to the project by filing issues and fixing bugs :)

We are using less to compile our CSS files.

Four flavours are provided for each branding in the company. Please visit the following examples to preview all themes.

• Telefonica
• Movistar
• O2
• vivo

We also have a demo where you could switch brands and inspect breackpoints:

• Breackpoint inspector

See all components:

• Components

And all templates (components combined together):

• Templates

Installation

Use bower to install one of the themes:

bower install tef-components/theme_telefonica

In case you want to use other themes use:

• theme_movistar
• theme_o2
• theme_vivo

You will get the following file structure:

|-- bower_components
|   |-- buttons
|   |-- checkboxes
|   |-- dropdowns
|   |-- grid
|   |-- headers
|   |-- icons
|   |-- inputs
|   |-- lists
|   |-- modals
|   |-- radios
|   |-- sidebars
|   |-- tables
|   |-- tabs
|   |-- theme_telefonica
|   |-- toolbars
|   |-- tooltips
|   |-- utils

• Most folders will contain a component.
• theme_telefonica folder, in that case, is were we will generate our styles.
• utils folder contain a set of mixins and resets.

Usage

Browse your installed theme. Those are the important files:

|-- buttons
|   |-- less
|   |   |-- buttons.less

…

|-- theme_yourthemename
|   |-- Gruntfile.js
|   |-- less
|   |   |-- theme.less
|   |   |-- variables.less

Gruntfile.js

If you don't need the full set of components, you will be able to remove the unneeded ones by commenting the lines:

less: {
  default: {
    files: {
      'css/components.telefonica.css': 'less/theme.less',
      'templates/variables.css': 'templates/variables.less',

      // components
      'css/components/buttons.css': 'less/buttons.less',
      ...

      // web components
      'css/web_components/tef_button.css': 'less/tef_button.less',
      ...
    }
  }

and the minified version:

target: {
  files: {
    'css/components.telefonica.min.css': 'css/components.telefonica.css',

    // components
    'css/components/buttons.min.css': 'css/components/buttons.css',
    ...

    // web components
    'css/web_components/tef_button.min.css': 'css/web_components/tef_button.css',
    ...
  }

theme.less

Same thing here. To exclude unneeded components, comment the lines:

// Components
@import '../../grid/less/grid.less';
@import '../../buttons/less/buttons.less';
@import '../../inputs/less/inputs.less';
@import '../../dropdowns/less/dropdowns.less';
...

Compiling less

You will need grunt installed. Then run in your theme folder:

  grunt

You'll be watching for changes in your LESS files and they'll be compiled into CSS.

Let's edit!

Go an edit any property in a component (i.e: buttons/less/buttons.less)

Or modify a variable value (i.e: theme_telefonica/less/variables.less)

Then you will get a development and a minified file with all your selected components i.e:

• theme_telefonica/css/components.telefonica.less
• theme_telefonica/css/components.telefonica.min.less

Enjoy!