Introducation to furbish
Furbish is an open source styling framework, which helps
Developers to use best styles and components, by using pre-defined
classnames. Furbish helps you to quickly build your Dream Project,
by focusing much on Functionality, because we take care of your
Designs.
Installation Guide
In order to introduce Furbish to your project, Copy the Link given
below and paste it in the <head> tag of your html, above all
other style sheets. Note : use javascript link at the bottom of
your html file or <head> with <defer> attribute for
smooth working
Furbish's Typography
A Webpage must have a good looking, standard and readable font to
make it's content attractive to the end user.
Open Sans is the font property which is used by
Furbish. It is available on Google Fonts for free. The font weight
varies from 500 to 700 based on importance of the content and free
icons available on font awesome is used by furbish.
Furbish's Color Scheme
Furbish comes with pre-defined colors, which are consistent in the
overall design. The colors used are chosen on a generic basis,
which can be accessed by pre-defined classes.
Default Palette
Default
#172B4D
Primary
#6366F1
Secondary
#F3F4F6
Danger
#F44336
Success
#4CAF50
Warning
#FF9800
Avatar
Avatars are user
profile pictures , usually
found in circular shapes. Avatars can be used for 'container'
objects — projects, spaces, repositories, etcetera — to give them
a recognisable visual identity.
Avatar Round
Avatar Sizes
Alert
An alert displays a short, important message in a way that
attracts the user's attention without interrupting the user's
task.
Primary Alerts
Success! This is a Primary Success Alert!
Error! This is a Primary Error Alert!
Warning! This is a Primary Warning Alert!
Info! This is a Primary Info Alert!
Secondary Alerts
Success! This is a Secondary Success Alert!
Error! This is a Secondary Error Alert!
Warning! This is a Secondary Warning Alert!
Info! This is a Secondary Info Alert!
Button
Buttons are the soul of an interactive Web Application. Buttons
allow users to take actions, and make choices, with a single tap.
Basic Button
Link
Animated Button
badge
Badges are small circles, positioned either at top-right or
bottom-right of the parent component. Badge can be used to display
numbers, online / offline status, depending on where they are
used.
Text with basic badge
5
2
1
8
Card
Cards are surfaces that display content and actions on a single
topic. They should be easy to scan for relevant and actionable
information. Elements, like text and images, should be placed on
them in a way that clearly indicates hierarchy.
Basic Card
Our Chaning Work
by tanishk
Visit ten places on our planet that are is smart undergoing the biggest changes today.
Basic W/ Header
Our Chaning Work
by tanishk
Visit ten places on our planet that are is smart undergoing the biggest changes today.
Basic w/ Text over Media
Our Chaning Work
by tanishk
Visit ten places on our planet that are is smart undergoing the biggest changes today.
Horizontal Image and Text
Our Chaning Work
by Tanishk Sharma
Product Card
HRX
Yellow Printed Round Neck
Rs. 799
Rs. 999
(40% OFF)
Add size
XS
S
M
L
XL
Image
Responsive Image Components are used to dsiplay Images on
websites, which are screen responsive. They expand upto the width
of the container they are in.
Responsive Image
Responsive Image W/ Animation
Input
Inputs are necessary for user interaction with the website. Inputs
are used to take information from the user, and then save the data
to the server, accordingly.
Basic Input
Input W/ Chips
tanishk
Primary
Secondary
Snackbar
Snackbars/Toast inform users
of a process that an app has performed or will perform. They
appear temporarily, towards the bottom of the screen. They
shouldn’t interrupt the user experience, and they don’t require
user input to disappear.
List
Lists are continuous, vertical display of text or images.
Ordered List
Unordered List
Title
subtext
- Inbox
- Star
- Sent Mail
- Drafts
Title
subtext
- Inbox
- Star
- Sent Mail
- Drafts
Having easy-to-use navigation is important for any web site, With
CSS you can transform boring HTML menus into good-looking
navigation bars.
This Navigation bar is Responsive / W Hamburger and made for all kind of device.
Slider
Sliders allow users to make selections from a range of values.
Modal
A modal is a dialog
box/popup window that is
displayed on top of the current page:
Modals/popups are Awesome!
This is a modal box which is used in popping various important informations depending on user requirement.
Rating
Rating components can be used as read-only badge or in reviews
section. Can be used in reviews section as form too.
Grid
The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without
having to use floats and positioning.
grid-2: Two items in a grid
child 1
child 2
grid-3: Two items in a grid
child 1
child 2
child 3
Text utilities
Documentation and examples for common text utilities to control
alignment, wrapping, weight, and more.
Headings
H1 - Heading
H2 - Heading
H3 - Heading
H4 - Heading
H5 - Heading
H6 - Heading
Text sizes
This is small text.
This is medium text.
This is large text.
This is extra large text.
Text alignment
Text alignment start
Text alignment center
Text alignment end