You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

150 lines
11 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YBlog - Focus &gt; Minimalism</title>
<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="/css/y.css" />
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- IndieAuth -->
<link href="https://twitter.com/yogsototh" rel="me">
<link href="https://github.com/yogsototh" rel="me">
<link href="mailto:yann.esposito@gmail.com" rel="me">
<link rel="pgpkey" href="../../../../pubkey.txt">
</head>
<body lang="en" class="article">
<div id="content">
<div id="header">
<div id="choix">
<span id="choixlang">
<a href="../../../../Scratch/fr/blog/2009-10-Focus-vs-Minimalism/">French</a>
</span>
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
<span class="flush"></span>
</div>
</div>
<div id="titre">
<h1>Focus &gt; Minimalism</h1>
</div>
<div class="flush"></div>
<div id="afterheader" class="article">
<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>
<hr />
<h2 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 class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;menuButton&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></a>
<a class="sourceLine" id="cb1-2" title="2"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;entete&quot;</span><span class="kw">&gt;</span>#content of the menu<span class="kw">&lt;/div&gt;</span></a></code></pre></div>
<p>The CSS:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb2-1" title="1"><span class="pp">#menuButton</span> {</a>
<a class="sourceLine" id="cb2-2" title="2"> <span class="kw">font-size</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-3" title="3"> <span class="kw">height</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-4" title="4"> <span class="kw">line-height</span>: <span class="dv">1.8</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-5" title="5"> <span class="kw">width</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-6" title="6"> <span class="kw">position</span>: <span class="dv">fixed</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-7" title="7"> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-8" title="8"> <span class="kw">top</span>: <span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-9" title="9"> <span class="kw">z-index</span>: <span class="dv">9001</span> }</a>
<a class="sourceLine" id="cb2-10" title="10"></a>
<a class="sourceLine" id="cb2-11" title="11"><span class="pp">#menuButton</span><span class="in">:hover</span> {</a>
<a class="sourceLine" id="cb2-12" title="12"> <span class="kw">cursor</span>: <span class="dv">pointer</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-13" title="13"></a>
<a class="sourceLine" id="cb2-14" title="14"><span class="pp">#entete</span> {</a>
<a class="sourceLine" id="cb2-15" title="15"> <span class="kw">top</span>: <span class="dv">5</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-16" title="16"> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-17" title="17"> <span class="kw">position</span>: <span class="dv">fixed</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-18" title="18"> <span class="kw">width</span>: <span class="dv">10</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-19" title="19"> <span class="kw">z-index</span>: <span class="dv">9000</span><span class="op">;</span> }</a></code></pre></div>
<p>The javascript code (using jQuery)</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a class="sourceLine" id="cb3-1" title="1"><span class="kw">function</span> <span class="at">hideMenu</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb3-2" title="2"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">animate</span>(<span class="op">{</span><span class="dt">left</span><span class="op">:</span><span class="st">&quot;-10em&quot;</span><span class="op">},</span> <span class="dv">500</span> )<span class="op">;</span></a>
<a class="sourceLine" id="cb3-3" title="3"> <span class="at">$</span>(<span class="st">'#menuButton'</span>).<span class="at">html</span>(<span class="st">'&amp;rarr;'</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-4" title="4"><span class="op">}</span></a>
<a class="sourceLine" id="cb3-5" title="5"><span class="kw">function</span> <span class="at">showMenu</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb3-6" title="6"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">animate</span>(<span class="op">{</span><span class="dt">left</span><span class="op">:</span><span class="st">&quot;0em&quot;</span><span class="op">},</span> <span class="dv">500</span> )<span class="op">;</span></a>
<a class="sourceLine" id="cb3-7" title="7"> <span class="at">$</span>(<span class="st">'#menuButton'</span>).<span class="at">html</span>(<span class="st">'&amp;larr;'</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-8" title="8"><span class="op">}</span></a>
<a class="sourceLine" id="cb3-9" title="9"><span class="kw">function</span> <span class="at">toggleMenu</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb3-10" title="10"> <span class="cf">if</span> ( <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">css</span>(<span class="st">'left'</span>)<span class="op">==</span><span class="st">'-10em'</span> ) <span class="op">{</span></a>
<a class="sourceLine" id="cb3-11" title="11"> <span class="at">showMenu</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb3-12" title="12"> <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb3-13" title="13"> <span class="at">hideMenu</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb3-14" title="14"> <span class="op">}</span></a>
<a class="sourceLine" id="cb3-15" title="15"><span class="op">}</span></a></code></pre></div>
<p>And the result is shown in the top left corner of this website.</p>
</div>
<div id="afterarticle">
<div id="social">
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
·
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2009-10-Focus-vs-Minimalism/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
·
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2009-10-Focus-vs-Minimalism/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
<br />
<a class="message" href="../../../../Scratch/en/blog/Social-link-the-right-way/">These social sharing links preserve your privacy</a>
</div>
<div id="navigation">
<a href="../../../../">Home</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/blog">Blog</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/softwares">Softwares</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/about">About</a>
</div>
<div id="totop"><a href="#header">↑ Top ↑</a></div>
<div id="bottom">
<div>
Published on 2009-10-22
</div>
<div>
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
</div>
<div>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
</div>
<div>
Done with
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
<span class="pala">&amp;</span>
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
</div>
<hr />
<div style="max-width: 100%">
<a href="https://cardanohub.org">
<img src="../../../../Scratch/img/ada-logo.png" class="simple" style="height: 16px;
border-radius: 50%;
vertical-align:middle;
display:inline-block;" />
ADA:
</a>
<code style="display:inline-block;
word-wrap:break-word;
text-align: left;
vertical-align: top;
max-width: 85%;">
DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>