Choose component

General styles × Columns × Breadcrumbs × Tabs × Pagination × Jump to top × Horizontal Dropdown menu × Vertical Dropdown menu × Sitemap list

(!) Please consider that this Help document is still a draft. The lastest version of might contain more components than listed in here.

General styles

						A link to open in a new window
						Ok
						Arrow down
Container for component Inside elements of component Legend
.btt .btt .btt
The general class applied to buttons that are called via CSS Sprites technique. You need to add width, height and background-image. Hiding text is already included.

Additional information: None.

TOP

Columns

						

							
Column left

							
Column right
Container for component Inside elements of component Legend
.c-2 .c-2-1 .c-2-1
First and left column inside a 2-column container
  .c-2-2 .c-2-2
Second and right column inside a 2-column container

The number in text of "c-2" represents the numbers of columns that the respective container has.

After closing all columns inside the container, you need to add the clearing class

In case of 3 columns container, container will be c-3 and each column inside will be .c-3-1, .c-3-2, .c-3-3

The F2 Framework contains up to 6 columns (.c-6)

TOP

						
Home › Inside page › Active page
Container for component Inside elements of component Legend
.d-breadcrumbs .d-breacrumbs a a - anchor has arrow applied
  .d-breadcrumbs span span - Separator - HTML character of arrow

More information: Currently none.

TOP

Tabs

						

							

								
								

							

							

								

									
Content of selected tab
Container for component Inside elements of component Legend
.d-tabs .d-tabs-nav .d-tabs-nav
General container for wrapping the tabs links
  .d-tabs-nav li .d-tabs-nav li
Tabs are formatted as UL LI lists

.d-tabs-nav li a
Formatting of links inside tabs UL LI lists

.d-tabs-nav ul li.active
Active state of anchor of tabs UL LI lists
  .d-tabs-content .d-tabs-content
General container for wrapping the content
  .d-tabs-content-box .d-tabs-content-box
Container for respective content selected

You need to add .clearing class after the tabs UL LI lists

TOP

Pagination

						

							Page 2 of 22 
							First 
							Prev 
							1 
							2 
							... 
							22 
							Next 
							Last
Container for component Inside elements of component Legend
.d-pagination .d-pagination a.ext
.d-pagination a.a-first, .d-pagination a.a-last
 a.ext
Contains general formatting for both "First" and "Last" links

a.a-first, a.a-last
Specific formatting for "First", respectively "Last" links
  .d-pagination a.nav
.d-pagination a.a-next, .d-pagination a.a-prev 		a.nav
General formatting for both "Next" and "Prev"

a.a-next, a.a-prev
Specific formatting for "Next", respectively "Prev" links
  .d-pagination a.active a.active
Active state for current page
  .d-pagination span.page-no span.page-no
Formatting for text of e.g. "Page 2 of 22"

To align the PAGINATION module you can easily add the alignment class (alignleft, aligncenter, alignright) after the .d-pagination

TOP

Jump to top

						
TOP
Container for component Inside elements of component Legend
.d-jump .d-jump a a
Anchor with arrow applied

Text is aligned on the right by default.

TOP

Horizontal dropdown menu
Container for component Inside elements of component Legend
.m-horz-dropdown .m-horz-dropdown li a a
Formatting default state of anchors
  .m-horz-dropdown li.li-submenu li.li-submenu
Class must be added for dropdown to take effect

Anchor of li.li-submenu has arrow applied

In the case of horizontal menu, you need to add the clearing class after the end of UL, as LI are being floated

TOP

Vertical dropdown menu
Container for component Inside elements of component Legend
.m-vert-dropdown .m-vert-dropdown li a a
Formatting default state of anchors
  .m-vert-dropdown li.li-submenu li.li-submenu
Class must be added for dropdown to take effect

Anchor of li.li-submenu has arrow applied

No need to add clearing after UL, as LI aren't floated in the case of vertical menu

TOP

Sitemap list

					
    
						
  • Main page
    • 
						
  • Main page #2
    • 
						
  • Main page #3 with subpages
							
      
								
    • Subpage #1
      • 
								
    • Subpage #2
      • 
								
    • Subpage #3
									
        
										
      • Sub-subpage #1
        • 
										
      • Sub-subpage #2
											
          
												
        • Sub-sub-subpage #1
          • 
												
        • Sub-sub-subpage #2
          • 
												
        • Sub-sub-subpage #3
													
            
														
          • Sub-sub-sub-subpage #1
            • 
														
          • Sub-sub-sub-subpage #2
            • 
														
          • Sub-sub-sub-subpage #3
            • 
														
          • Sub-sub-sub-subpage #4
            • 
														
          • Sub-sub-sub-subpage #5
            • 
													
          
												
          • 
												
        • Sub-sub-subpage #4
          • 
											
        
										
        • 
										
      • Sub-subpage #3
        • 
									
      
								
      • 
								
    • Subpage #4
      • 
								
    • Subpage #5
      • 
							
    
						
    • 
						
  • Main page #4
    • 
						
  • Main page #5
    • 
						
  • Main page #6
    •
Container for component Inside elements of component Legend
.ul-sitemap .ul-sitemap .ul-sitemap
General class applied for sitemap list

More information: None

TOP