2010-08-23 12:26:48 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "jQuery, design, web" >
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomen" / >
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "<em>Focus</em> > Minimalisme" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Focus > Minimalism" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2009-10-Focus-vs-Minimalism/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
< title > Focus > Minimalism< / title >
< / head >
< body lang = "en" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "loading..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
2010-09-27 18:49:15 +00:00
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/" onclick = "setLanguage('fr')" > en Français< / a >
< / div >
< / div >
< img src = "/Scratch/img/presentation.png" alt = "Presentation drawing" / >
2010-08-23 12:26:48 +00:00
< div id = "titre" >
< h1 >
Focus > Minimalism
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< p > I believe the goal researched by minimalism is < strong > Focus< / strong > . But I don’ t believe minimalism should be the goal. Focus should be the goal, and I believe minimalism isn’ t necessary to reach it.< / p >
< p > This is why my design is not minimalist, but I decided to remove most of the navigation stuff of all pages of my website. May be I’ ll prefer to hide the menu only when you are on blog article. For now, I hide the menu everywhere on the website.< / p >
< / div >
< div class = "corps" >
< h2 class = "first" id = "technical-details" > technical details< / h2 >
< p > For those who want the technical details behind the show/hide menu, here is the simple jQuery code.< / p >
< p > The HTML: < / p >
< div >
< pre class = "twilight" >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > < span class = "MetaTagAll" > =< / span > < span class = "String" > < span class = "String" > " < / span > < span class = "String" > menuButton< / span > < span class = "String" > " < / span > < / span > < / span > < span class = "MetaTagAll" > > < span class = "MetaTagAll" > < < / span > /< / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > < span class = "MetaTagAll" > =< / span > < span class = "String" > < span class = "String" > " < / span > < span class = "String" > entete< / span > < span class = "String" > " < / span > < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > #content of the menu< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > > < / span > < / span >
< / pre >
< / div >
< p > The CSS: < / p >
< div > < pre class = "twilight" >
< span class = "CssId" > < span class = "CssId" > #< / span > menuButton< / span > {
< span class = "CssPropertyName" > font-size< / span > : < span class = "CssAdditionalConstants" > 2< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > height< / span > : < span class = "CssAdditionalConstants" > 2< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > line-height< / span > : < span class = "CssAdditionalConstants" > 1.8< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > width< / span > : < span class = "CssAdditionalConstants" > 2< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > position< / span > : < span class = "CssPropertyValue" > fixed< / span > ;
< span class = "CssPropertyName" > left< / span > : < span class = "CssAdditionalConstants" > 0< / span > ;
< span class = "CssPropertyName" > top< / span > : < span class = "CssAdditionalConstants" > 0< / span > ;
< span class = "CssPropertyName" > z-index< / span > : < span class = "CssAdditionalConstants" > 9001< / span > }
< span class = "CssId" > < span class = "CssId" > #< / span > menuButton< / span > < span class = "MetaTagInline" > < span class = "MetaTagInline" > :< / span > hover< / span > {
< span class = "CssPropertyName" > cursor< / span > : < span class = "CssPropertyValue" > pointer< / span > ; }
< span class = "CssId" > < span class = "CssId" > #< / span > entete< / span > {
< span class = "CssPropertyName" > top< / span > : < span class = "CssAdditionalConstants" > 5< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > left< / span > : < span class = "CssAdditionalConstants" > 0< / span > ;
< span class = "CssPropertyName" > position< / span > : < span class = "CssPropertyValue" > fixed< / span > ;
< span class = "CssPropertyName" > width< / span > : < span class = "CssAdditionalConstants" > 10< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > z-index< / span > : < span class = "CssAdditionalConstants" > 9000< / span > ; }
< / pre >
< / div >
< p > The javascript code (using jQuery)< / p >
< div >
< pre class = "twilight" >
< span class = "Storage" > function< / span > < span class = "Entity" > hideMenu< / span > () {
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).animate({left:< span class = "String" > < span class = "String" > " < / span > -10em< span class = "String" > " < / span > < / span > }, < span class = "Constant" > 500< / span > );
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #menuButton< span class = "String" > '< / span > < / span > ).html(< span class = "String" > < span class = "String" > '< / span > & rarr;< span class = "String" > '< / span > < / span > );
}
< span class = "Storage" > function< / span > < span class = "Entity" > showMenu< / span > () {
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).animate({left:< span class = "String" > < span class = "String" > " < / span > 0em< span class = "String" > " < / span > < / span > }, < span class = "Constant" > 500< / span > );
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #menuButton< span class = "String" > '< / span > < / span > ).html(< span class = "String" > < span class = "String" > '< / span > & larr;< span class = "String" > '< / span > < / span > );
}
< span class = "Storage" > function< / span > < span class = "Entity" > toggleMenu< / span > () {
< span class = "Keyword" > if< / span > ( < span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).css(< span class = "String" > < span class = "String" > '< / span > left< span class = "String" > '< / span > < / span > )< span class = "Keyword" > ==< / span > < span class = "String" > < span class = "String" > '< / span > -10em< span class = "String" > '< / span > < / span > ) {
showMenu();
} < span class = "Keyword" > else< / span > {
hideMenu();
}
}
< / pre >
< / div >
< p > And the result is shown in the top left corner of this website.< / p >
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomen" >
Subscribe
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Comments< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > comments< / h2 >
< noscript >
Vous devez activer javascript pour commenter.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
var idcomments_post_id = '/Scratch/en/blog/2009-10-Focus-vs-Minimalism/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/en/blog/2009-10-Focus-vs-Minimalism/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
< ul > < li > < a href = "/Scratch/en/" > Homepage< / a > < / li >
< li > < a href = "/Scratch/en/blog/" > Blog< / a > < / li >
2010-09-30 13:01:14 +00:00
< li > < a href = "/Scratch/en/softwares/" > Softwares< / a > < / li >
2010-09-28 01:00:51 +00:00
< li > < a href = "/Scratch/en/about/" > About< / a > < / li > < / ul >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
previous entries
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-10-untaught-git-usage/" > < span class = "nicer" > «< / span > Untaught Git usage< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-10-How-to-preload-your-site-with-style/" > < span class = "nicer" > «< / span > How to preload your site with style< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-09-Disqus-versus-Intense-Debate--Why-I-switched-/" > < span class = "nicer" > «< / span > Disqus versus Intense Debate (Why I switched)< / a >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div id = "next_articles" >
next entries
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-10-launch-daemon-from-command-line/" > launch daemon from command line < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" > Menu waiting to hide himself < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-10-28-custom-website-synchronisation-with-mobileme--2-/" > custom website synchronisation with mobileme (2) < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/" > Copyright ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
2010-08-31 13:06:43 +00:00
Created: 10/22/2009
2010-09-02 09:51:46 +00:00
Modified: 06/17/2010
2010-08-23 12:26:48 +00:00
< / div >
< div >
Entirely done with
< a href = "http://www.vim.org" > Vim< / a >
and
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
< a href = "/Scratch/en/validation/" > Validation< / a >
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/en/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >