Skip to content

Commit

Permalink
refactor: homepage polish
Browse files Browse the repository at this point in the history
  • Loading branch information
@gavmck
gavmck committed Oct 14, 2024
1 parent d00f48c commit 45b198b
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 66 deletions.
4 changes: 2 additions & 2 deletions src/404.webc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ description: Page not found
</diamond-grid-item>
<diamond-grid-item small-mobile="12" small-tablet="6">
<d-nav-card icon="document" href="/guide/">
<h3>Documentation</h3>
<p>Guidance on how to get started and use Diamond UI on your next project.</p>
<h3>Guide</h3>
<p>How to get started and use Diamond UI on your next project.</p>
</d-nav-card>
</diamond-grid-item>
</diamond-grid>
Expand Down
4 changes: 2 additions & 2 deletions src/about.webc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ description: The origin story of Diamond UI
</diamond-grid-item>
<diamond-grid-item small-mobile="12" small-tablet="6">
<d-nav-card icon="document" href="/guide/">
<h3>Documentation</h3>
<p>Guidance on how to get started and use Diamond UI on your next project.</p>
<h3>Guide</h3>
<p>How to get started and use Diamond UI on your next project.</p>
</d-nav-card>
</diamond-grid-item>
</diamond-grid>
Expand Down
13 changes: 7 additions & 6 deletions src/components/content/d-home-hero.webc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
}

@media (width >= 1280px) {
grid-template-columns: 1fr 1fr;
grid-template-columns: 1.1fr 0.9fr;
}
}

Expand Down Expand Up @@ -119,18 +119,19 @@
Bring clarity to<br />
your components
</h1>
<p class="diamond-text-size-xl diamond-spacing-bottom-lg">
Diamond UI is a methodology for teams who build software products and design systems.
<p class="diamond-text-size-xxl diamond-spacing-bottom-lg">
Diamond UI is a methodology for teams who build interfaces.
</p>
<d-alert class="alert">
<d-icon icon="info" slot="icon"></d-icon>
<h2>You’ve heard of Atomic Design, right?</h2>
<p>
It’s great, and we’re big fans, but after years of building interfaces, we’ve
found a more intuitive way to define components and organise code.
There's also BEM, SMACSS, OOCSS, Tailwind, we've tried them all! But after years
of building interfaces, we’ve found a more intuitive way to define components and
organise code.
</p>
<p>
Let us tell you about another way to build components.
Let us tell you about another way to build interfaces.
</p>
</d-alert>
</div>
Expand Down
110 changes: 54 additions & 56 deletions src/index.webc
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: default.webc
title: Diamond UI - Bring clarity to your components
description: Diamond UI is a methodology for teams who build software products and design systems.
description: Diamond UI is a methodology for teams who build interfaces.
---

<diamond-wrap size="xxl" class="diamond-spacing-bottom-fluid">
Expand All @@ -18,8 +18,7 @@ description: Diamond UI is a methodology for teams who build software products a
<section>
<diamond-section padding="fluid">
<d-title-group class="diamond-text-align-center diamond-spacing-bottom-xl">
<p>The methodology in a nutshell</p>
<h2>Introducing the four Cs</h2>
<h2>The methodology in a nutshell</h2>
<p>Each component is created with a single concern from one of four areas of responsibility.</p>
</d-title-group>
<d-tabs>
Expand Down Expand Up @@ -165,29 +164,32 @@ description: Diamond UI is a methodology for teams who build software products a
<section>
<diamond-section padding="fluid">
<d-title-group class="diamond-text-align-center diamond-spacing-bottom-xl">
<p>It’s pretty simple, but that’s the whole point!</p>
<h2>It’s easy to understand</h2>
<p>The four Cs clarify boundaries between component responsibilities.</p>
<h2>It’s pretty simple, but that’s the whole point!</h2>
<p>The four Cs set clear boundaries between component responsibilities.</p>
</d-title-group>

<diamond-grid wrap="wrap" align-items="center" gap="lg">
<diamond-grid wrap="wrap" align-items="center" gap="lg" class="diamond-spacing-bottom-lg">
<diamond-grid-item small-mobile="12" tablet="6">
<h3 class="diamond-text-size-lg">Does this look familiar?</h3>
<h3 class="diamond-text-size-xl">
Are your components overcomplicated?
</h3>
<p class="diamond-text-size-lg diamond-spacing-bottom-md">
As a product scales, even the most carefully crafted components can get out of shape.
</p>
<p>
Over the years, components can quickly get out of hand. A library that was once
simple and easy to use can become a tangled mess of props and edge cases.
Components can become:
</p>
<ul>
<li>Too many props.</li>
<li>Needs updating every time a new design is handed over.</li>
<li>Hard to test.</li>
<li>Awkward to maintain.</li>
<li>Conflicting or impossible prop combinations.</li>
<li>Doesn't fit emerging needs.</li>
<li>Difficult to understand.</li>
<li>Bloated with props &ndash; <em>too complicated</em></li>
<li>Updated every time a new design ishanded over &ndash; <em>too specific</em></li>
<li>Hard to test >&ndash; <em>too many variables</em></li>
<li>Awkward to maintain &ndash; <em>too much time</em></li>
<li>Conflicting or impossible prop combinations &ndash; <em>too specific</em></li>
<li>Unsuitable for emerging needs &ndash; <em>low reuse</em></li>
<li>Difficult to understand &ndash; <em>too scared to touch them</em></li>
<li>Not composable.</li>
</ul>
<p>We can help.</p>
<p>Diamond UI helps avoid this.</p>
</diamond-grid-item>
<diamond-grid-item small-mobile="12" tablet="6">
<syntax-highlight
Expand All @@ -210,19 +212,22 @@ description: Diamond UI is a methodology for teams who build software products a
secondary-button-type="button"
secondary-button-style="secondary"
on-secondary-button-click="handleButtonClick()"
/>
></page-hero>
</syntax-highlight>
</diamond-grid-item>
</diamond-grid>

<d-separator class="diamond-spacing-top-lg diamond-spacing-bottom-lg"></d-separator>

<diamond-grid wrap="wrap" align-items="center" gap="lg">
<diamond-grid wrap="wrap" align-items="center" gap="lg" class="diamond-spacing-bottom-lg">
<diamond-grid-item small-mobile="12" tablet="6">
<h3 class="diamond-text-size-lg">
Diamond UI solves future problems, by being extremely flexible.
<h3 class="diamond-text-size-xl">
Diamond UI keeps your components clean.
</h3>
<p>When following Diamond UI principles:</p>
<p class="diamond-text-size-lg diamond-spacing-bottom-md">
By separating responsibilities, we create reusable
components that can solve future problems before knowing they exist.
</p>

<p>When following Diamond UI methodology:</p>
<ul>
<li>Components stay small and easy to understand.</li>
<li>It’s clear when a component is trying to overstep its area of responsibility.</li>
Expand Down Expand Up @@ -251,12 +256,10 @@ description: Diamond UI is a methodology for teams who build software products a
</syntax-highlight>
</diamond-grid-item>
</diamond-grid>

<d-separator class="diamond-spacing-top-lg diamond-spacing-bottom-lg"></d-separator>

<diamond-grid wrap="wrap" align-items="center" gap="lg">
<diamond-grid wrap="wrap" align-items="center" gap="lg" class="diamond-spacing-bottom-lg">
<diamond-grid-item small-mobile="12" tablet="6">
<h3 class="diamond-text-size-lg">It pays you back</h3>
<h3 class="diamond-text-size-xl diamond-spacing-bottom-md">It pays you back</h3>
<p>When maintaining components that were built with Diamond UI:</p>
<ul>
<li>There are fewer output variations, so components are easier to test.</li>
Expand Down Expand Up @@ -290,42 +293,36 @@ description: Diamond UI is a methodology for teams who build software products a
+ </dx-grid>
</dx-hero>
</syntax-highlight>
</diamond-grid-item>
</diamond-grid>

</diamond-section>
</section>

<d-separator></d-separator>

<section>
<diamond-section padding="fluid">
<d-title-group class="diamond-text-align-center diamond-spacing-bottom-xl">
<diamond-wrap size="md" gutter="none">
<p>Software products are never finished</p>
<h2>It’s about clarity, not perfection</h2>
</diamond-grid-item>
</diamond-grid>

<diamond-grid wrap="wrap" align-items="center" gap="lg" class="diamond-spacing-bottom-lg">
<diamond-grid-item small-mobile="12" tablet="6">
<h3 class="diamond-text-size-xl">
It's about clarity, not perfection.
</h3>
<p class="diamond-text-size-lg diamond-spacing-bottom-md">
Software products are never finished. Features can always be improved.
</p>

<p>
Features can always be improved. Diamond UI can help you be more confident when
developing your product.
Diamond UI makes it easy to see where your interface changes will take effect.
Giving you more confidence when developing your product.
</p>
</diamond-wrap>
</d-title-group>
<diamond-grid wrap="wrap">
<diamond-grid-item small-mobile="12" small-tablet="6">
<d-alert class="fill">
</diamond-grid-item>
<diamond-grid-item small-mobile="12" tablet="6">
<d-alert class="fill diamond-spacing-bottom-md">
<d-icon icon="tick" class="text-color-green" slot="icon"></d-icon>
<h3 class="text-color-green">What it is</h2>
<h3 class="text-color-green">Diamond UI is</h2>
<ul>
<li>A helping hand to guide teams when creating interfaces</li>
<li>A rather simple, yet potentially transformative way of building interfaces</li>
<li>The outcome of decades of building complicated interfaces</li>
</ul>
</d-alert>
</diamond-grid-item>
<diamond-grid-item small-mobile="12" small-tablet="6">
<d-alert class="fill">
<d-icon icon="cross" class="text-color-red" slot="icon"></d-icon>
<h3 class="text-color-red">What it is not</h2>
<h3 class="text-color-red">Diamond UI is not</h2>
<ul>
<li>Another UI pattern library</li>
<li>A silver bullet&hellip;defining and naming things is always tricky</li>
Expand All @@ -334,6 +331,7 @@ description: Diamond UI is a methodology for teams who build software products a
</d-alert>
</diamond-grid-item>
</diamond-grid>

</diamond-section>
</section>

Expand All @@ -350,8 +348,8 @@ description: Diamond UI is a methodology for teams who build software products a
<diamond-grid wrap="wrap" gap="lg">
<diamond-grid-item small-mobile="12" small-tablet="6">
<d-nav-card icon="document" href="/guide/">
<h3>Documentation</h3>
<p>Guidance on how to get started and use Diamond UI on your next project.</p>
<h3>Guide</h3>
<p>How to get started and use Diamond UI on your next project.</p>
</d-nav-card>
</diamond-grid-item>
<diamond-grid-item small-mobile="12" small-tablet="6">
Expand Down

0 comments on commit 45b198b

Please sign in to comment.