-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
103 lines (100 loc) · 10.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The “Design Tips” series now in TailwindCSS</title>
<meta name="description" content="The “🔥 Design Tips” series now in TailwindCSS. Contribute to caneco/design-tips development by creating an account on GitHub.">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="twitter:image:src" content="https://avatars0.githubusercontent.com/u/502041?s=400&v=4">
<meta name="twitter:site" content="@github">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="caneco/design-tips">
<meta name="twitter:description" content="The “🔥 Design Tips” series now in TailwindCSS. Contribute to caneco/design-tips development by creating an account on GitHub.">
<meta property="og:image" content="https://avatars0.githubusercontent.com/u/502041?s=400&v=4">
<meta property="og:site_name" content="GitHub"><meta property="og:type" content="object">
<meta property="og:title" content="caneco/design-tips">
<meta property="og:url" content="https://github.com/caneco/design-tips">
<meta property="og:description" content="The “🔥 Design Tips” series now in TailwindCSS. Contribute to caneco/design-tips development by creating an account on GitHub.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">
</head>
<body class="bg-grey-lighter font-sans subpixel-antialiased w-screen h-screen">
<div class="w-screen h-screen">
<hr class="bg-indigo-dark bg-repeat w-full h-6 m-0" style="background-image:url(https://res.cloudinary.com/caneco/image/upload/v1556202367/caneco.xyz/design-tips/pattern-purple_ben82l.svg)">
<header class="container leading-tight mx-auto mt-6 mb-8 md:my-12 px-4 md:px-0">
<h1 class="text-indigo-darker text-xl md:text-3xl font-medium">The “🔥 <b>Design Tips</b>” series, now in TailwindCSS</h1>
<h2 class="text-indigo-light text-xs md:text-sm font-normal mt-2 md:mt-0">Tailored by <a href="http://twitter.com/caneco" class="text-indigo-dark no-underline hover:text-indigo-darker hover:underline">@caneco</a>, inspired by <a href="http://twitter.com/steveschoger" class="text-indigo-dark no-underline hover:text-indigo-darker hover:underline">@steveschoger</a> && <a href="http://twitter.com/adamwathan" class="text-indigo-dark no-underline hover:text-indigo-darker hover:underline">@adamwathan</a></h2>
</header>
<section class="flex-grow container mx-auto">
<div class="flex flex-wrap items-stretch md:-mx-4">
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4 relative">
<span class="bg-indigo text-white text-xs font-bold rounded-full shadow-lg absolute pin-t pin-r -mt-3 py-1 px-2 -- animated fadeInUp faster delay-1s">NEW</span>
<div class="bg-white border-indigo-light border-b-2 shadow rounded h-full">
<a href="/20180328"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199763/caneco.xyz/design-tips/20180328_d6tjv6.jpg" alt=""></a>
<p class="text-grey-darker text-sm leading-tight p-4">If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.</p>
</div>
</article>
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4 relative">
<span class="bg-indigo text-white text-xs font-bold rounded-full shadow-lg absolute pin-t pin-r -mt-3 py-1 px-2 -- animated fadeInUp faster delay-2s">NEW</span>
<div class="bg-white border-indigo-light border-b-2 shadow rounded h-full">
<a href="/20180116"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199763/caneco.xyz/design-tips/20180116_eonbt5.jpg" alt=""></a>
<p class="text-grey-darker text-sm leading-tight p-4">Dropdowns can be more than just a boring list of links. They're just boxes, you can do anything you want with them!</p>
</div>
</article>
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4 relative">
<span class="bg-indigo text-white text-xs font-bold rounded-full shadow-lg absolute pin-t pin-r -mt-3 py-1 px-2 -- animated fadeInUp faster delay-3s">NEW</span>
<div class="bg-white border-indigo-light border-b-2 shadow rounded h-full">
<a href="/20171116"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199763/caneco.xyz/design-tips/20171116_zxewtk.jpg" alt=""></a>
<p class="text-grey-darker text-sm leading-tight p-4">Using a generic icon like an arrow or a checkmark instead of the standard bullet is a great way to add visual interest to unordered lists.</p>
</div>
</article>
<hr class="border-indigo-lightest border-b-4 w-full mx-4 mb-10">
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4">
<div class="bg-white shadow rounded h-full">
<a href="/20170607"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199763/caneco.xyz/design-tips/20170607_c9q3s4.jpg" alt=""></a>
<p class="text-grey-darker text-sm leading-tight p-4">Using a generic icon like an arrow or a checkmark instead of the standard bullet is a great way to add visual interest to unordered lists.</p>
</div>
</article>
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4">
<div class="bg-white shadow rounded h-full">
<a href="/20170608"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199762/caneco.xyz/design-tips/20170608_nlh6pm.jpg" alt=""></a>
<p class="text-grey-darker text-sm leading-tight p-4">If I am using icons that have more weight than the text, I typically make the icons slightly lighter than the text for inactive states.</p>
</div>
</article>
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4">
<div class="bg-white shadow rounded h-full">
<a href="/20170816"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199760/caneco.xyz/design-tips/20170816_dapawr.jpg" alt=""></a>
<p class="text-grey-darker text-sm leading-tight p-4">Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle.</p>
</div>
</article>
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4">
<div class="bg-white shadow rounded h-full">
<a href="/20170919"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199760/caneco.xyz/design-tips/20170919_zekysn.jpg" alt=""></a>
<article class="text-grey-darker text-sm leading-tight p-4">Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead.</article>
</div>
</article>
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4">
<div class="bg-white shadow rounded h-full">
<a href="/20170907"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199760/caneco.xyz/design-tips/20170907_qjgaft.jpg" alt=""></a>
<article class="text-grey-darker text-sm leading-tight p-4">This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.</article>
</div>
</article>
<article class="w-full sm:w-1/2 md:w-1/3 mb-8 px-4">
<div class="bg-white shadow rounded h-full">
<a href="/20180927"><img class="block rounded-t min-w-full h-auto mx-auto shadow-inner" src="https://res.cloudinary.com/caneco/image/upload/w_600,q_80/v1556199760/caneco.xyz/design-tips/20180927_fairip.jpg" alt=""></a>
<article class="text-grey-darker text-sm leading-tight p-4">Achieving an accessible contrast ratio is very difficult when using white text on a colored background. <br>Using dark colored text on a soft colored background is much easier to make accessible, and usually looks better to boot.</article>
</div>
</article>
</div>
</section>
</div>
<a class="absolute pin-t pin-r focus:outline-none" href="https://github.com/caneco/design-tips" target="_blank" tabindex="-1">
<svg class="block w-16 sm:w-24 h-16 sm:h-24" viewBox="0 0 250 250">
<path class="fill-current text-black" d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path class="fill-current text-white" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"></path>
<path class="fill-current text-white" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path>
</svg>
</a>
</body>
</html>