Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
@colmtuite
colmtuite committed Apr 18, 2018
2 parents fab89ed + cd691cd commit 1089df4
Show file tree
Hide file tree
Showing 82 changed files with 2,085 additions and 1,824 deletions.
2 changes: 1 addition & 1 deletion dist/modulz.min.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/_partials/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<footer class="Section large bc-white">
<div class="Container">
<div class="display-flex jc-spaceBetween">
<small class="fs-3 color-gray400">© Modulz 2017</small>
<small class="fs-3 color-gray400">Hosted on <a class="LightLink fs-3" href="https://www.netlify.com" target="_blank">Netlify</a>. Made by <a class="LightLink fs-3" href="https://twitter.com/colmtuite" target="_blank">Colm Tuite</a>.</small>
<small class="fs-3 color-gray500">© Modulz 2017</small>
<small class="fs-3 color-gray500">Hosted on <a class="Link gray" href="https://www.netlify.com" target="_blank">Netlify</a>. Made by <a class="Link gray" href="https://twitter.com/colmtuite" target="_blank">Colm Tuite</a>.</small>
</div>
</div>
</footer>
334 changes: 177 additions & 157 deletions docs/_partials/navigation.html
View file

Large diffs are not rendered by default.

115 changes: 115 additions & 0 deletions docs/pages/showcase/colortest.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html class="" lang="en" style="font-size: 62.5%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6135554/7605572/css/fonts.css">
<title>Modulz – An open-source design system</title>
</head>
<body class="ff-whitney color-gray900">
<section>
<div class="display-flex">
<div class="bc-white fg-1 pt-9 pb-9 pl-7 pr-7">
<p class="Text size3 color-gray600 lh-3">
This should pass AA contrast ratio.
</p>
</div>
<div class="bc-gray100 fg-1 pt-9 pb-9 pl-7 pr-7">
<p class="Text size3 color-gray600 lh-3">
This should pass AA contrast ratio.
</p>
</div>
<div class="bc-gray200 fg-1 pt-9 pb-9 pl-7 pr-7">
<p class="Text size3 color-gray600 lh-3">
This should pass AA contrast ratio.
</p>
</div>
<div class="bc-gray300 fg-1 pt-9 pb-9 pl-7 pr-7">
<p class="Text size3 color-gray600 lh-3">
This should pass AA contrast ratio.
</p>
</div>
</div>
</section>
<section>
<div class="display-flex">
<div class="bc-white fg-1 pt-9 pb-9 display-flex ai-center">
<div class="Divider bc-gray200 expanded"></div>
</div>
<div class="bc-gray100 fg-1 pt-9 pb-9 display-flex ai-center">
<div class="Divider expanded"></div>
</div>
<div class="bc-gray200 fg-1 pt-9 pb-9 display-flex ai-center">
<div class="Divider expanded"></div>
</div>
<div class="bc-gray300 fg-1 pt-9 pb-9 display-flex ai-center">
<div class="Divider bc-gray400 expanded"></div>
</div>
</div>
</section>
<section class="Section size3">
<div class="Container size4">
<div class="display-flex">
<input class="Input left" type="text" placeholder="e.g. New cars in Drogheda">
<button class="Button right" type="button">Button</button>
</div>
</div>
</section>
<section>
<div class="display-flex">
<div class="bc-black fg-1 pt-9 pb-9 pl-7 pr-7">
<p class="Text size3 color-gray600 lh-3">
This should pass AA contrast ratio.
</p>
</div>
<div class="bc-gray900 fg-1 pt-9 pb-9 pl-7 pr-7">
<p class="Text size3 color-gray600 lh-3">
This should pass AA contrast ratio.
</p>
</div>
<div class="bc-gray800 fg-1 pt-9 pb-9 pl-7 pr-7">
<p class="Text size3 color-gray600 lh-3">
This should pass AA contrast ratio.
</p>
</div>
<div class="bc-gray700 fg-1 pt-9 pb-9 pl-7 pr-7">
<p class="Text size3 color-gray600 lh-3">
This should pass AA contrast ratio.
</p>
</div>
</div>
</section>
<section class="Section size3 bc-gray900">
<div class="Container size4">
<div class="display-flex">
<input class="Input left" type="text" placeholder="e.g. New cars in Drogheda">
<button class="Button right" type="button">Button</button>
</div>
</div>
</section>
<section>
<div class="display-flex fw-wrap">
<div class="bc-red pt-7 pb-7 width-10"></div>
<div class="bc-pink pt-7 pb-7 width-10"></div>
<div class="bc-purple pt-7 pb-7 width-10"></div>
<div class="bc-violet pt-7 pb-7 width-10"></div>
<div class="bc-indigo pt-7 pb-7 width-10"></div>
<div class="bc-blue pt-7 pb-7 width-10"></div>
<div class="bc-teal pt-7 pb-7 width-10"></div>
<div class="bc-green pt-7 pb-7 width-10"></div>
<div class="bc-lime pt-7 pb-7 width-10"></div>
<div class="bc-yellow pt-7 pb-7 width-10"></div>
<div class="bc-amber pt-7 pb-7 width-10"></div>
<div class="bc-orange pt-7 pb-7 width-10"></div>
</div>
</section>
<section class="Section size3">
<div class="Container size4">
<p class="Text size4 lh-5 mb-3">Inputs and buttons use gray400.</p>
<p class="Text size4 lh-5 mb-3">gray400 must hover to gray500 subtly.</p>
<p class="Text size4 lh-5 mb-3">Dividers work 200 on white, 300 on 100 and 200, 400 on 300.</p>
</div>
</section>
</body>
</html>
8 changes: 4 additions & 4 deletions docs/pages/showcase/email.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,22 @@ <h2 class="Heading size4">Email</h2>
<div>
<nav class="display-flex ai-center ml-fc">
<div class="ml-2">
<button class="IconButton" type="button">
<button class="InvisibleButton" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3" y2="6"/><line x1="3" y1="12" x2="3" y2="12"/><line x1="3" y1="18" x2="3" y2="18"/></svg>
</button>
</div>
<div class="ml-2">
<button class="IconButton yellow" type="button">
<button class="InvisibleButton yellow" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</button>
</div>
<div class="ml-2">
<button class="IconButton green" type="button">
<button class="InvisibleButton green" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"/></svg>
</button>
</div>
<div class="ml-2">
<button class="IconButton red" type="button">
<button class="InvisibleButton red" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
</button>
</div>
Expand Down
Loading

0 comments on commit 1089df4

Please sign in to comment.