Tabicon - Tabs Framework

Features:

• Pure HTML and CSS.
• Responsive design.
• CSS3 Animations.
• 2 main variations, based on motion of tabs while selection, where each variation has 4 more variations
• 36 color variations – 6 for body and 6 for tabs.
• 12 animations.
• 9 shapes for tabs.
• Variations based on color, shape and position can be switched to simply by using predefined class names.
• Detailed documentation.
• Maximum author support.

Classes available for main variations – Mobile and Immobile Tabs:

• t_container
• Color variations: (Use one class for body and one for tabs from below classes.) Dark body colors:
  • t_b_bluish_dark
  • t_b_greenish_dark
  • t_b_browinsh_dark
  • t_b_lightseagreenish_dark
  • t_b_lightcoralish_dark
  • t_b_grayish_dark
  Light body colors:
  • t_b_bluish_light
  • t_b_greenish_light
  • t_b_browinsh_light
  • t_b_lightseagreenish_light
  • t_b_lightcoralish_light
  • t_b_grayish_light
  Dark tabs’ colors:
  • t_t_bluish_dark
  • t_t_greenish_dark
  • t_t_browinsh_dark
  • t_t_lightseagreenish_dark
  • t_t_lightcoralish_dark
  • t_t_grayish_dark
  Light tabs’ colors:
  • t_t_bluish_light
  • t_t_greenish_light
  • t_t_browinsh_light
  • t_t_lightseagreenish_light
  • t_t_lightcoralish_light
  • t_t_grayish_light
  *The class names above represent the respective colors.

  Classes available for Immobile Tabs type only:

  Controlling position of tabs:
  • t_inside This class will move the tabs inside the body.
  • t_outside_attached This class will move the tabs outside the body, but attached to it.
  • t_outside_dettached This class will move the tabs outside the body and dettached to it.
  Controlling alignment and spacing of tabs:
  • t_left_separated This class will align the tabs to the left side, with some space between each pair of tab.
  • t_left_unseparated This class will align the tabs to the left side, with no space between each pair of tab.
  • t_right_separated This class will align the tabs to the right side, with some space between each pair of tab.
  • t_right_unseparated This class will align the tabs to the right side, with no space between each pair of tab.
  • t_fluid_separated This class will increase the size of tabs so as to fill the entire width, with some space between each pair of tab.
  • t_fluid_unseparated This class will increase the size of tabs so as to fill the entire width, with no space between each pair of tab.
  • t_center_separated This class will align the tabs in the center, with some space between each pair of tab.
  • t_center_unseparated This class will align the tabs in the center, with no space between each pair of tab.
  Controlling shape of tabs:
  • t_rounded_full This class will make the tabs rounded at all corners.
  • t_rounded_top This class will make the tabs rounded at top corners.
  • t_la_rounded_top_extremes Use with left aligned tabs. This class will make the extreme tabs of the left aligned tabs rounded at left/right corners.
  • t_ra_rounded_top_extremes Use with right aligned tabs. This class will make the extreme tabs of the right aligned tabs rounded at right/left corners.
  • t_la_rounded_extremes Use with left aligned tabs. This class will make the extreme corners of the extreme tabs of the left aligned tabs rounded.
  • t_ra_rounded_extremes Use with right aligned tabs. This class will make the extreme corners of the extreme tabs of the right aligned tabs rounded.
  • t_la_curved_full Recommended: Use with left aligned tabs. This class will make each tab of the left aligned tabs curved.
  • t_ra_curved_full Recommended: Use with right aligned tabs. This class will make each tab of the right aligned tabs curved.
  • t_la_curved_extremes Recommended: Use with left aligned tabs. This class will make the extreme ends of the extreme tabs of the left aligned tabs curved.
  • t_ra_curved_extremes Use with right aligned tabs. This class will make the extreme ends of the extreme tabs of the right aligned tabs curved.
  • Add no class to get a rectangular tab. This is the default shape of the tabs.

  Sources and Credits:

  I’ve used the following icons or other files as listed.

  • Google font – Open Sans
  • FontAwesome Vector Icons
  • Normalize.css
  Rate the file if you like it. Thanks!