Color schemes

More color schemes will be available soon!

Layout options
Boxed layout backgrounds

Buttons You can transform any form submit elements or regular links into buttons by adding certain CSS classes for configuring the size, color and icon & text alignment.

Theming

Fides Admin uses colors & styles from both the default theme color schemes and the included core color helpers.

Core color helpers:

The core color helpers can be applied to all kind of elements from buttons to icons, headers, headings, etc. They do not change when you switch to a different theme from the same template.

Template color schemes:

These are the template default color schemes and are used site wide to consistently style common elements. For the primary color you must add .primary-bg and for the secondary color you must add .ui-state-default. Note that theme two styles change based on what color scheme you choose for your template.

Basic

The button examples below are the most basic ones, without any icons or additional styles applied.

Hover to background

The hover to background buttons have background colors only on hover, otherwise they are either white or transparent.

Font color

You can use the font color helpers included in the core to create all kinds of elements. In this case, we prepared an example using buttons.

Sizes

Buttons can have four different sizes: small, medium, large and x-large.

Toggle buttons

You can create toggle buttons using any of the available core color helpers.

Loading states

Buttons can have a loading state when clicked.

Get source

                        

                        

                        

                    

Buttons with one icon

To create this kind of button you have to replace the .button-content element with the icon wrapper which is identified by having any CSS class starting with .icon-. If you want the icon buttons to be perfectly square you shoudn't include the icon wrapper in the .button-content element (example below).

Get source
                // one icon small
                
                    
                

                // one icon medium
                
                    
                

                // one icon large
                
                    
                

                // one icon x-large
                
                    
                
            

Buttons with two icons

This kind of buttons are very useful if you want to create drop downs & similar stuff. Read more on how to change the actual icon size below.

Get source
                // two icons small
                
                    
                        
                        
                    
                

                // two icons medium
                
                    
                        
                        
                    
                

                // two icons large
                
                    
                        
                        
                    
                

                // two icons X-large
                
                    
                        
                        
                    
                
            

Buttons with two icons & separator

You can add a separator to one of the icons for better user experience or just because you like it better that way :)

Get source
                // two icons & left separator small
                
                    
                        
                    
                    
                        
                    
                

                // two icons & left separator medium
                
                    
                        
                    
                    
                        
                    
                

                // two icons & left separator large
                
                    
                        
                    
                    
                        
                    
                

                // two icons & left separator x-large
                
                    
                        
                    
                    
                        
                    
                

                // three icons with left & right separators x-large
                
                      
                        
                    
                    
                        
                    
                    
                        
                    
                
                // two icons & right separator x-large
                
                    
                        
                    
                    
                        
                    
                

                // two icons & right separator large
                
                    
                        
                    
                    
                        
                    
                

                // two icons & right separator medium
                
                    
                        
                    
                    
                        
                    
                

                // two icons & right separator small
                
                    
                        
                    
                    
                        
                    
                
            

Icons colors

You can use the font color helpers included in the core to change the icon colors.

Get source

                // blue icon
                
                    
                        
                    
                

                // red icon
                
                    
                        
                    
                

                // orange icon
                
                    
                        
                    
                

                // green icon
                
                    
                        
                    
                

                // black icon
                
                    
                        
                    
                

                // gray icon
                
                    
                        
                    
                

                // gray dark icon
                
                    
                        
                    
                

                // white icon
                
                    
                        
                    
                

            

Border radius helpers

You can use the border radius helpers included in the core to change the CSS3 border radius of the elements, in this case, icon buttons. The border radius helper classes can be applied to either all borders or only specific borders (eg. top right, bottom left & right, etc)

Regular buttons

Regular buttons have a single line of text with or without one or two icons aligned left or right.

Get source

                // left icon with text button
                
                    
                        
                        Left icon
                    
                

                // right icon with text button
                
                    
                        
                        Right icon
                    
                

                // left & right icons with text button
                
                    
                        
                        Both icons
                        
                    
                
            

Icon separators

You can add to a regular button with text a separator to the left, right or both icons.

Get source

                // left icon separator with text button
                
                    
                        
                    
                    
                        Left icon
                    
                

                // right icon separator with text button
                
                    
                        
                    
                    
                        Right icon
                    
                

                // left & right icons separators with text button
                
                    
                        
                        Both icons
                        
                    
                

            

Icon separators & normal icons

You can add to a regular button with text, beside a separator to the left, right or both icons, another left, right or both icon.

Get source

                // right icon separator with text & left icon button
                
                    
                        
                        Button
                    
                    
                        
                    
                

                // right icon separator with text & right icon button
                
                    
                        
                        Button
                    
                    
                        
                    
                

                // right icon separator with text & right & left icons button
                
                    
                        
                        Button
                        
                    
                    
                        
                    
                

                // left icon separator with text & left icon button
                
                    
                        
                    
                    
                        
                        Button
                    
                

                // left icon separator with text & right icon button
                
                    
                        
                    
                    
                        
                        Button
                    
                

                // left icon separator with text & right & left icons button
                
                    
                        
                    
                    
                        
                        Button
                        
                    
                

            

Vertical icon buttons

You can also create vertical icon buttons by replacing the SIZE (.small, .medium, .large, .x-large) class with .vertical-button class.

Get source

                // vertical button with top icon
                
                    
                    Top icon
                

                // vertical button with bottom icon
                
                    Bottom icon
                    
                

                // vertical button with top and bottom icons
                
                    
                    Both icons
                    
                
            

Double buttons

Double buttons are regular buttons with two lines of text. They can have no icons, one left/right icon or both icons.

Icon separators

Double buttons can have left, right or both icons with separators.

Horizontal groups

Button groups help you create split buttons, paginations and toolbars. You must put at least two buttons inside, otherwise there is no point in using a button group. To create horizontal button group you have to wrap the buttons in a div with class button-group. If the themes has border-radiuses defined, the button groups with add the necessary radiuses to the first and last button.

Get source

                // button group with secondary theme color
                

                // button group with multiple buttons
                

            

Horizontal dropdowns

You can use the horizontal button groups to create split buttons of different sizes & colors.

Learn more about all the options for creating dropdown menus by reading the Fides Admin Dropdowns documentation page.

Vertical groups

To create horizontal button groups you have to wrap the buttons in a div with class .button-group. If the themes has border-radiuses defined, the button groups with add the necessary radiuses to the first and last button.

Horizontal block level groups

You can create block level button groups by wrapping buttons inside a div with class .button-block.

Single block level button

If you want only one button to have block level behaviour or do not want to use the .button-block wrapper, you can add the following classes to a button to make it block level: display-block and float-none (not required, but good to have)

Justified block level groups

You can create justified block level button groups by wrapping buttons inside a div with class .button-block-justified.

Disabled states

Beside the normal, active, focus, hover we all know that buttons also have a disabled state. You can disable a button in two ways: using the .disabled class for links or adding the disabled attribute to form buttons.

Link button Link button
Get source

                // disabled primary background link button
                
                    Link button
                

                // disabled primary background form submit button
                

                // disabled secondary background link button
                
                    Link button
                

                // disabled secondary background form submit button
                

            

Custom elements

All examples below were creating using only the existing styling & helper CSS classes.

Twitter, Facebook, Google buttons

We created special styles for Twitter, Facebook, Google buttons.

Dashboard buttons

You can create unique style vertical icon buttons using the core helper classes for color, icon size, background, spacing, etc.