0
Responsive web design tools and technique

Md Nazrul Islam
Software Engineer
Nascenia IT
Basic html structure
Html element
In general, HTML elements can be divided into two categories : block level
and inline el...
Basic css
Total css element
Animation, appearance, backface-visibility, background, border, bottom, box, captionside, clea...
Understanding media query
What id media
The @media CSS at-rule associates a set of nested statements, in a CSS block, that...
Media query example
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="exa...
Responsive meta element
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 or old...
Design simple responsive site
Create Responsive
menu/navigation
Next topics
Responsive table
 Responsive form with input field
 CSS border magic
 Responsive framework Twitter
bootstra...
Upcoming SlideShare
Loading in...5
×

Responsive web design tools and technique

1,483

Published on

Techniques to make your site responsive

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,483
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive web design tools and technique"

  1. 1. Responsive web design tools and technique Md Nazrul Islam Software Engineer Nascenia IT
  2. 2. Basic html structure Html element In general, HTML elements can be divided into two categories : block level and inline elements. ◦ 1. HTML block level elements can appear in the body of an HTML page. ◦ 2. It can contain other block level as well as inline elements. ◦ 3. By default, block-level elements begin on new lines. ◦ 4. block level elements create larger structures (than inline elements). List of block element p,h1, h2, h3, h4, h5, h6, ol, ul, pre, address, blockquote, dl, div, fieldset, form , hr, noscript, table List of inline element b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea
  3. 3. Basic css Total css element Animation, appearance, backface-visibility, background, border, bottom, box, captionside, clear, clip, color, column, content, counter-increment, counterreset, cursor, direction, display, empty-cells, float, font, grid-columns, grid-rows, hangingpunctuation, height, icon, left, letter-spacing, line-height, list-style, margin, max-height, max-width, min-height, minwidth, nav, opacity, outline, overflow, overflow-x, overflow-y, padding, pagebreak, perspective, perspective-origin, position, punctuationtrim, quotes, resize, right, rotation, rotation-point, tablelayout, target, text, top, transform, transition, vertical-align, visibility, width, whitespace, word-spacing, word-break, word-wrap, z-index. Known css element background, border, clear, content, cursor, display, float, height, margin, max-height , minwidth min-width, overflow, padding, position, vertical-align, visibility, word-break. CSS pseudo element (A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected) :link, :visited, :active, :hover, :focus, :first-child, :nth-child, :nth-last-child, :nth-oftype, :first-of-type, :last-of-type, :empty, :target, :checked, :enabled, :disabled
  4. 4. Understanding media query What id media The @media CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition defined by a media query. Syntax @media <media types> { /* media-specific rules */ } Media type screen => Intended primarily for color computer screens. tv => Intended for television-type devices. all => Suitable for all devices. Example @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }
  5. 5. Media query example <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a style sheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>
  6. 6. Responsive meta element <meta name="viewport" content="width=device-width, initial-scale=1.0"> Internet Explorer 8 or older doesn't support media query. You can use media-queries.js Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE. <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3mediaqueries.js"></script> <![endif]-->
  7. 7. Design simple responsive site
  8. 8. Create Responsive menu/navigation
  9. 9. Next topics Responsive table  Responsive form with input field  CSS border magic  Responsive framework Twitter bootstrap and Foundation. 
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×