简介
@ashuey/ludicolo-framework 是一个针对现代浏览器的前端 UI 框架，它简单易用、具有灵活可扩展的特点。它可以快速的创建出符合 Web 标准的响应式网站和 Web 应用程序。
安装
您可以使用 npm 进行安装：
npm install @ashuey/ludicolo-framework --save
快速开始
安装成功后，您只需要在您的 HTML 页面中引入它，就可以开始使用。在引入之前，您需要先引入 jQuery。如下所示：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------------- ----- -------------
----- ---------------- ----------------------------------------------------------------------
-------
------
------- --------------------
-- -------- ----------------------------------
---- -------------------------
--- --------------------------
--- --------------------------------- ------------- ---- ----------
--- --------------------------------- ------------- ---- ----------
--- --------------------------------- ------------- ---- ----------
-----
------
---------
---- -----------------------
--- ----------------------------------- ------------------------
-- ---------------------- -- - ------ --------------
------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------
-------
-------现在，您已经可以在您的网站上使用 @ashuey/ludicolo-framework 了！
自定义编译
如果您想要对 @ashuey/ludicolo-framework 进行自定义编译，您需要按照以下步骤进行操作：
安装 Node.js 和 npm。
安装
gulp和gulp-sass：npm install -g gulp gulp-sass
在
node_modules/@ashuey/ludicolo-framework目录下运行：gulp
这将生成
ludicolo.css和ludicolo.min.css。
常用组件
按钮
可以使用 ldcl-button 类创建按钮：
<button class="ldcl-button ldcl-button-primary">Primary Button</button> <button class="ldcl-button ldcl-button-secondary">Secondary Button</button> <button class="ldcl-button ldcl-button-tertiary">Tertiary Button</button>
导航条
可以使用 ldcl-header 类创建通用的导航条：
-- -------------------- ---- -------
------- --------------------
-- -------- ----------------------------------
---- -------------------------
--- --------------------------
--- --------------------------------- ------------- ---- ----------
--- --------------------------------- ------------- ---- ----------
--- --------------------------------- ------------- ---- ----------
-----
------
---------卡片
可以使用 ldcl-card 类创建卡片：
-- -------------------- ---- -------
---- ------------------
---- --------------------------
--- ----------------------------- ----------
------
---- ------------------------
------- ---- ---- ---- ---------
------
---- --------------------------
-- -------- ------------------------- --------
------
------结语
通过本文，您应该已经了解了如何使用 @ashuey/ludicolo-framework 创建现代化的前端 UI。您可以根据自己的需求灵活使用，以达到最佳的效果。
如果您对 @ashuey/ludicolo-framework 感兴趣，可以查看 GitHub 仓库：https://github.com/ashuey/ludicolo-framework。
感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/112274