Question

我需要使用原子设计创建一个网页。我没有在互联网上获得适当的教程来开始。

请分享一些演示项目，以便我能理解如何使用原子设计实现。

Answer 1

首先，我推荐＆＃34; Atomic Design＆＃34; Brad Frost的电子书，你可以在这里阅读：http://atomicdesign.bradfrost.com/table-of-contents/

一般而言 - 原子设计比分步教程更具有创意。它只是设计组件的一种方式，从原子（如标签或悸动者）到更复杂的分子（如搜索框）和整个有机体（如接触形式）。

请阅读上面的书。它应该回答你的大部分问题。如果没有，请询问更具体的问题。

Answer 2

简介

与传统的网页开发相比，您不必逐页设计网站，而是将网页/模型分解为不同的组件。

当您需要它们用于不同页面时，您可以逐个添加这些模块以构建有用的组件。

快速入门

在atom文件夹中定义颜色和字体
将您的链接集合定义为分子文件夹
将页眉/页脚定义为Organism文件夹
按原子导入CSS - ＆gt;分子 - ＆gt;有机体秩序

/* Atom / links */
a {  
  color: #1EAEDB;
  text-decoration: none; 
}
a:hover { 
  color: #0FA0CE; 
  text-decoration: underline;
}

/* Molecules / header-links */
.header-links { 
  list-style-type: none; 
  padding: 0;
  margin: 0;
}
.header-link { display: inline-block; }

/* Organism / header */
header {
   width: 100%;
   background-color: #222;
   padding: 12px 20px;
}

<header class="header">
   <ul class="header-links">
    <li class="header-link">
      <a href="#">Home</a>
    </li>
    <li class="header-link">
      <a href="#">About</a>
    </li>
   </ul>
</header>

现在您的网站上有一个使用header模式的atomic design！您也可以尝试使用此方法分解其他组件。

<小时/>

使用原子设计的网页设计

2 个答案:

简介

快速入门

来源：