SlideShare ist ein Scribd-Unternehmen logo
1 von 140
Downloaden Sie, um offline zu lesen
DESIGNING WITH
                     Daniel Reedy
       daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
CASCADING STYLE

                         Daniel Reedy
           daniel.reedy@housing.siu.edu
FLEXIBILITY

                        Daniel Reedy
          daniel.reedy@housing.siu.edu
FLEXIBILITY

                        Daniel Reedy
          daniel.reedy@housing.siu.edu
SEPARATION OF COMPONENTS

                               Daniel Reedy
                 daniel.reedy@housing.siu.edu
screen.css




index.html


             print.css




                                  Daniel Reedy
                    daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
+


                  Daniel Reedy
    daniel.reedy@housing.siu.edu
+   =


                      Daniel Reedy
        daniel.reedy@housing.siu.edu
CONSISTANCY

                       Daniel Reedy
         daniel.reedy@housing.siu.edu
CONSISTANCY

                       Daniel Reedy
         daniel.reedy@housing.siu.edu
BANDWIDTH

                      Daniel Reedy
        daniel.reedy@housing.siu.edu
PAGE REFORMATTING

                          Daniel Reedy
            daniel.reedy@housing.siu.edu
GETTING STARTED

                          Daniel Reedy
            daniel.reedy@housing.siu.edu
GETTING STARTED

                          Daniel Reedy
            daniel.reedy@housing.siu.edu
EVEN THE PLAYING FIELD

                              Daniel Reedy
                daniel.reedy@housing.siu.edu
RESET STYLE SHEET

                           Daniel Reedy
             daniel.reedy@housing.siu.edu
RESET STYLE SHEET

                           Daniel Reedy
             daniel.reedy@housing.siu.edu
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p,           
 line-height: 1;
blockquote, pre, a, abbr, acronym,           
 color: black;
address, big, cite, code,del, dfn, em,       
 background: white;
font, img, ins, kbd, q, s, samp, small,      }
strike, strong, sub, sup, tt, var, dl, dt,   ol, ul {
dd, ol, ul, li, fieldset, form, label,        
 list-style: none;
legend,                                      }
table, caption, tbody, tfoot, thead, tr,     /* tables still need 'cellspacing="0"'
th, td {                                     in the markup */

 margin: 0;                                 table {

 padding: 0;                                
 border-collapse: separate;




            RESET STYLE SHEET

 border: 0;                                 
 border-spacing: 0;

 outline: 0;                                }

 font-weight: inherit;                      caption, th, td {

 font-style: inherit;                       
 text-align: left;

 font-size: 100%;                           
 font-weight: normal;

 font-family: inherit;                      }

 vertical-align: baseline;                  blockquote:before, blockquote:after,
}                                            q:before, q:after {
/* remember to define focus styles!           
 content: "";
*/                                           }
:focus {                                     blockquote, q {

 outline: 0;                                
 quotes: "" "";
}                                            }                              Daniel Reedy
body {                                                      daniel.reedy@housing.siu.edu
                                                         http://meyerweb.com/eric/thoughts/
                                                              2007/05/01/reset-reloaded/
RESET STYLE SHEET

                           Daniel Reedy
             daniel.reedy@housing.siu.edu
GREAT WEB TYPOGRAPHY

                            Daniel Reedy
              daniel.reedy@housing.siu.edu
GREAT WEB TYPOGRAPHY

                            Daniel Reedy
              daniel.reedy@housing.siu.edu
STATIC IMAGES

                         Daniel Reedy
           daniel.reedy@housing.siu.edu
SIFR 2.0

                         Daniel Reedy
           daniel.reedy@housing.siu.edu
EMBEDDED OPEN TYPE

                           Daniel Reedy
             daniel.reedy@housing.siu.edu
@FONT-FACE

                       Daniel Reedy
         daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
@FONT-FACE
                     Daniel Reedy
       daniel.reedy@housing.siu.edu
/* In your CSS file (e.g. typography.css) */

@font-face {
  font-family: "MinyaNouvelle";



           @FONT-FACE
  src: url('http://localhost/fonts/minya-nouvelle-bd.otf') format("opentype");
}

h1, h2, h3, h4, h5 { font-family: "MinyaNouvelle", sans-serif }




                                                                     Daniel Reedy
                                                       daniel.reedy@housing.siu.edu
@FONT-FACE
                     Daniel Reedy
       daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Font Available Plugin: http://
code.google.com/p/jquery-
CÚFON & @FONT-

                            Daniel Reedy
          daniel.reedy@housing.siu.edu
          Font Available Plugin: http://
          code.google.com/p/jquery-
<!-- // In the <HEAD> tags of your document -->
<script type="text/javascript">
$(document).ready(function() {
    if(!$.fontAvailable('MinyaNouvelle')) {
      Cufon.replace('h1', {
        fontFamily: “MinyaNouvelle”
      });


      CÚFON & @FONT-
    }
});
</script>

<!-- // Directly prior to the </BODY> tag. This is need for IE -->
<script type="text/javascript"> Cufon.now(); </script>




                                                                       Daniel Reedy
                                                     daniel.reedy@housing.siu.edu
                                                     Font Available Plugin: http://
                                                      code.google.com/p/jquery-
CÚFON & @FONT-

                            Daniel Reedy
          daniel.reedy@housing.siu.edu
          Font Available Plugin: http://
          code.google.com/p/jquery-
Daniel Reedy
daniel.reedy@housing.siu.edu
FRESH IDEAS ON WEB

                          Daniel Reedy
            daniel.reedy@housing.siu.edu
.WEBFONT

                         Daniel Reedy
           daniel.reedy@housing.siu.edu
.WEBFONT

                         Daniel Reedy
           daniel.reedy@housing.siu.edu
TYPEKIT

                        Daniel Reedy
          daniel.reedy@housing.siu.edu
KERNEST

                        Daniel Reedy
          daniel.reedy@housing.siu.edu
FONT DECK

                      Daniel Reedy
        daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
LAYOUT
                   Daniel Reedy
     daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
BOX MODEL
                     Daniel Reedy
       daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6


                          Daniel Reedy
            daniel.reedy@housing.siu.edu
Element 1




                          Daniel Reedy
            daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
CONTENT




                        Daniel Reedy
          daniel.reedy@housing.siu.edu
PADDING
   CONTENT




                           Daniel Reedy
             daniel.reedy@housing.siu.edu
BORDER
 PADDING
     CONTENT




                             Daniel Reedy
               daniel.reedy@housing.siu.edu
MARGIN

   BORDER
    PADDING
         CONTENT




                                 Daniel Reedy
                   daniel.reedy@housing.siu.edu
TOP

       MARGIN

          BORDER
           PADDING
LEFT            CONTENT          RIGHT




                BOTTOM



                                        Daniel Reedy
                          daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
UNITS OF
                     Daniel Reedy
       daniel.reedy@housing.siu.edu
PIXELS   (PX)


                          Daniel Reedy
            daniel.reedy@housing.siu.edu
PIXELS   (PX)


                          Daniel Reedy
            daniel.reedy@housing.siu.edu
EM SPACE   (EM)


                         Daniel Reedy
           daniel.reedy@housing.siu.edu
PERCENT   (%)


                        Daniel Reedy
          daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
ESTABLISH A

                       Daniel Reedy
         daniel.reedy@housing.siu.edu
/* In your type CSS file (e.g. typography.css) */

body {
  font-size: 62.5%; /* This establishes a 10px = 1em ratio */
}




                  ESTABLISH A

                                                                   Daniel Reedy
                                                     daniel.reedy@housing.siu.edu
/* In your type CSS file (e.g. typography.css) */

body {
  font-size: 62.5%; /* This establishes a 10px = 1em ratio */
}




                  ESTABLISH A
h1 { font-size: 2.4em; } /* 24px */
h2 { font-size: 1.8em; } /* 18px */
h3 { font-size: 1.4em; } /* 14px */




                                                                   Daniel Reedy
                                                     daniel.reedy@housing.siu.edu
/* In your type CSS file (e.g. typography.css) */

body {
  font-size: 62.5%; /* This establishes a 10px = 1em ratio */
}




                   ESTABLISH A
h1 { font-size: 2.4em; } /* 24px */
h2 { font-size: 1.8em; } /* 18px */
h3 { font-size: 1.4em; } /* 14px */

/* In your layout CSS File (e.g. screen.css) */
#header { height: 3em; } /* 30px */




                                                                   Daniel Reedy
                                                     daniel.reedy@housing.siu.edu
ESTABLISH A

                       Daniel Reedy
         daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
WHICH ONE?
                     Daniel Reedy
       daniel.reedy@housing.siu.edu
Designing With CSS
Designing With CSS
Daniel Reedy
daniel.reedy@housing.siu.edu
FLOATS
                   Daniel Reedy
     daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
box 1

box 2




                      Daniel Reedy
        daniel.reedy@housing.siu.edu
box 1   box 2




                          Daniel Reedy
            daniel.reedy@housing.siu.edu
box 1   box 2




                          Daniel Reedy
            daniel.reedy@housing.siu.edu
box 1                       box 2
<!-- // In your .html file -->
<div id=”box1”>
 <p>box 1</p>
</div>
<div id=”box2”>
 <p>box 2</p>
</div>

/* In your layout CSS File (e.g. screen.css) */

#box1 { float: left; margin-right: 1em; width: 3em; }




                                                                     Daniel Reedy
                                                       daniel.reedy@housing.siu.edu
box 1   box 2




                          Daniel Reedy
            daniel.reedy@housing.siu.edu
CSS FRAMEWORKS

                         Daniel Reedy
           daniel.reedy@housing.siu.edu
CSS FRAMEWORKS

                         Daniel Reedy
           daniel.reedy@housing.siu.edu
SPEED UP DEVELOPMENT

                            Daniel Reedy
              daniel.reedy@housing.siu.edu
SIMPLIFY DESIGN

                          Daniel Reedy
            daniel.reedy@housing.siu.edu
EASILY BREAKABLE

                          Daniel Reedy
            daniel.reedy@housing.siu.edu
STRICT CONSTRAINTS

                           Daniel Reedy
             daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
BLUEPRINT   960 GRID      YAHOO


                                 Daniel Reedy
                   daniel.reedy@housing.siu.edu
960 GRID
                    Daniel Reedy
      daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
RESET, TYPOGRAPHY, &

                            Daniel Reedy
              daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
GRIDS
                      Daniel Reedy
        daniel.reedy@housing.siu.edu
Designing With CSS
Designing With CSS
Designing With CSS
Daniel Reedy
daniel.reedy@housing.siu.edu
PUTTING IT ALL TOGETHER

                             Daniel Reedy
               daniel.reedy@housing.siu.edu
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   <head>

   </head>

   <body>

   
    <div class="container_12">

   
    
    <div class="grid_12">

   
    
    
    <!-- // SIU Header -->

   
    
    </div>

   
    
    <div class="clear">&nbsp;</div>

   
    </div>

   
    <div id="housing_header" class="container_12">

   
    
    <div class="grid_12 alpha omega">

   
    
    
    <!-- // Navigation -->

   
    
    </div>

   
    

   
    
    <div class="prefix_8 grid_4 omega">

   
    
    
    <!-- // Mission Statement -->

   
    
    </div>

   
    
    <div class="clear">&nbsp;</div>

   
    </div>

   
    <div id="page_content" class="container_12">

   
    
    <div class="grid_4">

   
    
    
    <!-- // Left Column -->

   
    
    </div>

   
    
    <div class="prefix_1 grid_4">

   
    
    
    <!-- // Middle Column -->

   
    
    </div>

   
    
    <div class="grid_3 omega">

   
    
    
    <!-- // Right Column -->

   
    
    </div>

   
    
    <div class="clear">&nbsp;</div>

   
    </div>
Daniel Reedy
daniel.reedy@housing.siu.edu
THE STYLE SHEETS

                          Daniel Reedy
            daniel.reedy@housing.siu.edu
THE STYLE SHEETS




                           Daniel Reedy
             daniel.reedy@housing.siu.edu
THE STYLE SHEETS
reset    960   typography   layout            colour




                                            Daniel Reedy
                              daniel.reedy@housing.siu.edu
THE STYLE SHEETS
reset    960   typography            layout            colour




                            screen            print




                                                     Daniel Reedy
                                       daniel.reedy@housing.siu.edu
THE STYLE SHEETS
    reset              960   typography            layout            colour




If Internet Explorer


     ie7               ie6                screen            print




                                                                   Daniel Reedy
                                                     daniel.reedy@housing.siu.edu
THE STYLE SHEETS
    reset              960   typography            layout            colour




If Internet Explorer


     ie7               ie6                screen            print




                                                                   Daniel Reedy
                                                     daniel.reedy@housing.siu.edu
Designing With CSS
/* colour.css */
html { background: rgb(87,0,36); }
a { color: rgb(14,117,138); }
a:visted { color: rgb(110,5,101); }
#siu_header, #siu_header a { color: rgb(132,128,111); }
#mission { color: rgb(216,214,184); }
#main_navigation, #main_navigation a, #footer_navigation, #footer_navigation a {
  color: rgb(255,255,255);
}
#columns, #columns a { color: rgb(87,0,36); }
#copyright { color: rgb(255,255,255); }

/* typography.css */
body { font-size:62.5%; } /* 1em = 10px */
h1 { font-size:2.4em; } /* displayed at 24px */
h2 { font-size:2.0em; } /* displayed at 20px */
h3 { font-size:1.8em; } /* displayed at 18px */
h4 { font-size:1.4em; } /* displayed at 14px */
#page_content p { font-size:1.4em; line-height: 1.8em; margin-bottom: 1.8em;} /* displayed at 14px */
#siu_header { font-size: 2.0em; text-align: center; letter-spacing: .5em; text-transform: uppercase; }
#siu_header a { text-decoration: none; }
#mission { font-size: 2.3em; letter-spacing: .04em; }
#main_navigation, #footer_navigation {
  font-size: 1.5em; text-align: center; text-transform: uppercase;
}
#columns h2 { font-size: 1.8em; text-transform: uppercase; }
#columns ul li { font-size: 1.4em; line-height: 1.8em;}
#copyright {
  font-family: Helvetica, Verdana, Arial, sans-serif; font-size: .8em;
  letter-spacing: .1em; line-height: 1.6em;
}
.angelina { font-size: 1.8em; }
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
<!-- // index.html -->
<div class="flyer">
 <p>
  <a href="/contract/residence-halls/">
   <img src="/images/housing_rocks.png" alt="Housing Rocks" />
  </a>
 </p>
</div>


/* screen.css */
.flyer {

    -webkit-transform: rotate(3deg);

    -moz-transform: rotate(3deg);
}
Daniel Reedy
daniel.reedy@housing.siu.edu
WHAT’S NEW IN CSS3?

                           Daniel Reedy
             daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
Q&A – CSS EVALUATION

                           Daniel Reedy
             daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
THANK YOU!

                      Daniel Reedy
        daniel.reedy@housing.siu.edu
Daniel Reedy
daniel.reedy@housing.siu.edu
ERIC MEYER RESET CSS: HTTP://MEYERWEB.COM/ERIC/THOUGHTS/
2007/05/01/RESET-RELOADED/
SCALABLE INMAN FLASH REPLACEMENT: HTTP://
WWW.MIKEINDUSTRIES.COM/BLOG/SIFR/
EMBEDDED OPEN TYPE (EOT) FONT TOOL: HTTP://
WWW.MICROSOFT.COM/TYPOGRAPHY/WEFT.MSPX
OVERVIEW OF @FONT-FACE: HTTPS://DEVELOPER.MOZILLA.ORG/
INDEX.PHP?TITLE=EN/CSS/%40FONT-FACE
CÚFON: HTTP://WIKI.GITHUB.COM/SORCCU/CUFON/ABOUT
.WEBFONT PROPOSAL HTTP://LISTS.W3.ORG/ARCHIVES/PUBLIC/WWW-
FONT/2009JULSEP/0440.HTML
TYPE FOUNDRIES SUPPORTING .WEBFONT: HTTP://
WWW.TYPOGRAPHER.ORG/2009/07/WEBFONT-PROPOSAL-GAINS-

                                                      Daniel Reedy
                                        daniel.reedy@housing.siu.edu

Weitere ähnliche Inhalte

Andere mochten auch

MF Global Seminar 15 Oct 2009
MF Global Seminar 15 Oct 2009MF Global Seminar 15 Oct 2009
MF Global Seminar 15 Oct 2009Rio Tinto plc
 
Rio Tinto Iron and Titanium At TZMI Congress
Rio Tinto Iron and Titanium At TZMI CongressRio Tinto Iron and Titanium At TZMI Congress
Rio Tinto Iron and Titanium At TZMI CongressRio Tinto plc
 
Presentation To North American Fixed Income Investors 29 31 March 2010
Presentation To North American Fixed Income Investors 29 31 March 2010Presentation To North American Fixed Income Investors 29 31 March 2010
Presentation To North American Fixed Income Investors 29 31 March 2010Rio Tinto plc
 
Rio Tinto half year results presentation slides 2009
Rio Tinto half year results presentation slides 2009Rio Tinto half year results presentation slides 2009
Rio Tinto half year results presentation slides 2009Rio Tinto plc
 
Rio Tinto Macquarie Global Metals Mining Conference 30 Nov 2009
Rio Tinto Macquarie Global Metals Mining Conference 30 Nov 2009Rio Tinto Macquarie Global Metals Mining Conference 30 Nov 2009
Rio Tinto Macquarie Global Metals Mining Conference 30 Nov 2009Rio Tinto plc
 
2009 Rio Tinto annual investor seminar
2009 Rio Tinto annual investor seminar2009 Rio Tinto annual investor seminar
2009 Rio Tinto annual investor seminarRio Tinto plc
 
Bmo Capital Markets 1 March 2010
Bmo Capital Markets 1 March 2010Bmo Capital Markets 1 March 2010
Bmo Capital Markets 1 March 2010Rio Tinto plc
 
Relations In Online Communities
Relations In Online CommunitiesRelations In Online Communities
Relations In Online Communitiessparrowzen
 

Andere mochten auch (9)

MF Global Seminar 15 Oct 2009
MF Global Seminar 15 Oct 2009MF Global Seminar 15 Oct 2009
MF Global Seminar 15 Oct 2009
 
Rio Tinto Iron and Titanium At TZMI Congress
Rio Tinto Iron and Titanium At TZMI CongressRio Tinto Iron and Titanium At TZMI Congress
Rio Tinto Iron and Titanium At TZMI Congress
 
Presentation To North American Fixed Income Investors 29 31 March 2010
Presentation To North American Fixed Income Investors 29 31 March 2010Presentation To North American Fixed Income Investors 29 31 March 2010
Presentation To North American Fixed Income Investors 29 31 March 2010
 
Rio Tinto half year results presentation slides 2009
Rio Tinto half year results presentation slides 2009Rio Tinto half year results presentation slides 2009
Rio Tinto half year results presentation slides 2009
 
Rio Tinto Macquarie Global Metals Mining Conference 30 Nov 2009
Rio Tinto Macquarie Global Metals Mining Conference 30 Nov 2009Rio Tinto Macquarie Global Metals Mining Conference 30 Nov 2009
Rio Tinto Macquarie Global Metals Mining Conference 30 Nov 2009
 
Anchor Ads Adv4
Anchor Ads Adv4Anchor Ads Adv4
Anchor Ads Adv4
 
2009 Rio Tinto annual investor seminar
2009 Rio Tinto annual investor seminar2009 Rio Tinto annual investor seminar
2009 Rio Tinto annual investor seminar
 
Bmo Capital Markets 1 March 2010
Bmo Capital Markets 1 March 2010Bmo Capital Markets 1 March 2010
Bmo Capital Markets 1 March 2010
 
Relations In Online Communities
Relations In Online CommunitiesRelations In Online Communities
Relations In Online Communities
 

Kürzlich hochgeladen

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Kürzlich hochgeladen (20)

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

Designing With CSS

  • 1. DESIGNING WITH Daniel Reedy daniel.reedy@housing.siu.edu
  • 3. CASCADING STYLE Daniel Reedy daniel.reedy@housing.siu.edu
  • 4. FLEXIBILITY Daniel Reedy daniel.reedy@housing.siu.edu
  • 5. FLEXIBILITY Daniel Reedy daniel.reedy@housing.siu.edu
  • 6. SEPARATION OF COMPONENTS Daniel Reedy daniel.reedy@housing.siu.edu
  • 7. screen.css index.html print.css Daniel Reedy daniel.reedy@housing.siu.edu
  • 10. + Daniel Reedy daniel.reedy@housing.siu.edu
  • 11. + = Daniel Reedy daniel.reedy@housing.siu.edu
  • 12. CONSISTANCY Daniel Reedy daniel.reedy@housing.siu.edu
  • 13. CONSISTANCY Daniel Reedy daniel.reedy@housing.siu.edu
  • 14. BANDWIDTH Daniel Reedy daniel.reedy@housing.siu.edu
  • 15. PAGE REFORMATTING Daniel Reedy daniel.reedy@housing.siu.edu
  • 16. GETTING STARTED Daniel Reedy daniel.reedy@housing.siu.edu
  • 17. GETTING STARTED Daniel Reedy daniel.reedy@housing.siu.edu
  • 18. EVEN THE PLAYING FIELD Daniel Reedy daniel.reedy@housing.siu.edu
  • 19. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
  • 20. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
  • 21. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, line-height: 1; blockquote, pre, a, abbr, acronym, color: black; address, big, cite, code,del, dfn, em, background: white; font, img, ins, kbd, q, s, samp, small, } strike, strong, sub, sup, tt, var, dl, dt, ol, ul { dd, ol, ul, li, fieldset, form, label, list-style: none; legend, } table, caption, tbody, tfoot, thead, tr, /* tables still need 'cellspacing="0"' th, td { in the markup */ margin: 0; table { padding: 0; border-collapse: separate; RESET STYLE SHEET border: 0; border-spacing: 0; outline: 0; } font-weight: inherit; caption, th, td { font-style: inherit; text-align: left; font-size: 100%; font-weight: normal; font-family: inherit; } vertical-align: baseline; blockquote:before, blockquote:after, } q:before, q:after { /* remember to define focus styles! content: ""; */ } :focus { blockquote, q { outline: 0; quotes: "" ""; } } Daniel Reedy body { daniel.reedy@housing.siu.edu http://meyerweb.com/eric/thoughts/ 2007/05/01/reset-reloaded/
  • 22. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
  • 23. GREAT WEB TYPOGRAPHY Daniel Reedy daniel.reedy@housing.siu.edu
  • 24. GREAT WEB TYPOGRAPHY Daniel Reedy daniel.reedy@housing.siu.edu
  • 25. STATIC IMAGES Daniel Reedy daniel.reedy@housing.siu.edu
  • 26. SIFR 2.0 Daniel Reedy daniel.reedy@housing.siu.edu
  • 27. EMBEDDED OPEN TYPE Daniel Reedy daniel.reedy@housing.siu.edu
  • 28. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
  • 31. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
  • 32. /* In your CSS file (e.g. typography.css) */ @font-face { font-family: "MinyaNouvelle"; @FONT-FACE src: url('http://localhost/fonts/minya-nouvelle-bd.otf') format("opentype"); } h1, h2, h3, h4, h5 { font-family: "MinyaNouvelle", sans-serif } Daniel Reedy daniel.reedy@housing.siu.edu
  • 33. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
  • 36. Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
  • 37. CÚFON & @FONT- Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
  • 38. <!-- // In the <HEAD> tags of your document --> <script type="text/javascript"> $(document).ready(function() { if(!$.fontAvailable('MinyaNouvelle')) { Cufon.replace('h1', { fontFamily: “MinyaNouvelle” }); CÚFON & @FONT- } }); </script> <!-- // Directly prior to the </BODY> tag. This is need for IE --> <script type="text/javascript"> Cufon.now(); </script> Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
  • 39. CÚFON & @FONT- Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
  • 41. FRESH IDEAS ON WEB Daniel Reedy daniel.reedy@housing.siu.edu
  • 42. .WEBFONT Daniel Reedy daniel.reedy@housing.siu.edu
  • 43. .WEBFONT Daniel Reedy daniel.reedy@housing.siu.edu
  • 44. TYPEKIT Daniel Reedy daniel.reedy@housing.siu.edu
  • 45. KERNEST Daniel Reedy daniel.reedy@housing.siu.edu
  • 46. FONT DECK Daniel Reedy daniel.reedy@housing.siu.edu
  • 48. LAYOUT Daniel Reedy daniel.reedy@housing.siu.edu
  • 50. BOX MODEL Daniel Reedy daniel.reedy@housing.siu.edu
  • 53. Element 1 Element 2 Element 3 Element 4 Element 5 Element 6 Daniel Reedy daniel.reedy@housing.siu.edu
  • 54. Element 1 Daniel Reedy daniel.reedy@housing.siu.edu
  • 57. CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
  • 58. PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
  • 59. BORDER PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
  • 60. MARGIN BORDER PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
  • 61. TOP MARGIN BORDER PADDING LEFT CONTENT RIGHT BOTTOM Daniel Reedy daniel.reedy@housing.siu.edu
  • 63. UNITS OF Daniel Reedy daniel.reedy@housing.siu.edu
  • 64. PIXELS (PX) Daniel Reedy daniel.reedy@housing.siu.edu
  • 65. PIXELS (PX) Daniel Reedy daniel.reedy@housing.siu.edu
  • 66. EM SPACE (EM) Daniel Reedy daniel.reedy@housing.siu.edu
  • 67. PERCENT (%) Daniel Reedy daniel.reedy@housing.siu.edu
  • 69. ESTABLISH A Daniel Reedy daniel.reedy@housing.siu.edu
  • 70. /* In your type CSS file (e.g. typography.css) */ body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */ } ESTABLISH A Daniel Reedy daniel.reedy@housing.siu.edu
  • 71. /* In your type CSS file (e.g. typography.css) */ body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */ } ESTABLISH A h1 { font-size: 2.4em; } /* 24px */ h2 { font-size: 1.8em; } /* 18px */ h3 { font-size: 1.4em; } /* 14px */ Daniel Reedy daniel.reedy@housing.siu.edu
  • 72. /* In your type CSS file (e.g. typography.css) */ body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */ } ESTABLISH A h1 { font-size: 2.4em; } /* 24px */ h2 { font-size: 1.8em; } /* 18px */ h3 { font-size: 1.4em; } /* 14px */ /* In your layout CSS File (e.g. screen.css) */ #header { height: 3em; } /* 30px */ Daniel Reedy daniel.reedy@housing.siu.edu
  • 73. ESTABLISH A Daniel Reedy daniel.reedy@housing.siu.edu
  • 75. WHICH ONE? Daniel Reedy daniel.reedy@housing.siu.edu
  • 79. FLOATS Daniel Reedy daniel.reedy@housing.siu.edu
  • 82. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
  • 83. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
  • 84. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
  • 85. box 1 box 2 <!-- // In your .html file --> <div id=”box1”> <p>box 1</p> </div> <div id=”box2”> <p>box 2</p> </div> /* In your layout CSS File (e.g. screen.css) */ #box1 { float: left; margin-right: 1em; width: 3em; } Daniel Reedy daniel.reedy@housing.siu.edu
  • 86. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
  • 87. CSS FRAMEWORKS Daniel Reedy daniel.reedy@housing.siu.edu
  • 88. CSS FRAMEWORKS Daniel Reedy daniel.reedy@housing.siu.edu
  • 89. SPEED UP DEVELOPMENT Daniel Reedy daniel.reedy@housing.siu.edu
  • 90. SIMPLIFY DESIGN Daniel Reedy daniel.reedy@housing.siu.edu
  • 91. EASILY BREAKABLE Daniel Reedy daniel.reedy@housing.siu.edu
  • 92. STRICT CONSTRAINTS Daniel Reedy daniel.reedy@housing.siu.edu
  • 94. BLUEPRINT 960 GRID YAHOO Daniel Reedy daniel.reedy@housing.siu.edu
  • 95. 960 GRID Daniel Reedy daniel.reedy@housing.siu.edu
  • 97. RESET, TYPOGRAPHY, & Daniel Reedy daniel.reedy@housing.siu.edu
  • 99. GRIDS Daniel Reedy daniel.reedy@housing.siu.edu
  • 104. PUTTING IT ALL TOGETHER Daniel Reedy daniel.reedy@housing.siu.edu
  • 116. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> </head> <body> <div class="container_12"> <div class="grid_12"> <!-- // SIU Header --> </div> <div class="clear">&nbsp;</div> </div> <div id="housing_header" class="container_12"> <div class="grid_12 alpha omega"> <!-- // Navigation --> </div> <div class="prefix_8 grid_4 omega"> <!-- // Mission Statement --> </div> <div class="clear">&nbsp;</div> </div> <div id="page_content" class="container_12"> <div class="grid_4"> <!-- // Left Column --> </div> <div class="prefix_1 grid_4"> <!-- // Middle Column --> </div> <div class="grid_3 omega"> <!-- // Right Column --> </div> <div class="clear">&nbsp;</div> </div>
  • 118. THE STYLE SHEETS Daniel Reedy daniel.reedy@housing.siu.edu
  • 119. THE STYLE SHEETS Daniel Reedy daniel.reedy@housing.siu.edu
  • 120. THE STYLE SHEETS reset 960 typography layout colour Daniel Reedy daniel.reedy@housing.siu.edu
  • 121. THE STYLE SHEETS reset 960 typography layout colour screen print Daniel Reedy daniel.reedy@housing.siu.edu
  • 122. THE STYLE SHEETS reset 960 typography layout colour If Internet Explorer ie7 ie6 screen print Daniel Reedy daniel.reedy@housing.siu.edu
  • 123. THE STYLE SHEETS reset 960 typography layout colour If Internet Explorer ie7 ie6 screen print Daniel Reedy daniel.reedy@housing.siu.edu
  • 125. /* colour.css */ html { background: rgb(87,0,36); } a { color: rgb(14,117,138); } a:visted { color: rgb(110,5,101); } #siu_header, #siu_header a { color: rgb(132,128,111); } #mission { color: rgb(216,214,184); } #main_navigation, #main_navigation a, #footer_navigation, #footer_navigation a { color: rgb(255,255,255); } #columns, #columns a { color: rgb(87,0,36); } #copyright { color: rgb(255,255,255); } /* typography.css */ body { font-size:62.5%; } /* 1em = 10px */ h1 { font-size:2.4em; } /* displayed at 24px */ h2 { font-size:2.0em; } /* displayed at 20px */ h3 { font-size:1.8em; } /* displayed at 18px */ h4 { font-size:1.4em; } /* displayed at 14px */ #page_content p { font-size:1.4em; line-height: 1.8em; margin-bottom: 1.8em;} /* displayed at 14px */ #siu_header { font-size: 2.0em; text-align: center; letter-spacing: .5em; text-transform: uppercase; } #siu_header a { text-decoration: none; } #mission { font-size: 2.3em; letter-spacing: .04em; } #main_navigation, #footer_navigation { font-size: 1.5em; text-align: center; text-transform: uppercase; } #columns h2 { font-size: 1.8em; text-transform: uppercase; } #columns ul li { font-size: 1.4em; line-height: 1.8em;} #copyright { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: .8em; letter-spacing: .1em; line-height: 1.6em; } .angelina { font-size: 1.8em; }
  • 132. <!-- // index.html --> <div class="flyer"> <p> <a href="/contract/residence-halls/"> <img src="/images/housing_rocks.png" alt="Housing Rocks" /> </a> </p> </div> /* screen.css */ .flyer { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); }
  • 134. WHAT’S NEW IN CSS3? Daniel Reedy daniel.reedy@housing.siu.edu
  • 136. Q&A – CSS EVALUATION Daniel Reedy daniel.reedy@housing.siu.edu
  • 138. THANK YOU! Daniel Reedy daniel.reedy@housing.siu.edu
  • 140. ERIC MEYER RESET CSS: HTTP://MEYERWEB.COM/ERIC/THOUGHTS/ 2007/05/01/RESET-RELOADED/ SCALABLE INMAN FLASH REPLACEMENT: HTTP:// WWW.MIKEINDUSTRIES.COM/BLOG/SIFR/ EMBEDDED OPEN TYPE (EOT) FONT TOOL: HTTP:// WWW.MICROSOFT.COM/TYPOGRAPHY/WEFT.MSPX OVERVIEW OF @FONT-FACE: HTTPS://DEVELOPER.MOZILLA.ORG/ INDEX.PHP?TITLE=EN/CSS/%40FONT-FACE CÚFON: HTTP://WIKI.GITHUB.COM/SORCCU/CUFON/ABOUT .WEBFONT PROPOSAL HTTP://LISTS.W3.ORG/ARCHIVES/PUBLIC/WWW- FONT/2009JULSEP/0440.HTML TYPE FOUNDRIES SUPPORTING .WEBFONT: HTTP:// WWW.TYPOGRAPHER.ORG/2009/07/WEBFONT-PROPOSAL-GAINS- Daniel Reedy daniel.reedy@housing.siu.edu

Hinweis der Redaktion

  1. Goals of this presentation: 1. Brief overview of CSS 2. The Basics of Getting Started 3. CSS Frameworks 4. Brief look @ Putting it together 5. Q&amp;A &amp;#x2013; CSS Evaluation
  2. This is a basic reset stylesheet. This might not work for your setup, or you may wish to change something you&amp;#x2019;d simply override later. There are pros &amp; cons to using almost any CSS technique, decide yourself what you&amp;#x2019;d like to do!
  3. This is a basic reset stylesheet. This might not work for your setup, or you may wish to change something you&amp;#x2019;d simply override later. There are pros &amp; cons to using almost any CSS technique, decide yourself what you&amp;#x2019;d like to do!
  4. sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&amp;#x2019;s choice (browser) @font-face: CSS3, supported in some browsers (we&amp;#x2019;ll cover it more later) (CSS) c&amp;#xFA;fon: javascript solution (javascript)
  5. sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&amp;#x2019;s choice (browser) @font-face: CSS3, supported in some browsers (we&amp;#x2019;ll cover it more later) (CSS) c&amp;#xFA;fon: javascript solution (javascript)
  6. sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&amp;#x2019;s choice (browser) @font-face: CSS3, supported in some browsers (we&amp;#x2019;ll cover it more later) (CSS) c&amp;#xFA;fon: javascript solution (javascript)
  7. sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&amp;#x2019;s choice (browser) @font-face: CSS3, supported in some browsers (we&amp;#x2019;ll cover it more later) (CSS) c&amp;#xFA;fon: javascript solution (javascript)
  8. sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&amp;#x2019;s choice (browser) @font-face: CSS3, supported in some browsers (we&amp;#x2019;ll cover it more later) (CSS) c&amp;#xFA;fon: javascript solution (javascript)
  9. sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&amp;#x2019;s choice (browser) @font-face: CSS3, supported in some browsers (we&amp;#x2019;ll cover it more later) (CSS) c&amp;#xFA;fon: javascript solution (javascript)
  10. We use this at Housing, which you&amp;#x2019;ll see a little later when I show some examples from the housing website.
  11. We use this at Housing, which you&amp;#x2019;ll see a little later when I show some examples from the housing website.
  12. We use this at Housing, which you&amp;#x2019;ll see a little later when I show some examples from the housing website.
  13. .webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler &amp; Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren&amp;#x2019;t any browser makers though... Typekit: Jeffery Veen, Jason Santa Maria, &amp; other&amp;#x2019;s take on javascript embedding of fonts. Kernest: Similar to typekit with open source fonts Font Deck: Similar to TypeKit, created by Clearleft (Andy Budd, Jeremy Keith, and others work for this UK design firm)
  14. .webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler &amp; Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren&amp;#x2019;t any browser makers though... Typekit: Jeffery Veen, Jason Santa Maria, &amp; other&amp;#x2019;s take on javascript embedding of fonts. Kernest: Similar to typekit with open source fonts Font Deck: Similar to TypeKit, created by Clearleft (Andy Budd, Jeremy Keith, and others work for this UK design firm)
  15. .webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler &amp; Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren&amp;#x2019;t any browser makers though... Typekit: Jeffery Veen, Jason Santa Maria, &amp; other&amp;#x2019;s take on javascript embedding of fonts. Kernest: Similar to typekit with open source fonts Font Deck: Similar to TypeKit, created by Clearleft (Andy Budd, Jeremy Keith, and others work for this UK design firm)
  16. .webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler &amp; Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren&amp;#x2019;t any browser makers though... Typekit: Jeffery Veen, Jason Santa Maria, &amp; other&amp;#x2019;s take on javascript embedding of fonts. Kernest: Similar to typekit with open source fonts Font Deck: Similar to TypeKit, created by Clearleft (Andy Budd, Jeremy Keith, and others work for this UK design firm)
  17. Units of Measure on the web can be absolute or relative. It&amp;#x2019;s highly suggested to use relative measures as it is nearly impossible to control the environment of your visitors. The most common units are * Pixels - relative to the screen resolutions * Em Space - width of the capital letter &amp;#x2018;M&amp;#x2019; of a font * Percentage - relative to the parent size
  18. Units of Measure on the web can be absolute or relative. It&amp;#x2019;s highly suggested to use relative measures as it is nearly impossible to control the environment of your visitors. The most common units are * Pixels - relative to the screen resolutions * Em Space - width of the capital letter &amp;#x2018;M&amp;#x2019; of a font * Percentage - relative to the parent size
  19. Units of Measure on the web can be absolute or relative. It&amp;#x2019;s highly suggested to use relative measures as it is nearly impossible to control the environment of your visitors. The most common units are * Pixels - relative to the screen resolutions * Em Space - width of the capital letter &amp;#x2018;M&amp;#x2019; of a font * Percentage - relative to the parent size
  20. Global sizing is typically based on 16px across most browsers. That is a bit big. Establishing a font size of 62.5% resets our baseline to 1em = 10px. Now we have the ability to do fun things like
  21. Global sizing is typically based on 16px across most browsers. That is a bit big. Establishing a font size of 62.5% resets our baseline to 1em = 10px. Now we have the ability to do fun things like
  22. Then we can create our typographical sizes
  23. And we have the ability to do fun things like set heights &amp; widths based on em
  24. It matters less now, but still a decision you&amp;#x2019;ll need to make. It mattered more when text zooming was the norm.
  25. First we&amp;#x2019;ll look at page zooming (this is the default in most browsers). Notice that we increase the total height &amp; width of all elements, causing the need to horizontally scroll as well as vertically scroll
  26. With text zooming, only the size of the text changes, the other elements do not change in size. Many people with low vision prefer this because they do not need to scroll horizontally. The idea of sizing elements with EM is that if your layout is em based, it will have a pseudo-page zoom effect.
  27. Floating is what allows us to do all sorts of crazy things with CSS and get modern day column layouts.
  28. There are two div elements. We tell box 1 to float on the left, give us some space on the right side, and, following W3C recommendations, we assign a width. Elements above the floated element will not be affected, all items below will wrap, that&amp;#x2019;s why we see box 2 come up
  29. There are two div elements. We tell box 1 to float on the left, give us some space on the right side, and, following W3C recommendations, we assign a width. Elements above the floated element will not be affected, all items below will wrap, that&amp;#x2019;s why we see box 2 come up
  30. Luckily you don&amp;#x2019;t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them. Cons: less flexibility&amp;#x2013;less skill required
  31. Luckily you don&amp;#x2019;t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them. Cons: less flexibility&amp;#x2013;less skill required
  32. Luckily you don&amp;#x2019;t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them. Cons: less flexibility&amp;#x2013;less skill required
  33. Luckily you don&amp;#x2019;t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them. Cons: less flexibility&amp;#x2013;less skill required
  34. Luckily you don&amp;#x2019;t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them. Cons: less flexibility&amp;#x2013;less skill required
  35. University Housing is using the 960 Grid System
  36. University Housing is using the 960 Grid System
  37. University Housing is using the 960 Grid System
  38. University Housing is using the 960 Grid System
  39. University Housing is using the 960 Grid System
  40. University Housing is using the 960 Grid System
  41. University Housing is using the 960 Grid System
  42. Most frameworks consists of three things; Reset Stylesheets, Typography Stylesheets, and Grids (fluid or fixed). We&amp;#x2019;ve talked about reset stylesheets &amp; typography already so let&amp;#x2019;s take a quick look at grids
  43. The University Housing website is using the 960 Grid System 12-column grid layout. The red bars are the primary grid layout. You can have nested grid layouts and you can do some limited adjusting ( removing of leading or trailing gutters, etc&amp;#x2026;)
  44. The University Housing website is using the 960 Grid System 12-column grid layout. The red bars are the primary grid layout. You can have nested grid layouts and you can do some limited adjusting ( removing of leading or trailing gutters, etc&amp;#x2026;)
  45. Combining all of this basic CSS knowledge is the most challenging part. The rest of the presentation I&amp;#x2019;ll be highlighting pieces of the University Housing website&amp;#x2019;s latest design. I&amp;#x2019;ll be touching on an idea called &amp;#x201C;progressive enhancement&amp;#x201D; or &amp;#x201C;progressive enrichment&amp;#x201D;.
  46. You can see we have some interesting fonts at the top, we&amp;#x2019;re using a combo of @font-face &amp; c&amp;#xFA;fon to achieve this. 1. SIU Header 2. Navigation 3. Housing Header / Mission Statement 4. Content a. Left Column b. Middle Column c. Right Column
  47. You can see we have some interesting fonts at the top, we&amp;#x2019;re using a combo of @font-face &amp; c&amp;#xFA;fon to achieve this. 1. SIU Header 2. Navigation 3. Housing Header / Mission Statement 4. Content a. Left Column b. Middle Column c. Right Column
  48. You can see we have some interesting fonts at the top, we&amp;#x2019;re using a combo of @font-face &amp; c&amp;#xFA;fon to achieve this. 1. SIU Header 2. Navigation 3. Housing Header / Mission Statement 4. Content a. Left Column b. Middle Column c. Right Column
  49. You can see we have some interesting fonts at the top, we&amp;#x2019;re using a combo of @font-face &amp; c&amp;#xFA;fon to achieve this. 1. SIU Header 2. Navigation 3. Housing Header / Mission Statement 4. Content a. Left Column b. Middle Column c. Right Column
  50. You can see we have some interesting fonts at the top, we&amp;#x2019;re using a combo of @font-face &amp; c&amp;#xFA;fon to achieve this. 1. SIU Header 2. Navigation 3. Housing Header / Mission Statement 4. Content a. Left Column b. Middle Column c. Right Column
  51. You can see we have some interesting fonts at the top, we&amp;#x2019;re using a combo of @font-face &amp; c&amp;#xFA;fon to achieve this. 1. SIU Header 2. Navigation 3. Housing Header / Mission Statement 4. Content a. Left Column b. Middle Column c. Right Column
  52. You can see we have some interesting fonts at the top, we&amp;#x2019;re using a combo of @font-face &amp; c&amp;#xFA;fon to achieve this. 1. SIU Header 2. Navigation 3. Housing Header / Mission Statement 4. Content a. Left Column b. Middle Column c. Right Column
  53. The Housing website is created with the aim of progressive enrichment.
  54. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  55. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  56. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  57. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  58. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  59. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  60. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  61. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  62. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  63. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement
  64. I prefer to split out my styles into logical stylesheets. I&amp;#x2019;ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks. The top level represents the main styles. You can certainly combine them into one or two big files, if you&amp;#x2019;d like. The arrows point to the files involved in the progressive enhancement