Your SlideShare is downloading. ×
Responsive web design tools and technique
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Responsive web design tools and technique

1,347
views

Published on

Techniques to make your site responsive

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,347
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive web design tools and technique Md Nazrul Islam Software Engineer Nascenia IT
  • 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. 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. 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. 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. 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. Design simple responsive site
  • 8. Create Responsive menu/navigation
  • 9. Next topics Responsive table  Responsive form with input field  CSS border magic  Responsive framework Twitter bootstrap and Foundation. 