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-
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
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
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&A &#x2013; CSS Evaluation
This is a basic reset stylesheet. This might not work for your setup, or you may wish to change something you&#x2019;d simply override later. There are pros & cons to using almost any CSS technique, decide yourself what you&#x2019;d like to do!
This is a basic reset stylesheet. This might not work for your setup, or you may wish to change something you&#x2019;d simply override later. There are pros & cons to using almost any CSS technique, decide yourself what you&#x2019;d like to do!
sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&#x2019;s choice (browser)
@font-face: CSS3, supported in some browsers (we&#x2019;ll cover it more later) (CSS)
c&#xFA;fon: javascript solution (javascript)
sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&#x2019;s choice (browser)
@font-face: CSS3, supported in some browsers (we&#x2019;ll cover it more later) (CSS)
c&#xFA;fon: javascript solution (javascript)
sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&#x2019;s choice (browser)
@font-face: CSS3, supported in some browsers (we&#x2019;ll cover it more later) (CSS)
c&#xFA;fon: javascript solution (javascript)
sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&#x2019;s choice (browser)
@font-face: CSS3, supported in some browsers (we&#x2019;ll cover it more later) (CSS)
c&#xFA;fon: javascript solution (javascript)
sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&#x2019;s choice (browser)
@font-face: CSS3, supported in some browsers (we&#x2019;ll cover it more later) (CSS)
c&#xFA;fon: javascript solution (javascript)
sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft&#x2019;s choice (browser)
@font-face: CSS3, supported in some browsers (we&#x2019;ll cover it more later) (CSS)
c&#xFA;fon: javascript solution (javascript)
We use this at Housing, which you&#x2019;ll see a little later when I show some examples from the housing website.
We use this at Housing, which you&#x2019;ll see a little later when I show some examples from the housing website.
We use this at Housing, which you&#x2019;ll see a little later when I show some examples from the housing website.
.webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler & Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren&#x2019;t any browser makers though...
Typekit: Jeffery Veen, Jason Santa Maria, & other&#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)
.webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler & Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren&#x2019;t any browser makers though...
Typekit: Jeffery Veen, Jason Santa Maria, & other&#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)
.webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler & Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren&#x2019;t any browser makers though...
Typekit: Jeffery Veen, Jason Santa Maria, & other&#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)
.webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler & Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren&#x2019;t any browser makers though...
Typekit: Jeffery Veen, Jason Santa Maria, & other&#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)
Units of Measure on the web can be absolute or relative.
It&#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 &#x2018;M&#x2019; of a font
* Percentage - relative to the parent size
Units of Measure on the web can be absolute or relative.
It&#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 &#x2018;M&#x2019; of a font
* Percentage - relative to the parent size
Units of Measure on the web can be absolute or relative.
It&#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 &#x2018;M&#x2019; of a font
* Percentage - relative to the parent size
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
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
Then we can create our typographical sizes
And we have the ability to do fun things like set heights & widths based on em
It matters less now, but still a decision you&#x2019;ll need to make. It mattered more when text zooming was the norm.
First we&#x2019;ll look at page zooming (this is the default in most browsers).
Notice that we increase the total height & width of all elements, causing the need to horizontally scroll as well as vertically scroll
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.
Floating is what allows us to do all sorts of crazy things with CSS and get modern day column layouts.
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&#x2019;s why we see box 2 come up
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&#x2019;s why we see box 2 come up
Luckily you don&#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&#x2013;less skill required
Luckily you don&#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&#x2013;less skill required
Luckily you don&#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&#x2013;less skill required
Luckily you don&#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&#x2013;less skill required
Luckily you don&#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&#x2013;less skill required
University Housing is using the 960 Grid System
University Housing is using the 960 Grid System
University Housing is using the 960 Grid System
University Housing is using the 960 Grid System
University Housing is using the 960 Grid System
University Housing is using the 960 Grid System
University Housing is using the 960 Grid System
Most frameworks consists of three things; Reset Stylesheets, Typography Stylesheets, and Grids (fluid or fixed). We&#x2019;ve talked about reset stylesheets & typography already so let&#x2019;s take a quick look at grids
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&#x2026;)
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&#x2026;)
Combining all of this basic CSS knowledge is the most challenging part. The rest of the presentation I&#x2019;ll be highlighting pieces of the University Housing website&#x2019;s latest design. I&#x2019;ll be touching on an idea called &#x201C;progressive enhancement&#x201D; or &#x201C;progressive enrichment&#x201D;.
You can see we have some interesting fonts at the top, we&#x2019;re using a combo of @font-face & c&#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
You can see we have some interesting fonts at the top, we&#x2019;re using a combo of @font-face & c&#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
You can see we have some interesting fonts at the top, we&#x2019;re using a combo of @font-face & c&#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
You can see we have some interesting fonts at the top, we&#x2019;re using a combo of @font-face & c&#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
You can see we have some interesting fonts at the top, we&#x2019;re using a combo of @font-face & c&#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
You can see we have some interesting fonts at the top, we&#x2019;re using a combo of @font-face & c&#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
You can see we have some interesting fonts at the top, we&#x2019;re using a combo of @font-face & c&#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
The Housing website is created with the aim of progressive enrichment.
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement
I prefer to split out my styles into logical stylesheets. I&#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&#x2019;d like.
The arrows point to the files involved in the progressive enhancement