UI

Frog Framework is a front-end framework that helps create beautifully designed responsive layouts with ready to use user interface elements using human-friendly HTML.

Typography

Headings, paragraphs, responsive alignments etc. and all other useful typography design elements:

Headings

Heading 1 Small text

Heading 2 Small text

Heading 3 Small text

Heading 4 Small text

Heading 5 Small text
Heading 6 Small text
Sizes
xx-largest
x-largest
largest
xx-large
x-large
large
default
small
x-small
xx-small
smallest
x-smallest
xx-smallest
Colors
xx-light x-light
light
dark
x-dark
xx-dark
font-default
font-green
font-yellow
font-red
font-blue
font-orange
theme-green ui-text
theme-yellow ui-text
theme-red ui-text
theme-blue ui-text
theme-orange ui-text
Alignments
Align Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue malesuada nisi, sit amet volutpat mi volutpat a.

Align Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue malesuada nisi, sit amet volutpat mi volutpat a.

Align Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue malesuada nisi, sit amet volutpat mi volutpat a.

Align Justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue malesuada nisi, sit amet volutpat mi volutpat a.

Align Nowrap

Lorem ipsum dolor sit amet, consectetur.

Align Top
Text
Align Middle
Text
Align Bottom
Text
Responsive Alignments
xl align center
lg align center
md align center
sm align center
xs align center
xl align right
lg align right
md align right
sm align right
xs align right
xl align left
lg align left
md align left
sm align left
xs align left
Lead Styling

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Text Styling
Marked Text
Deleted Text
Strikethrough Text
Inserted Text
Underlined Text
Small Text
Bold Text
Italic Text
Attr
Bold
Italic
Semibold
Regular
Thin
Underline
Overline
LOWERCASE
uppercase
capitalize
initialism
Ellipsis Text Example
Line Spacing & Word Wrap

text with normal line height example: Curabitur sollicitudin mi nec congue iaculis. Morbi velit quam, fringilla eget est in, porta euismod metus. Aliquam vulputate odio ut aliquet mollis.

word break text example: Curabitur sollicitudin mi nec congue iaculis. Morbi velit quam, fringilla eget est in, porta euismod metus. Aliquam vulputate odio ut aliquet mollis.

Address
Anıtkabir Mausoleum
06570 Cankaya/Ankara
P: (1) +90-312-231-2805
Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac augue lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi consequat tempor dignissim.

Ahmet Emin Yuce, Ui Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac augue lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi consequat tempor dignissim.

Hamide Yuce, Web Developer
Code & Variables
  • Use <strong> tag to make text bold.
  • Use class="underline" class to make text underline.
variables: y = mx + b
  • Press enter to make a new line break.
  • Press ctrl+Home to scroll top your page.
  • Press ctrl+End to scroll bottom your page.
sample output: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac augue lectus.
Pre & Xmp
<span>Sample text with pre tag.</span>
<span>Sample text with xmp tag.</span>

Helpers

Responsive showing & hiding, dashed backgrounds, shadows, lists, borders etc. and all other useful design helper elements:

No User Select

Nullam ante libero, pulvinar id felis vitae, sodales bibendum nibh. Praesent mi lorem, gravida a ipsum ut, tempus bibendum augue.

Praesent commodo in tellus eu efficitur. Aenean aliquet molestie mauris, aliquet blandit mi facilisis sit amet. Curabitur a fringilla est. Nullam ultricies egestas nisi quis semper.

Direction RTL

Nullam ante libero, pulvinar id felis vitae, sodales bibendum nibh. Praesent mi lorem, gravida a ipsum ut, tempus bibendum augue.

Praesent commodo in tellus eu efficitur. Aenean aliquet molestie mauris, aliquet blandit mi facilisis sit amet. Curabitur a fringilla est. Nullam ultricies egestas nisi quis semper



Scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue malesuada nisi, sit amet volutpat mi volutpat a. Aliquam quam massa, bibendum lacinia mattis ac, fermentum quis odio. Cras ullamcorper sapien eu ligula condimentum, et fermentum sapien feugiat. Donec vel velit a massa eleifend fermentum id a metus. Phasellus ultricies, est in interdum auctor, nunc ipsum tempus elit, et tristique quam quam molestie nunc.
Vertical Scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue malesuada nisi, sit amet volutpat mi volutpat a. Aliquam quam massa, bibendum lacinia mattis ac, fermentum quis odio. Cras ullamcorper sapien eu ligula condimentum, et fermentum sapien feugiat. Donec vel velit a massa eleifend fermentum id a metus. Phasellus ultricies, est in interdum auctor, nunc ipsum tempus elit, et tristique quam quam molestie nunc.
Horizontal Scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue malesuada nisi, sit amet volutpat mi volutpat a. Aliquam quam massa, bibendum lacinia mattis ac, fermentum quis odio. Cras ullamcorper sapien eu ligula condimentum, et fermentum sapien feugiat. Donec vel velit a massa eleifend fermentum id a metus. Phasellus ultricies, est in interdum auctor, nunc ipsum tempus elit, et tristique quam quam molestie nunc.
No Scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue malesuada nisi, sit amet volutpat mi volutpat a. Aliquam quam massa, bibendum lacinia mattis ac, fermentum quis odio. Cras ullamcorper sapien eu ligula condimentum, et fermentum sapien feugiat. Donec vel velit a massa eleifend fermentum id a metus. Phasellus ultricies, est in interdum auctor, nunc ipsum tempus elit, et tristique quam quam molestie nunc.
xl visible: visible now!
lg visible: visible now!
md visible: visible now!
sm visible: visible now!
xs visible: visible now!
xl hidden:
lg hidden:
md hidden: hidden now!
sm hidden:
xs hidden:
Cursor Default
Cursor Default
  • Unordered list item
    • Unordered list item
    • Unordered list item
  • Unordered list item

  1. Ordered list item
    • Ordered list item
    • Ordered list item
  2. Ordered list item
  • Unstyled list item
    • Unstyled list item
    • Unstyled list item
  • Unstyled list item
  • Custom list item
    • Custom list item
    • Custom list item
  • Custom list item

  • Inline list item
    • Inline list item
    • Inline list item
  • Inline list item
  • 2 column list item
  • 2 column list item
  • 2 column list item
  • 2 column list item

  • 3 column list item
  • 3 column list item
  • 3 column list item
  • 3 column list item
  • 3 column list item
  • 3 column list item

  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item

  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item
  • 4 column list item

  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item
  • 6 column list item

Icons

Icons sizes, icon notifiers etc. and all other useful icon editing elements:

Images

Responsive images, photo images and retina images:

md responsive:
sm responsive:
xs responsive:
HY AEY HY AEY HY AEY HY AEY
Loads @2x image when window.devicePixelRatio > 1

Spacers

Clearfix spacers and list spacers:

1px clearfix spacer
1px clearfix spacer
1px clearfix spacer
1px clearfix spacer
1px clearfix spacer
1px clearfix spacer
1px clearfix spacer
1px clearfix spacer
1px clearfix spacer
1px clearfix spacer
  • List item with 5px spacer
  • List item with 5px spacer
  • List item with 5px spacer
  • List item with 10px spacer
  • List item with 10px spacer
  • List item with 10px spacer
  • List item with 15px spacer
  • List item with 15px spacer
  • List item with 15px spacer
  • List item with 30px spacer
  • List item with 30px spacer
  • List item with 30px spacer

Paddings & Margins

Paddings and margins with responsive elements:

Content example in 1px padding and 1px margin.
Content example in 2px padding and 2px margin.
Content example in 3px padding and 3px margin.
Content example in 4px padding and 4px margin.
Content example in 5px padding and 5px margin.
Content example in 10px padding and 10px margin.
Content example in 15px padding and 15px margin.
Content example in 20px padding and 20px margin.
Content example in 25px padding and 25px margin.
Content example in 30px padding and 30px margin.
Content example in 20px padding and 20px margin.
Inherited with no-padding and no-margin.
no padding on top and bottom
no padding on right and left
no padding on top
no padding on right
no padding on bottom
no padding on left
no margin on top and bottom
no margin on right and left
no margin on top
no margin on right
no margin on bottom
no margin on left
xl no padding
lg-no padding on right and left
md no padding
sm no padding on top
xs no padding on right
xl no margin
lg no margin on right and left
md no margin
sm no margin on top
xs no margin on right

Animations

Effects, stop animations:

animation stopped with animate-stop
animation stopped with animate-stop
animations stopped with animate-stop-all

Transitions

Timing, functions, names, custom-names and stop transitions:

all property transitions
color transition
width transition
height transition
background transition
background position transition
margin transition
margin-top transition
margin-right transition
margin-bottom transition
margin-left transition
top position transition
right position transition
bottom position transition
left position transition
opacity transition
transform transition
ease fill transition for SVG
faster speed
default speed
slower speed
2x slower speed
3x slower speed
4x slower speed
5x slower speed
6x slower speed
7x slower speed
8x slower speed
9x slower speed
10x slower speed
default function
linear function
in function
out function
in-out function
in-quad function
in-cubic function
in-quart function
in-quint function
in-sine function
in-expo function
in-circ function
in-back function
quad function
cubic function
quart function
quint function
sine function
expo function
circ function
back function
out-quad function
out-cubic function
out-quart function
out-quint function
out-sine function
out-expo function
out-circ function
out-back function
in-out-quad function
in-out-cubic function
in-out-quart function
in-out-quint function
in-out-sine function
in-out-expo function
in-out-circ function
in-out-back function
transition stopped with no-transitions
transition stopped with no-transitions
default function
default function
transition stopped with no-transitions-all