Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Making Your Own CSS Framework
Similaire à Making Your Own CSS Framework (20)
Dernier
Dernier (20)
Making Your Own CSS Framework
- 1. Making your own CSS Framework
- 4. Who am I? I don’t do much coding anymore… I don’t need to.
- 21. Wow, what an ugly site!
- 28. 1 st Step -CSS Reset- h1, p, div, ul, li { margin: 0; padding: 0; border: 0; }
- 34. Margins
- 37. Wow… that’s really ugly.
- 43. Make some widgets (don’t sweat the small stuff)
- 47. Design freedom
- 51. How to do it wrong … or “My first version”
- 52. Version 1 Too Constricting, No Individuality
- 53. Version 1 Too Constricting, No Individuality
- 54. Version 1 Too Constricting, No Individuality
- 56. Once you’ve got the basics… add some flare…
Notes de l'éditeur
- You separate out all the deeper understanding of CSS from the design. Even if you your self are doing the design, you don’t have to Make a new design every time Figure out how to modify an existing design Get stuck with a new design You can effectively start form scratch, with a big head start
- I’m an Information Architect and Project Manager I don’t code as much anymore, because I don’t really need to.. The designer does the designs… and puts in codes for colors and making it look pretty the designer doesn't need to have in depth coding ability… that got done years ago
- A really cool design, vs having the time to take care of everyone Example: like a header, footer, search, or nav Example: breadcrumbs, columned text, videos, expanding nav
- Hey look, they’re the same as HTML5 !
- This is about what you’re left with… it’s the CSS box model….
- So that’s ugly right? But from there you build it into beautiful sites by putting design and individuality on top of the boxes.
- Like this exmaple…
- That template with just the colors is a little too blank for some, so you can expand on it as well… This is a more detailed template, you can still modify it just as much, you’ll just have to do a lot of deleting and changing first, to turn it into your own design.
- Make it match html 5, or better yet, just do it in HTML5… this version has css reset for html 5 Keeping H tags in order, as well as consistent “jump to” Text styles: do them right here, don’t worry about them later Image styles, if you’re going to use em, have a good basis to start…. Most of the time you won’t need to chage them later, but if you do, you’ll have a good start to it
- Here is the list of what should be in the core One I didn’t mention before is image styles Print style sheet is good so you can knock out the navigation… if you want to do that, and make the content areas wider But that leads to what to leave out… the design
- The flare Emph boxes http://www.cehd.umn.edu/ssw/Current/financial-aid/default.asp Pop up video box http://www.cehd.umn.edu/ci/ Slide show http://www.cehd.umn.edu/alumni/events/default.html