Name: docs
Owner: TEF components
Description: Lerar how to use tef components!
Created: 2015-03-23 14:56:51.0
Updated: 2015-10-22 09:50:38.0
Pushed: 2015-04-09 14:07:07.0
Homepage: null
Size: 132
Language: null
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
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.
We also have a demo where you could switch brands and inspect breackpoints:
See all components:
And all templates (components combined together):
Use bower to install one of the themes:
r 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
Browse your installed theme. Those are the important files:
buttons
|-- less
| |-- buttons.less
theme_yourthemename
|-- Gruntfile.js
|-- less
| |-- theme.less
| |-- variables.less
If you don't need the full set of components, you will be able to remove the unneeded ones by commenting the lines:
: {
fault: {
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:
et: {
les: {
'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',
...
Same thing here. To exclude unneeded components, comment the lines:
omponents
ort '../../grid/less/grid.less';
ort '../../buttons/less/buttons.less';
ort '../../inputs/less/inputs.less';
ort '../../dropdowns/less/dropdowns.less';
You will need grunt installed. Then run in your theme folder:
unt
You'll be watching for changes in your LESS files and they'll be compiled into CSS.
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:
Enjoy!