Another Ribbon Style

[khebs@live.com]

Yet another ribbon for ExtJS 4. Experimental UX.

- FIXME: Some CSS Problem with Firefox Chrome in XP. Specifically in ButtonGroups does not properly aligns the height with other groups if it has only 1 item or a menu button, etc. Please experiment, if you think you fixed it, please post back your magic solution here.



/**
* @class App.lib.ux.Ribbon
* @extend Ext.tab.Panel
*/
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
margin: '5 0 0 0',
autoHeight: true,

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});




/**
* @class App.lib.ux.RibbonTab
* @extend Ext.tab.Tab
*/
Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
unstyled: true,
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '1 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});


The CSS



.ui-ribbonbar
{
border-color: #99BBE8;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
border-bottom: 1px solid #99BBE8 !important;
}

.ui-ribbonbar .x-btn-as-arrow em
{
display: block;
background-color: transparent;
padding-bottom: 15px;
font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
padding-bottom: 13px;
}

.ui-ribbonbar .x-tab-bar-strip-default-plain-horizontal
{
height: 0px !important;
}

.ui-ribbonbar .x-tab-default-top
{
background-image: none;
background-color: transparent;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
font-size: 0px !important;
text-indent: -999px;
}

.ui-ribbonbar .x-tab-top-active
{
border: 1px solid #8DB2E3;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(30%,white),color-stop(100%,#DFE9F5));
background-image: -moz-linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
background-image: linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
}

.ui-ribbonbar .x-tab-default-top-active
{
border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
font-weight: normal !important;
}

.ui-ribbonbar .x-toolbar-default
{
border-color: #99BBE8;
background-image: none;
background-color: #D3E1F1;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
}


Sample Usage:

Make Ribbon Tabs



/**
* @class App.view.employees.list.Ribbon
* @extend App.lib.ux.RibbonTab
*/
Ext.define('App.view.employees.list.Ribbon', {
extend: 'App.lib.ux.RibbonTab',
alias: 'widget.employeeslistribbon',

title: 'Employees',
closable: false,

items: [{
title: 'Data',
items: [{
text: 'List of All\nEmployees',
iconCls: 'icon-ribbon-address32',
scale: 'large',
iconAlign: 'top',
action: 'list'
}]
}, {
title: 'New',
columns: 3,
items: [{
text: 'New Employee',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-contact32',
action: 'newemployee'
}, {
text: 'New Department',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-inbox32'
}, {
text: 'Archived Documents',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-docs32'
}]
}, {
title: 'Action',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Delete',
action: 'delete',
iconCls: 'icon-ribbon-deletecontact32'
}, {
text: 'Refresh All',
iconCls: 'icon-ribbon-refresh32'
}]
}, {
title: 'Reports',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Available Reports',
iconCls: 'icon-ribbon-report32'
}]
}]
});


Ribbon Bar - which is probably the north region / dock: 'top' of your viewport / window



/**
* @class App.view.ui.RibbonBar
* @extend Ext.tab.Panel
*/
Ext.define('App.view.ui.RibbonBar', {
extend: 'App.lib.ux.Ribbon',
alias: 'widget.uiribbonbar',

initComponent: function () {
this.callParent(arguments);
}
});

...

Ext.Viewport({
...
items: [{
xtype: 'uiribbonbar', region: 'north'
}]
...
});


In your controller



/**
* @class App.controller.Employees
* @extend Ext.app.Controller
*/
Ext.define('App.controller.Employees', {
extend: 'Ext.app.Controller',

views: [
'employees.list.Ribbon',
...
],

refs: [
// List
{ ref: 'listRibbon', selector: 'employeeslistribbon', xtype: 'employeeslistribbon', autoCreate: true }.
{ ref: 'ribbonBar', selector: 'uiribbonbar' }.
...
...
],

// private
init: function () {
this.control({
'employeeslistribbon': {
activate: this.showList
},
...
...
});
},

// private
onLaunch: function () {
this.showList();
},

/**
* Shows Employee Listings
* @method showList
*/
showList: function () {
var rb = this.getRibbonBar(), ribbon = this.getListRibbon();
...
if (!ribbon.rendered) rb.add(ribbon);
...
//rb.setActiveTab(ribbon);
},

...
...

});

[khebs@live.com]

ui-ribbon.css



.ui-ribbonbar
{
background: transparent;
}

.ui-ribbonbar .x-panel-body-default
{
border-color: #99BBE8 !important;
background-image: none !important;
background-color: #DFE9F5 !important;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(60%,#ccdbec)) !important;
background-image: -moz-linear-gradient(top,#DFE9F5 5%,#ccdbec 60%) !important;
background-image: linear-gradient(top,#DFE9F5 5%,#ccdbec 60%) !important;

border-bottom: 1px solid #99BBE8 !important;

border-radius: 2px 2px 0px 0px;
-moz-border-radius: 2px 2px 0px 0px;
-webkit-border-radius: 2px 2px 0px 0px;
-o-border-radius: 2px 2px 0px 0px;
-ms-border-radius: 2px 2px 0px 0px;
-khtml-border-radius: 2px 2px 0px 0px;
}

.ui-ribbonbar .x-tab-bar-strip
{
border-top: 0px;
padding-right: 10px;
}

.ui-ribbonbar .x-btn-as-arrow em
{
display: block;
background-color: transparent;
padding-bottom: 15px;
font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
padding-bottom: 13px;
}

.ui-ribbonbar .x-tab-bar-strip-default-plain-horizontal
{
height: 0px !important;
}

.ui-ribbonbar .x-tab-default-top
{
background-image: none;
background-color: transparent;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
font-size: 0px !important;
text-indent: -999px;
}

.ui-ribbonbar .x-tab-bar-body
{
top: 3px !important;
border-bottom: 0px !important;
}

.ui-ribbonbar .x-tab-top-active
{
border: 1px solid #8DB2E3;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(5%,white),color-stop(80%,#DFE9F5));
background-image: -moz-linear-gradient(top,white,#F5F9FE 5%,#DFE9F5 80%);
background-image: linear-gradient(top,white,#F5F9FE 5%,#DEECFD 80%);
}

.ui-ribbonbar .x-tab-default-top-active
{
border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
font-weight: normal !important;
}

.ui-ribbonbar .x-tab-bar-body .x-box-inner
{
height: 24px !important;
}


App.lib.ux.Ribbon



/**
* @class App.lib.ux.Ribbon
* @extend Ext.tab.Panel
*/
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
autoHeight: true,
border: false,

bodyStyle: 'margin-bottom: -3px;',

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});


App.lib.ix.RibbonTab



/**
* @class App.lib.ux.RibbonTab
* @extend Ext.tab.Tab
*/
Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '3 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});


26028

[ajaxvador]

Hi,

I tried the example posted on the forum, but that does not work. can you post an example or demo

(beautiful screen shot) =D>
many thanks

[khebs@live.com]

I tried the example posted on the forum, but that does not work. can you post an example or demo
- What did not work?

This ux works just like the Toolbar, nothing special. Maybe just the css and some config in the ux itself.

(beautiful screen shot)
- Thanks for appreciating it

[ajaxvador]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="scripts/ext4//resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/ext4/ext-all.js"></script>

<style>
.ui-ribbonbar
{
border-color: #99BBE8;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
border-bottom: 1px solid #99BBE8 !important;
}

.ui-ribbonbar .x-btn-as-arrow em
{
display: block;
background-color: transparent;
padding-bottom: 15px;
font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
padding-bottom: 13px;
}

.ui-ribbonbar .x-tab-bar-strip-default-plain-horizontal
{
height: 0px !important;
}

.ui-ribbonbar .x-tab-default-top
{
background-image: none;
background-color: transparent;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
font-size: 0px !important;
text-indent: -999px;
}

.ui-ribbonbar .x-tab-top-active
{
border: 1px solid #8DB2E3;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(30%,white),color-stop(100%,#DFE9F5));
background-image: -moz-linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
background-image: linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
}

.ui-ribbonbar .x-tab-default-top-active
{
border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
font-weight: normal !important;
}

.ui-ribbonbar .x-toolbar-default
{
border-color: #99BBE8;
background-image: none;
background-color: #D3E1F1;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
}
</style>

<script>

Ext.require([ '*' ]);

/**
* @class App.lib.ux.Ribbon
* @extend Ext.tab.Panel
*/
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
margin: '5 0 0 0',
autoHeight: true,

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});

/**
* @class App.lib.ux.RibbonTab
* @extend Ext.tab.Tab
*/
Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
unstyled: true,
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '1 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});

/**
* @class App.view.employees.list.Ribbon
* @extend App.lib.ux.RibbonTab
*/
Ext.define('App.view.employees.list.Ribbon', {
extend: 'App.lib.ux.RibbonTab',
alias: 'widget.employeeslistribbon',

title: 'Employees',
closable: false,

items: [{
title: 'Data',
items: [{
text: 'List of All\nEmployees',
iconCls: 'icon-ribbon-address32',
scale: 'large',
iconAlign: 'top',
action: 'list'
}]
}, {
title: 'New',
columns: 3,
items: [{
text: 'New Employee',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-contact32',
action: 'newemployee'
}, {
text: 'New Department',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-inbox32'
}, {
text: 'Archived Documents',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-docs32'
}]
}, {
title: 'Action',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Delete',
action: 'delete',
iconCls: 'icon-ribbon-deletecontact32'
}, {
text: 'Refresh All',
iconCls: 'icon-ribbon-refresh32'
}]
}, {
title: 'Reports',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Available Reports',
iconCls: 'icon-ribbon-report32'
}]
}]
});

var tabs = Ext.createWidget('tabpanel', {

itemId: 'tabPanel',
activeTab: 0,
border:false,
frame:false, plain:false,
defaults :{
bodyPadding: 10
},
items: [{

title: 'Short Text'
// closable: true
},{

title: 'Long Text'
}]
});


Ext.onReady(function() {
Ext.QuickTips.init();

var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [

{
region: 'north',

height: 100,

layout:'fit',
items: [{xtype: 'uiribbonbar'}]
} ,

Ext.create('Ext.tab.Panel', {
region: 'center',
deferredRender: false,
activeTab: 0,
items: [{
title: 'Bureau',

autoScroll: true
}, {
// contentEl: 'center2',
title: 'Center Panel',
autoScroll: true,
closable: true
}]
})]
});
});
</script>
</head>
<body>
</body>
</html>

http://mbfusion.com/rib.png


thanks for your help

[ykey]

I was able to get it working as is and can post the code later today if nobody beats me to it.

[ykey]

You will need to add the CSS for the extension and your icons from the above post.



Ext.onReady(function() {
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
autoHeight: true,
border: false,

bodyStyle: 'margin-bottom: -3px;',

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});

Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '3 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});

Ext.define('App.view.ui.RibbonBar', {
extend: 'App.lib.ux.Ribbon',
alias: 'widget.uiribbonbar',

initComponent: function () {
this.callParent(arguments);
}
});

Ext.define('App.view.employees.list.Ribbon', {
extend: 'App.lib.ux.RibbonTab',
alias: 'widget.employeeslistribbon',
title: 'Employees',
closable: false,
items: [{
title: 'Data',
items: [{
text: 'List of All\nEmployees',
iconCls: 'icon-ribbon-address32',
scale: 'large',
iconAlign: 'top',
action: 'list'
}]
}, {
title: 'New',
columns: 3,
items: [{
text: 'New Employee',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-contact32',
action: 'newemployee'
}, {
text: 'New Department',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-inbox32'
}, {
text: 'Archived Documents',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-docs32'
}]
}, {
title: 'Action',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Delete',
action: 'delete',
iconCls: 'icon-ribbon-deletecontact32'
}, {
text: 'Refresh All',
iconCls: 'icon-ribbon-refresh32'
}]
}, {
title: 'Reports',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Available Reports',
iconCls: 'icon-ribbon-report32'
}]
}]
});

var rb = Ext.widget('uiribbonbar');
var ribbon = Ext.widget('employeeslistribbon');

Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [rb]
});

rb.add(ribbon);
});

[hyteckit]

Really cool.

Wondering if we can get a vertical version.

Most monitors these days are widescreen. There isn't much vertical space left for content after adding up the vertical space use up by the ribbon and the web browser toolbar.

[ajaxvador]

thanks my friend

[bigice]

demo online please or Download link?
thanks.

[ozum]

This seems great. Thank you khebs for sharing. To test it quickly I used ykey's sample code.

Just to inform: In IE 9 the unselected tabs appear blue whereas they are white in other browsers.

Edit: The error message below is from a script of Roboform Firefox plugin. Maybe you want to investigate the reason. (rfhelper32.js (line 348))

Also when I change the tab in Firefox 6, firebug throws lots of same exception shown in the picture below. However this error doesn't appear in Chrome 14 console.


28249

[ssamayoa]

Something new with this cool UX?

[plantijaabjcbd]

Within the ribbon, developers can customise and add their own styles to the ribbon. These can be these used within the Content Editor WebPart for a SharePoint Publishing Page.
To configure WinZip to use another interface:


Click the Settings tab in the ribbon
Click the Options button
In the Configuration dialog that displays click the View tab
Choose the Legacy menus/toolbar radio button or the WinZip ribbon interface radio button
Click OK

plantillas web (http://www.plantilandia.com/)
*ACTIONS speak louder than words*

[g13013]

Great Extension, really cool, i'lle try it as soon as possible. But I think that the Ribbon is under a licence issued from m$ so before you put it in your project take a look at licence requirement!

[danilo2]

Is it possible to do it in GXT? Or it uses some extjs specific features?