Customizing Your WordPress Theme Using Firebug and Basic CSS
Seu SlideShare está sendo baixado.
×
Confira estes a seguir
Mais Conteúdo rRelacionado
Diapositivos para si (19)
Semelhante a Designing for the web - 101 (20)
Mais recentes (20)
Designing for the web - 101
- 1. DESIGNING FOR THE WEB - 101 Ashraf Hamdy
- 2. WHO AM I?
- 3. Started learning about design in 2010 Graduated from FCI – CU in 2013 Working in Orange Labs as a Full-Stack Designer (User experience design, Visual design and Front-end development)
- 4. PRESENTATION CONTENT
- 5. Introduction about design Understanding the browser HTML page structure Basic HTML components Content VS style CSS selectors Block elements VS inline elements CSS box model
- 6. CSS float CSS position states CSS Specificity And Inheritance Atomic web design Responsive design Designer starter pack Wrap up and questions
- 7. INTRODUCTION ABOUT DESIGN
- 8. Which is design and which is not?
- 9. Definition of design A specification of an object, manifested by some agent, intended to accomplish goals, in a particular environment, using a set of primitive components, satisfying a set of requirements, subject to some constraints
- 10. UNDERSTANDING THE BROWSER
- 11. The browser is the only channel between you and your user, so technically it’s your messenger. But be careful, because it doesn’t tell you the errors in your code. It follows you blindly.
- 12. The browser inspector When in doubt, always right click then “Inspect element”
- 13. HTML PAGE STRUCTURE
- 14. HTML as everything else, contains a head and a body <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Lorem ipsum</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <!– Your main code will be here--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
- 15. BASIC HTML COMPONENTS
- 16. Basic HTML components Headers: <h1></h1> … <h6></h6> Paragraphs: <p></p> Anchor link: <a href=“index.html”></a> Image: <img src=“photo.png”/> Block element: <div> <h1>This is a header</h1> <p>This is a paragraph</p> </div>
- 17. CONTENT VS STYLE
- 18. Content VS style The purpose of design is to enhance the presentation of the content it's applied to. So the next time you’re building a page, always start with typing your HTML first in an organized way and then begin to style it. Also you shouldn’t write unnecessary HTML just to push a <div> a little bit to the right. No, content is content and style is style. Example 1: http://www.w3schools.com/css/css_intro.asp Example 2: http://jgthms.com/web-design-in-4-minutes
- 19. CSS SELECTORS
- 20. How to style an HTML element? You can point to the element directly <p>This is a paragraph</p> p { color: red; } This way all the <p> elements in the page will be colored red
- 21. How to style an HTML element? Or you can point to a class and add this class to your HTML elements <h1 class=“red”>This is a paragraph</h1> <p class=“red”>This is a paragraph</p> <p>This is a paragraph again</p> .red { color: red; } This way all the elements with class “red” in the page will be colored red
- 22. How to style an HTML element? Also you can point to an id and add this id to your HTML element, but be ware that the same id shouldn’t be assigned to multiple elements on the same page. <h1 id=“red”>This is a paragraph</h1> <p class=“red”>This is a paragraph</p> <p>This is a paragraph again</p> #red { color: red; } This way the <h1> with id “red” only will be colored red
- 23. How to style an HTML element? And you can add multiple classes to the same element <h1 class=“text red”>This is a paragraph</h1> <p class=“text red”>This is a paragraph</p> <p class=“red”>This is a paragraph again</p> p.text.red { color: red; } Do you know which element should be red in this case?
- 24. CSS BOX MODEL
- 25. The box model Since any HTML page consists of lines of text and boxes, we need a way to control those boxes.. If we said div { width: 500px; height: 100px; padding: 50px; border: 1px solid black; margin: 50px; }
- 26. But beware of a little trick.. There’s an attribute called “box-sizing” that takes one of two values, “border-box” or “content-box”. The border-box will make the element width/height fixed, then the border and padding values will be taken from the width. So the element width will stay the same when you change the border or the padding. But the content-box will make the element viewed width/height change based on the value of the border and padding. Also content- box is the browser default value for the elements.
- 27. BLOCK ELEMENTS VS INLINE ELEMENTS
- 28. The display CSS attribute is responsible for how the elements stand next to each other in the page. A display:block; element for example will take the whole width of its parent and the following element will begin after it. A display:inline; element will be placed next to the previous element (if it’s an inline too) But be ware that width and height don’t get applied for inline elements, margin and padding gets applied horizontally only. That’s why they made a display:inline-block; to let the elements appear next to each other and also treated as block elements to customize their width, height, margin and padding The display CSS attribute
- 29. Example: http://codepen.io/huijing/pen/PNMxXL
- 30. CSS FLOAT
- 31. The float property is widely used in styling the page layout, and it’s one of the most confusing properties to deal with. It usually takes one of three values: float: left; This takes the element out of the normal document flow and pushes it to the left of its parent float: right; Same behavior but for the right float: none; Removes the float and brings back the element to the normal document flow
- 32. Float problems The most encountered problem while using float is that a non-floated parent element won’t take the height of its floated children So how to solve this problem? 1. By adding an empty element (usually a <div>) and assigning it a clear:both; attribute, this attribute removes the float effect of the previous element and lets the parent element to have a non-floated child to take the automatic height. But this is not the best fix. 2. A more optimized one is by adding a overflow:auto; attribute to the parent
- 33. CSS POSITION STATES
- 34. CSS position is mainly used when you want to take an element out of its normal flow in the page. It takes 3 values, besides the top: Position: relative; it lets you move the element in relative to its original position Position: absolute; it lets you move the element in relative to the boundaries of its nearest relative parent. Position: fixed; it lets you move the element in relative to the boundaries of the browser Then you move the element by setting top, left, right, bottom values.
- 35. z-index Another issue will occur when you start moving elements out of the document flow, for example they might overlap, then how do we choose which element to be on top of the other? By using z-index. It takes values from 1 to the max number you can write, then they are ordered by this value
- 36. CSS SPECIFICITY AND INHERITANCE
- 37. So what happens when the same element gets assigned 2 colors in 2 different classes or any overlapping style in the code? The browser reads the CSS files in a sequential order, this means that the last valid attributes always override the previous ones, but there are some exceptions.
- 38. If the CSS selector is more specific div.main-section p.main-text{ color:black; } .red{ color:red; } <div class=“main-section”> <p class=“main-text red”>Hello world!</p> </div> Which color do you think the <p> will has?
- 39. !important When you add “!important” after the attribute value, it override all the other attributes for this element. .red{ color:red !important; } div.main-section p.main-text{ color:black; } <div class=“main-section”> <p class=“main-text red”>Hello world!</p> </div> Which color do you think the <p> will has?
- 40. Inheritance Some CSS properties are inherited by the children of elements by default. For example, if you set the <body> of a page to a specific font, that font will be inherited by other elements, such as headings and paragraphs, without you having to specifically write as much. To check the list of inherited properties: http://stackoverflow.com/questions/5612302/which-css-properties-are- inherited
- 41. ATOMIC WEB DESIGN
- 42. Source: http://atomicdesign.bradfrost.com/chapter-2/
- 43. RESPONSIVE DESIGN
- 44. Responsive design is making your website’s layout fit flexibly in any screen size. This can be done by using “media queries” They are like an if condition but for screen sizes, and the style inside of it applies only in the targeted screen size.
- 45. Example p{ font-size: 14px; } @media (min-width: 320px) and (max-width: 768px) { p{ font-size:16px; } } And it works for height too!
- 46. DESIGNER STARTER PACK
- 47. • Muzli design inspiration: http://muz.li/ • Code academy for learning all web technologies: https://www.codecademy.com/ • https://hackdesign.org/ a list of articles grouped in lessons about the whole design package
- 48. WRAP UP AND QUESTIONS
