Suche senden
Hochladen
Super stylesheets download_en
âą
Als PPTX, PDF herunterladen
âą
0 gefÀllt mir
âą
357 views
M
mbeatrizoliveira
Folgen
Presentation on some tips / techniques to improve CSS and website development.
Weniger lesen
Mehr lesen
Technologie
Bildung
Melden
Teilen
Melden
Teilen
1 von 83
Jetzt herunterladen
Empfohlen
Stepping into the front end: Part 1
Stepping into the front end: Part 1
Tahin Rahman
Â
Responsive web design
Responsive web design
Gopinath Ambothi
Â
Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3
Chandra S Oemarjadi
Â
New HTML5/CSS3 techniques
New HTML5/CSS3 techniques
mbeatrizoliveira
Â
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
Pradeep Varadaraja Banavara
Â
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile Apps
Todd Anglin
Â
Super Stylesheets
Super Stylesheets
mbeatrizoliveira
Â
Html forfood
Html forfood
Cristiane Zimmermann
Â
Empfohlen
Stepping into the front end: Part 1
Stepping into the front end: Part 1
Tahin Rahman
Â
Responsive web design
Responsive web design
Gopinath Ambothi
Â
Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3
Chandra S Oemarjadi
Â
New HTML5/CSS3 techniques
New HTML5/CSS3 techniques
mbeatrizoliveira
Â
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
Pradeep Varadaraja Banavara
Â
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile Apps
Todd Anglin
Â
Super Stylesheets
Super Stylesheets
mbeatrizoliveira
Â
Html forfood
Html forfood
Cristiane Zimmermann
Â
CSS framework
CSS framework
Anjan Bhattrai
Â
Semantic markup - Creating Outline
Semantic markup - Creating Outline
Hernan Mammana
Â
CSS Architecture - JSIL.pdf
CSS Architecture - JSIL.pdf
JonDan6
Â
Tukulam
Tukulam
Tipspo Tips
Â
Front End Good Practices
Front End Good Practices
Hernan Mammana
Â
Into Enemy Territory: Architecting Client-side Code for Syndication
Into Enemy Territory: Architecting Client-side Code for Syndication
mathampson
Â
Razor into the Razor'verse
Razor into the Razor'verse
Ed Charbeneau
Â
Html5 ux london
Html5 ux london
Todd Zaki Warfel
Â
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
Â
Html5
Html5
Rajesh Khetan
Â
Web I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
Randy Connolly
Â
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
raghavanp4
Â
css.ppt
css.ppt
DakshPratapSingh1
Â
css.ppt
css.ppt
Sana903754
Â
The Future State of Layout
The Future State of Layout
Stephen Hay
Â
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
Â
Css best practices style guide and tips
Css best practices style guide and tips
Chris Love
Â
Drupal tips 'n tricks
Drupal tips 'n tricks
John Tsevdos
Â
Slow kinda sucks
Slow kinda sucks
Tim Wright
Â
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
Â
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Â
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Â
Weitere Àhnliche Inhalte
Ăhnlich wie Super stylesheets download_en
CSS framework
CSS framework
Anjan Bhattrai
Â
Semantic markup - Creating Outline
Semantic markup - Creating Outline
Hernan Mammana
Â
CSS Architecture - JSIL.pdf
CSS Architecture - JSIL.pdf
JonDan6
Â
Tukulam
Tukulam
Tipspo Tips
Â
Front End Good Practices
Front End Good Practices
Hernan Mammana
Â
Into Enemy Territory: Architecting Client-side Code for Syndication
Into Enemy Territory: Architecting Client-side Code for Syndication
mathampson
Â
Razor into the Razor'verse
Razor into the Razor'verse
Ed Charbeneau
Â
Html5 ux london
Html5 ux london
Todd Zaki Warfel
Â
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
Â
Html5
Html5
Rajesh Khetan
Â
Web I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
Randy Connolly
Â
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
raghavanp4
Â
css.ppt
css.ppt
DakshPratapSingh1
Â
css.ppt
css.ppt
Sana903754
Â
The Future State of Layout
The Future State of Layout
Stephen Hay
Â
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
Â
Css best practices style guide and tips
Css best practices style guide and tips
Chris Love
Â
Drupal tips 'n tricks
Drupal tips 'n tricks
John Tsevdos
Â
Slow kinda sucks
Slow kinda sucks
Tim Wright
Â
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
Â
Ăhnlich wie Super stylesheets download_en
(20)
CSS framework
CSS framework
Â
Semantic markup - Creating Outline
Semantic markup - Creating Outline
Â
CSS Architecture - JSIL.pdf
CSS Architecture - JSIL.pdf
Â
Tukulam
Tukulam
Â
Front End Good Practices
Front End Good Practices
Â
Into Enemy Territory: Architecting Client-side Code for Syndication
Into Enemy Territory: Architecting Client-side Code for Syndication
Â
Razor into the Razor'verse
Razor into the Razor'verse
Â
Html5 ux london
Html5 ux london
Â
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Â
Html5
Html5
Â
Web I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
Â
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
Â
css.ppt
css.ppt
Â
css.ppt
css.ppt
Â
The Future State of Layout
The Future State of Layout
Â
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Â
Css best practices style guide and tips
Css best practices style guide and tips
Â
Drupal tips 'n tricks
Drupal tips 'n tricks
Â
Slow kinda sucks
Slow kinda sucks
Â
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Â
KĂŒrzlich hochgeladen
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Â
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Â
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Â
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Â
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Â
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Â
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Â
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Â
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Â
đŹ The future of MySQL is Postgres đ
đŹ The future of MySQL is Postgres đ
RTylerCroy
Â
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Â
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Â
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Â
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Â
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Â
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Â
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Â
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Â
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Â
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
Â
KĂŒrzlich hochgeladen
(20)
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Â
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Â
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Â
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Â
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Â
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Â
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Â
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Â
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Â
đŹ The future of MySQL is Postgres đ
đŹ The future of MySQL is Postgres đ
Â
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Â
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Â
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Â
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Â
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Â
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Â
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Â
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Â
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Â
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Â
Super stylesheets download_en
1.
Super Stylesheets
2.
Beatriz Oliveira
3.
4.
5.
6.
7.
8.
9.
10.
tipstechniques
11.
web design +
easier
12.
Reset CSS Tip #1
13.
http://meyerweb.com/eric/thought s/2007/05/01/reset-reloaded/
14.
why?
15.
browsers have â presentation
defaults
16.
default look consistent across
browsers
17.
less fighting browsers CSS
18.
html, body, div,
span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font- size:100%;font-family:inherit;vertical-align:baseline; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } /* remember to define focus pseudo-class to your styles! */ :focus { outline:0; } body { line-height:1; color:black; background:white; } ol, ul { list-style:none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } table, td, th { vertical-align:middle; } blockquote:before, blockquote:after, q:before, q:after { content:""; } /*Do not insert quotation marks around quote*/ blockquote, q { quotes:"" ""; } /*Reset quotes to none*/ a img { border:none; }
19.
demo
20.
Tableless design Tip #2
21.
what is it?
22.
HTML tablesHTML tablesCSS
23.
table = tabular
data
24.
advantages âą Accessibility âą
Flexibility for designers âą Bandwidth savings âą Maintainability
25.
wrapper footer outer
26.
logo navaux navbar breadcrumb date Content Area
27.
<div id="Wrapper"> <div id="Outer"> <div
id="Logo"/> <div id="NavAuxâ> <div id="NavBarâ/> <div id="Breadcrumbâ/> <div id="Dateâ/> <div id=âContentAreaâ/> </div> <div id="Footerâ/> </div>
28.
demo
29.
Grids Tip #3
30.
what are grids?
31.
32.
33.
units columns
34.
35.
36.
37.
38.
39.
40.
41.
http://developer.yahoo.com/yui/grids YUI GRIDS
42.
43.
http://960.gs/ 960 GRID SYSTEM
44.
45.
http://www.spry-soft.com/grids/ grids generator
46.
47.
demo
48.
Universal container Tip #4
49.
50.
51.
52.
<div class="container"> <div class="C01_Boxâ> <div
class="C01_BoxTL"> <div class="C01_BoxTR"> <div class="C01_BoxTMâ>Title Elements</div> </div> </div> <div class="C01_BoxML"> <div class="C01_BoxMR"> <div class="C01_BoxMMâ>Content Area Elements</div> </div> </div> <div class="C01_BoxBL"> <div class="C01_BoxBR"> <div class="C01_BoxBMâ>Footer Elements</div> </div> </div> </div> </div>
53.
<div class="container"> <div class="C01_Boxâ> <div
class="C01_BoxTL"> <div class="C01_BoxTR"> <div class="C01_BoxTMâ>Title Elements</div> </div> </div> <div class="C01_BoxML"> <div class="C01_BoxMR"> <div class="C01_BoxMMâ>Content Area Elements</div> </div> </div> <div class="C01_BoxBL"> <div class="C01_BoxBR"> <div class="C01_BoxBMâ>Footer Elements</div> </div> </div> </div> </div>
54.
demo
55.
Always-on-bottom footer Tip #5
56.
57.
demo
58.
CSS Sprites Tip #6
59.
what are sprites?
60.
61.
where are they
used?
62.
63.
64.
65.
advantages âą less
files âą contained changes âą maintainability âą less server requests âą better performance
66.
where does it
fail?
67.
http://spriteme.org/
68.
http://csssprites.com
69.
70.
use blueprints Tip #7
71.
what are blueprints?
72.
73.
CSS framework
74.
reduce dev time
75.
facilitate testing
76.
77.
http://blueprintcss.org joshua clayton
78.
http://dnnblueprint.codeplex.com
79.
features Reset CSS HTML
base structure Grids Typographic base HTML version Print CSS*
80.
demo
81.
7 Tips Reset
CSS Tableless design Grids Universal container Always-on-bottom footer CSS Sprites Use blueprints
82.
Contacts www.bind.pt Twitter â
bindskins beatrizoliveira@bind.pt http://dnnblueprint.codeplex.com http://orchardblueprint.codeplex.co m
83.
questions?
Hinweis der Redaktion
Apply to an existing web site
Use before development. Upload images Create sprite
Jetzt herunterladen