lightweight responsive css frameworkWhat's New in Version 6

lightweight responsive css framework

Layout based on CSS Grid

CSS Grid is a revolutionary tool for creation of responsive layouts which is accessible right in CSS. We have implemented several accomplishments to Responsee which CSS Grid offers (real number of solutions and possibilities offered by CSS Grid is, however, broader). By means of CSS Grid Responsee gains possibilities which were not possible before and now more flexible layouts can be created.
read more >

lightweight responsive css framework

New free templates Bricker and Bricker lite

Completely new 2 templates named Bricker and Bricker lite comes together with new edition of Responsee. The templates are based on new CSS Grid system. You can look forward to excellent design and as usually completely free! We also upgraded all the other templates for Responsee 6.
read more >

lightweight responsive css framework

Completely redesigned main navigation for small screens.

We have completely remade layout of navigation for displaying on mobile devices.
Now the navigation rolls out of a left side of a display which is by users’ experience more handy and intuitive solution.
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