lightweight responsive css frameworkWhat's New in Version 5

lightweight responsive css framework

New Owl Carousel v2.2.1

We added completely new Owl Carousel v2.2.1. The new version comes with lots of new features and even more user friendly API.
read more >

lightweight responsive css framework

Tabs with URL hash

This is great for when you want to open a specific tab by the URL. This feature can be turned off or on for each tab separately.
read more >

lightweight responsive css framework

New maximum width size 1520px

We added new size of maximum width - 1520px (95rem). Thanks to this setting your content will have more space. This setting is ideal for websites with two sidebar panels, blogs on online shops.
read more >

lightweight responsive css framework

Breadcrumb

The breadcrumb allows users easy to keep track of their locations within websites. And now, you can find it in Responsee framework.
read more >

lightweight responsive css framework

More sizes for your layouts

We added two new sizes xl and xxl for better works with a layout for different types of a devices and a screens. Now Responsee contains sizes s, m, l, xl and xxl.
read more >

lightweight responsive css framework

Virtua and Designery

Completely new 2 templates named Virtua and Designery comes together with new edition of Responsee. You can look forward to excellent design and as usually completely free! We also upgraded all the other templates for Responsee 5.
read more >

lightweight responsive css framework

Sliding navigation panel

We added new great feature! Thanks to the sliding navigation panel, you can place the web site menu outside of the browser screen. This solution is fancy and very effective.
read more >

lightweight responsive css framework

Icon Set

Responsee uses Simple Line Icons set and MFG Labs Icons set. Sets contains all the most frequently used icons. Application of the sets is very intuitive and sets may be combinated:

Simple Line Icons

Drop the markup <i class="icon-name"></i> anywhere
<i class="icon-sli-magnifier"></i>
<!--Example of icon application in searching.--> 
<input style="font-family:sli;" id="search" type="submit" value="&#xe090" /> 
<!--for specific icon is value &#x + CSS code (in this case is CSS value e090)--> 

Result of foregoing example:

You can also use selector :before or :after

someclass:before  {
  content:"\e090";
  font-family: "sli";
} 
  • icon-sli-user

  • icon-sli-people

  • icon-sli-user-female

  • icon-sli-user-follow

  • icon-sli-user-following

  • icon-sli-user-unfollow

  • icon-sli-login

  • icon-sli-logout

  • icon-sli-emotsmile

  • icon-sli-phone

  • icon-sli-call-end

  • icon-sli-call-in

  • icon-sli-call-out

  • icon-sli-map

  • icon-sli-location-pin

  • icon-sli-direction

  • icon-sli-directions

  • icon-sli-compass

  • icon-sli-layers

  • icon-sli-menu

  • icon-sli-list

  • icon-sli-options-vertical

  • icon-sli-options

  • icon-sli-arrow-down

  • icon-sli-arrow-left

  • icon-sli-arrow-right

  • icon-sli-arrow-up

  • icon-sli-arrow-up-circle

  • icon-sli-arrow-left-circle

  • icon-sli-arrow-right-circle

  • icon-sli-arrow-down-circle

  • icon-sli-check

  • icon-sli-clock

  • icon-sli-plus

  • icon-sli-minus

  • icon-sli-close

  • icon-sli-organization

  • icon-sli-trophy

  • icon-sli-screen-smartphone

  • icon-sli-screen-desktop

  • icon-sli-plane

  • icon-sli-notebook

  • icon-sli-mustache

  • icon-sli-mouse

  • icon-sli-magnet

  • icon-sli-energy

  • icon-sli-disc

  • icon-sli-cursor

  • icon-sli-cursor-move

  • icon-sli-crop

  • icon-sli-chemistry

  • icon-sli-speedometer

  • icon-sli-shield

  • icon-sli-screen-tablet

  • icon-sli-magic-wand

  • icon-sli-hourglass

  • icon-sli-graduation

  • icon-sli-ghost

  • icon-sli-game-controller

  • icon-sli-fire

  • icon-sli-eyeglass

  • icon-sli-envelope-open

  • icon-sli-envelope-letter

  • icon-sli-bell

  • icon-sli-badge

  • icon-sli-anchor

  • icon-sli-wallet

  • icon-sli-vector

  • icon-sli-speech

  • icon-sli-puzzle

  • icon-sli-printer

  • icon-sli-present

  • icon-sli-playlist

  • icon-sli-pin

  • icon-sli-picture

  • icon-sli-handbag

  • icon-sli-globe-alt

  • icon-sli-globe

  • icon-sli-folder-alt

  • icon-sli-folder

  • icon-sli-film

  • icon-sli-feed

  • icon-sli-drop

  • icon-sli-drawer

  • icon-sli-docs

  • icon-sli-doc

  • icon-sli-diamond

  • icon-sli-cup

  • icon-sli-calculator

  • icon-sli-bubbles

  • icon-sli-briefcase

  • icon-sli-book-open

  • icon-sli-basket-loaded

  • icon-sli-basket

  • icon-sli-bag

  • icon-sli-action-undo

  • icon-sli-action-redo

  • icon-sli-wrench

  • icon-sli-umbrella

  • icon-sli-trash

  • icon-sli-tag

  • icon-sli-support

  • icon-sli-frame

  • icon-sli-size-fullscreen

  • icon-sli-size-actual

  • icon-sli-shuffle

  • icon-sli-share-alt

  • icon-sli-share

  • icon-sli-rocket

  • icon-sli-question

  • icon-sli-pie-chart

  • icon-sli-pencil

  • icon-sli-note

  • icon-sli-loop

  • icon-sli-home

  • icon-sli-grid

  • icon-sli-graph

  • icon-sli-microphone

  • icon-sli-music-tone-alt

  • icon-sli-music-tone

  • icon-sli-earphones-alt

  • icon-sli-earphones

  • icon-sli-equalizer

  • icon-sli-like

  • icon-sli-dislike

  • icon-sli-control-start

  • icon-sli-control-rewind

  • icon-sli-control-play

  • icon-sli-control-pause

  • icon-sli-control-forward

  • icon-sli-control-end

  • icon-sli-volume-1

  • icon-sli-volume-2

  • icon-sli-volume-off

  • icon-sli-calendar

  • icon-sli-bulb

  • icon-sli-chart

  • icon-sli-ban

  • icon-sli-bubble

  • icon-sli-camrecorder

  • icon-sli-camera

  • icon-sli-cloud-download

  • icon-sli-cloud-upload

  • icon-sli-envelope

  • icon-sli-eye

  • icon-sli-flag

  • icon-sli-heart

  • icon-sli-info

  • icon-sli-key

  • icon-sli-link

  • icon-sli-lock

  • icon-sli-lock-open

  • icon-sli-magnifier

  • icon-sli-magnifier-add

  • icon-sli-magnifier-remove

  • icon-sli-paper-clip

  • icon-sli-paper-plane

  • icon-sli-power

  • icon-sli-refresh

  • icon-sli-reload

  • icon-sli-settings

  • icon-sli-star

  • icon-sli-symbol-female

  • icon-sli-symbol-male

  • icon-sli-target

  • icon-sli-credit-card

  • icon-sli-paypal

  • icon-sli-social-tumblr

  • icon-sli-social-twitter

  • icon-sli-social-facebook

  • icon-sli-social-instagram

  • icon-sli-social-linkedin

  • icon-sli-social-pinterest

  • icon-sli-social-github

  • icon-sli-social-google

  • icon-sli-social-reddit

  • icon-sli-social-skype

  • icon-sli-social-dribbble

  • icon-sli-social-behance

  • icon-sli-social-foursqare

  • icon-sli-social-soundcloud

  • icon-sli-social-spotify

  • icon-sli-social-stumbleupon

  • icon-sli-social-youtube

  • icon-sli-social-dropbox

MFG Labs Icons

Drop the markup <i class="icon-name"></i> anywhere
<i class="icon-paperplane"></i>
<!--Example of icon application in searching.--> 
<input style="font-family:mfg;" id="search" type="submit" value="&#xf50d" /> 
<!--for specific icon is value &#x + CSS code (in this case is CSS value f50d)--> 

Result of foregoing example:

You can also use selector :before or :after

someclass:before  {
  content:"\f50d";
  font-family: "mfg";
} 
  • icon-cloud

  • icon-at

  • icon-plus

  • icon-minus

  • icon-arrow_up

  • icon-arrow_down

  • icon-arrow_right

  • icon-arrow_left

  • icon-chevron_down

  • icon-chevron_up

  • icon-chevron_right

  • icon-chevron_left

  • icon-reorder

  • icon-list

  • icon-reorder_square

  • icon-reorder_square_line

  • icon-coverflow

  • icon-coverflow_line

  • icon-pause

  • icon-stop

  • icon-play

  • icon-step_forward

  • icon-step_backward

  • icon-cloud_upload

  • icon-cloud_download

  • icon-data_science

  • icon-data_science_black

  • icon-globe

  • icon-globe_black

  • icon-math_ico

  • icon-math

  • icon-math_black

  • icon-paperplane_ico

  • icon-paperplane

  • icon-paperplane_black

  • icon-star

  • icon-star_half

  • icon-star_empty

  • icon-star_half_empty

  • icon-reload

  • icon-heart

  • icon-heart_broken

  • icon-hashtag

  • icon-reply

  • icon-retweet

  • icon-signin

  • icon-signout

  • icon-download

  • icon-upload

  • icon-placepin

  • icon-display_screen

  • icon-tablet

  • icon-smartphone

  • icon-connected_object

  • icon-lock

  • icon-unlock

  • icon-camera

  • icon-isight

  • icon-video_camera

  • icon-random

  • icon-message

  • icon-discussion

  • icon-calendar

  • icon-ringbell

  • icon-movie

  • icon-mail

  • icon-pen

  • icon-settings

  • icon-measure

  • icon-vector

  • icon-vector_pen

  • icon-mute_on

  • icon-mute_off

  • icon-home

  • icon-sheet

  • icon-arrow_big_right

  • icon-arrow_big_left

  • icon-arrow_big_down

  • icon-arrow_big_up

  • icon-dribbble_circle

  • icon-dribbble

  • icon-facebook

  • icon-facebook_circle

  • icon-git_circle_alt

  • icon-git_circle

  • icon-git

  • icon-octopus

  • icon-twitter_circle

  • icon-twitter

  • icon-google_plus_circle

  • icon-google_plus

  • icon-linked_in_circle

  • icon-linked_in

  • icon-instagram

  • icon-instagram_circle

  • icon-xing

  • icon-xing_circle

  • icon-mfg_icon

  • icon-mfg_icon_circle

  • icon-user

  • icon-user_male

  • icon-user_female

  • icon-users

  • icon-file_open

  • icon-file_close

  • icon-file_alt

  • icon-file_close_alt

  • icon-attachment

  • icon-check

  • icon-check_circle

  • icon-cross_mark

  • icon-cancel_circle

  • icon-magnifying

  • icon-inbox

  • icon-clock

  • icon-stopwatch

  • icon-hourglass

  • icon-trophy

  • icon-unlock_alt

  • icon-lock_alt

  • icon-arrow_doubled_right

  • icon-arrow_doubled_left

  • icon-arrow_doubled_down

  • icon-arrow_doubled_up

  • icon-link

  • icon-warning

  • icon-warning_alt

  • icon-magnifying_plus

  • icon-magnifying_minus

  • icon-white_question

  • icon-black_question

  • icon-share

  • icon-eye

  • icon-trash_can

  • icon-hard_drive

  • icon-information_black

  • icon-information_white

  • icon-printer

  • icon-letter

  • icon-soundcloud

  • icon-soundcloud_circle

  • icon-anchor

  • icon-female_sign

  • icon-male_sign

  • icon-joystick

  • icon-high_voltage

  • icon-fire

  • icon-newspaper

  • icon-chart

  • icon-chart_alt

  • icon-spread

  • icon-spinner_1

  • icon-spinner_2

  • icon-label

  • icon-brush

  • icon-refresh

  • icon-node

  • icon-node_2

  • icon-node_3

  • icon-link_2_nodes

  • icon-link_3_nodes

  • icon-link_loop_nodes

  • icon-node_size

  • icon-node_color

  • icon-layout_directed

  • icon-layout_hierarchical

  • icon-layout_radial

  • icon-node_link_direction

  • icon-node_link_short_path

  • icon-node_cluster

  • icon-display_graph

  • icon-node_link_weight

  • icon-more_node_links

  • icon-node_shape

  • icon-node_icon

  • icon-node_text

  • icon-node_link_text

  • icon-node_link_color

  • icon-node_link_shape

  • icon-credit_card

  • icon-disconnect

  • icon-graph

  • icon-new_user

Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase