什么是 foundation-essential
foundation-essential 是一个基于 Foundation 框架的 npm 包，它包含了一系列构建网页前端所需的 CSS、JS 和图标等资源。使用 foundation-essential 可以快速地搭建响应式网站。
安装 foundation-essential
在使用 foundation-essential 前，需要先安装 Node.js 和 npm。在命令行中执行以下命令来安装 foundation-essential：
npm install foundation-essential
使用 foundation-essential
引入 CSS 和 JS 文件
在 HTML 页面中，可以通过<link> 和 <script> 标签引入 foundation-essential 提供的 CSS 和 JS 文件，例如：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- --------------- ----- ---------------- ---------------------------------------------------------------- ----- ---------------- ----------------------------------------------------- ------- ------ --------- ---------- ------- ------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------- ------- ----------------------------------------------------------- ------- -------
使用 Sass 和 Gulp 来自定义样式
foundation-essential 还提供了 Sass 样式文件和 Gulp 工作流程，使用户可以自定义样式。先安装 Gulp：
npm install gulp --global npm install gulp --save-dev
然后在项目根目录下创建一个 gulpfile.js 文件，并粘贴以下代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- ---- - ---------------------
----------------- ---------- -
------ -----------------------------------------------------------
-------------
----------------------------------------------------------
---
------------------ ---------- -
----------------------------------------------------------- ----------
---
-------------------- -------- ----------这段代码定义了两个 Gulp 任务：sass 和 watch。执行 gulp 命令就会运行这些任务。
现在可以在 node_modules/foundation-essential/scss 目录下编写 Sass 样式文件，并使用 gulp 命令来自动编译 Sass 文件并刷新浏览器。
使用 foundation-essential 提供的组件
foundation-essential 提供了很多响应式组件，包括导航、按钮、表单、图像等。我们可以直接在 HTML 中使用这些组件，例如：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ---------------
----- ---------------- ----------------------------------------------------------------
----- ---------------- -----------------------------------------------------
-------
------
---- --------------- ----------- ------------------
--- -------------------
--- -------------
------ ----------- ----------------
-----
--- -------------------- ------------- -----------------------------------
-----
-------- ------------------------
---- ----- --- ------- ---
--- --------------
--- ----------------- ----------------------
------ -----------------------
------ -------------------------
-----
----------
------
---- ------------
---- --------------- ---------
----------- -- -- ------------
------- -- - ------ ------- ----- ---- ---------------
-- -------- -------------------- --------
------
------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------