LuLu UI for PC web

Overview

追本溯源,穿越沉浮

LuLu UI

LuLu UI 是阅文集团荣誉出品的前端 UI 组件库。

形象气质如下图,更柔软,更亲近,同时简单灵活,对用户侧非常友好,非常适合面向外部用户的 PC 网站,或者需要轻量与敏捷的项目。

文档

关于适合使用 LuLu UI 的场景,可以访问下面的视频介绍:

教程

上手简单

LuLu 整个项目就是提供一些 UI 组件的 JS 和 CSS,很纯粹的 JS 和 CSS,贴近原生,简单直白。

LuLu UI 支持直接引入 CSS 和 JS 文件地址,所有主题通用,例如下面的代码引用了全部的 UI 组件库:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/all.js"></script>

您也可以直接单独引入某一个组件,例如:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Dialog.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Dialog.js"></script>

Edge 主题还支持浏览器原生的 import 引入,例如:

<script type="module">
import Dialog from 'https://qidian.gtimg.com/lulu/edge/js/common/ui/Dialog.js';
</script>

LuLu UI 基于原生 HTML 特性构建,因此使用的时候 HTML 还是原来的 HTML,CSS 还是原来的 CSS,无需掌握流行概念,参照文档,复制复制,粘贴粘贴,效果就出来了。

由于 LuLu UI 中的代码基础,结构简单,没有炫技成分,也没有复杂技巧,因此非常适合新人的学习。

使用场景广泛

LuLu UI 既保留了传统插件即插即用的特性,也支持适合多人合作的模块化加载方式,因此适用场景更加广泛。

  • 单人完成的某个简单运营活动页,需要个弹框提示功能,可以直接引入 LuLu UI 中的 Dialog.js,就可以使用了。
  • 某网站看中了 LuLu UI 某一个组件,例如日期选择功能,想拿过来使用,<script> 引入日期选择JS,然后就可以使用了。
  • 对于多人合作大型项目,可以基于 AMD/CMD 规范,或者 ES6 原生的 import/export 进行模块化加载与开发。
  • 对于 Vue 或者 React 项目,想要使用某个组件,但又不希望引入一大堆东西,则 LuLu UI 非常合适,支持 Vue/React 单独引入(见下方使用示意)。

在Vue/React中使用

安装:

npm install lu2

在 Vue-CLI 环境中:

<script>
import Dialog from 'lu2/theme/pure/js/common/ui/Dialog'
</script>
<style src="lu2/theme/pure/css/common/ui/Button.css"></style>
<style src="lu2/theme/pure/css/common/ui/Dialog.css"></style>

React 框架中:

import "lu2/theme/edge/css/common/ui/Button.css";
import "lu2/theme/edge/css/common/ui/Dialog.css";
import Dialog from "lu2/theme/edge/js/common/ui/Dialog.js";

Svelte 框架中:

import Dialog from 'lu2/theme/pure/js/common/ui/Dialog.js';
// 或者全局引入
// import 'lu2/theme/pure/js/common/all.js';
import 'lu2/theme/pure/css/common/ui.css';

成熟

LuLu UI 诞生于 2015 年,非 KPI 项目,服务于真实业务场景,会一直不断迭代,不要担心遇到问题会无人问津。

开源是件严肃的事情,LuLu UI 一直认为,如果组件还没有达到不动如山的境地,那就应该继续埋头打磨。这么多年过去了,LuLu UI 经过阅文集团对内对外近20个大中小型项目的实践与打磨,无论是交互细节还是代码本身细节,LuLu UI 现在都已经可以做到不显山露水了。

体验

LuLu UI 支持高清屏幕,支持辅助阅读设备无障碍访问,以及不少 UI 框架忽略的键盘无障碍访问。

借助扎实的前端基础知识,LuLu UI 有着很多创新的细节打磨,举个例子:如果用户是通过鼠标点击按钮打开的弹框,则弹框界面平平无奇;如果用户是通过 ENTER 回车键点击按钮打开的弹框,则弹框中的按钮默认会outline高亮!

这样的细节处理对于 C 端产品颇有价值。

快速了解项目目录结构

所有资源都在 /theme/ 目录下,目前支持4个主题:

  • Modern 主题
    基于 jQuery,兼容 IE7+,针对 PC 网站。分 sass, css 和 js 3个目录,如果你不想要 sass,那这个文件夹就不用管。图片资源在 css 目录下。
  • Peak 主题
    基于 jQuery,兼容 IE8+,针对PC网站。分 sass, css 和 js 3个目录,如果你不想要 sass,那这个文件夹就不用管。图片资源在 css 目录下。
  • Pure 主题
    原生 JavaScript 编写,兼容 IE9+,PC,Mobile 网站通用。分 css 和 js 2个目录,没有图片资源目录,所有图像 CSS 内联。
  • Edge 主题
    原生 JavaScript 编写,ES6 module,兼容现代浏览器,PC,Mobile 网站通用,Vue、Preact、React全兼容,是面向未来的现代 Web 组件库。

组件分 ui 和 comp 两个目录,前者是 UI 组件,后者是基于 UI 组件整合的前端解决方案。

更具体信息可以参见:

文档在 gh-pages 分支。

另外,本 git 只展示了输出版本,原始 git 项目在公司内部,测试和开发目录并未对外,并不是说本项目没有测试用例。

项目成员

排名不分先后:nanaSun,ziven27,lennonover,wiia, popeyesailorman, 5ibinbin, littleLionGuoQing, peter006qi, HSDPA-wen, ShineaSYR, xiaoxiao78

其他说明

因为 IE7 大势已去,目前 modern 主题已停止维护。

组件均有测试,不过在内部项目中,没有对外。

LuLu UI 的设计理念、使用方式完全不同于常规 UI 组件库。

LuLu UI 没有版本概念,发包均以发包日期作为版号。


MIT License

Comments
  • 直接引用all.js会发生报错Uncaught TypeError: Cannot read properties of null (reading 'get')

    直接引用all.js会发生报错Uncaught TypeError: Cannot read properties of null (reading 'get')

    https://github.com/yued-fe/lulu/blob/efa211e61bdc551a124760ee8136c81212c5a61e/theme/edge/js/common/all.js#L1442

    截屏2022-02-11 18 05 38

    Chrome Version 99.0.4826.0 (正式版本) canary (x86_64)

    opened by evilucifero 8
  • 请兼顾下es5\es6等模块化

    请兼顾下es5\es6等模块化

    原生js,组件等

    (function (global, factory) {
        if (typeof define === 'function' && (define.amd || define.cmd)) {
            define(factory);
        } else {
            global.Color = factory();
        }
    }(……
    

    建议兼顾下更高版本模块化,改成如下(借鉴rollup打包工具生成的代码):

    (function (global, factory) {
        if ("object" == typeof exports && "undefined" != typeof module) {
            module.exports = factory() 
        } else if (typeof define === 'function' && (define.amd || define.cmd)) {
            define(factory);
        } else {
            global.Dialog = factory();
        }
    }
    
    opened by wujianqi 4
  • Dialog.js使用jQuery3.3.1的时候报错Uncaught TypeError: r.size is not a function

    Dialog.js使用jQuery3.3.1的时候报错Uncaught TypeError: r.size is not a function

    使用浏览器chrome 67.0.3396.87 jQuery 版本: 3.3.1

    Uncaught TypeError: r.size is not a function
        at new i (Dialog.js:1)
        at Function.$.dialog (Dialog.js:1)
        at HTMLAnchorElement.<anonymous> ((index):31)
        at HTMLAnchorElement.dispatch (jquery.min.js:2)
        at HTMLAnchorElement.y.handle (jquery.min.js:2)
    
    opened by michealzh 3
  • 一个input上比较尴尬的问题

    一个input上比较尴尬的问题

    这个问题好像还不好调试,只是大概分析是input上的blur 事件或者click事件,出现问题的场景:

    开发谷歌crx插件,向页面注入lulu.js ,在部分站点的登录处,页面上如果存在和lulu.js相冲突的事件,就会造成无法聚焦,点一下会自动失去焦点,大概是这样子的效果

    image

    主要是crx注入的js 还不知道怎么调试追踪,查不到到底是哪里冲突了,所以没办法了,只能来这里求助

    会触发这个效果的页面,还有很多 https://www.24s.net/1268.html https://passport.csdn.net/login?code=public

    未完成的插件 https://www.9rax.com/crx.zip

    image 解压加载才能复现

    opened by 9raxdev 2
  • ui.css文件里这两处css设定,在引用多个框架的时候容易影响其他框架

    ui.css文件里这两处css设定,在引用多个框架的时候容易影响其他框架

    
    input[type=radio] {
      position: absolute;
      opacity: 0;
      width: 20px;
      height: 20px;
      filter: alpha(opacity=0);
      cursor: pointer;
      z-index: -1; }
    
    input[type=checkbox] {
      position: absolute;
      opacity: 0; 
      width: 20px;
      height: 20px;
      filter: alpha(opacity=0);
      cursor: pointer;
      z-index: -1;
      }
    
    

    建议增加类名限制

    opened by dongnanyanhai 2
Owner
阅文前端
Yuewen Front End Team
阅文前端
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Chat app using Azure Web PubSub, Static Web Apps and other Azure services

Chatr - Azure Web PubSub Sample App This is a demonstration & sample application designed to be a simple multi-user web based chat system. It provides

Ben Coleman 55 Dec 31, 2022
A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

Yuthan K 8 Dec 7, 2022
This is a full-stack exercise tracker web application built using the MERN (MongoDB, ExpressJS, ReactJS, NodeJS) stack. You can easily track your exercises with this Full-Stack Web Application.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

WMouton 2 Dec 25, 2021
La extensión web que muestra el precio de los juegos de la web de Xbox, PlayStation, Nintendo y Epic Games Store con los impuestos de Argentina incluidos. Conocé cuanto vas a pagar por tus juegos 💚💙❤️

Conocido anteriormente como Xboxito Impuestito - Conocé el precio real de los juegos Impuestito calcula y muestra el precio de los juegos de la web de

Luke ✨ 23 Dec 4, 2022
Kyrillos Hany 14 Aug 10, 2022
Dynamic-web-development - Dynamic web development used CSS and HTML

Dynamic-web-development ASSISNMENT I just used CSS and HTML to make a mobile int

null 1 Feb 8, 2022
A minimal, modern, generic, hot-reloading local web server to help web developers

eleventy-dev-server ?? ⚡️ ?? ?? A minimal, modern, generic, hot-reloading local web server to help web developers. ➡ Documentation Please star Elevent

Eleventy 52 Dec 31, 2022
Easily publish notes to the web This plugin integrates with obsius.site to publish markdown notes on the web.

Obsius Publish Easily publish notes to the web This plugin integrates with obsius.site to publish markdown notes on the web. Limitations The type of c

Jon Grythe Stødle 66 Dec 20, 2022
A small web app that tries to imitate the desktop web version of amazon site, you can add items to the basket, delete them, and have your user authentication feature thanks to Firebase.

Features Here's the feature's included in this project ??‍??‍??‍?? Login Page ?? Products Page ?? Cart and Checkout Page ?? Sign up function with Goog

Murad Rahmanzada 16 Aug 22, 2022
Activate The Open Web ™ ("Activate Windows" watermark ported to the web)

Activate-Web The "Activate Windows" watermark ported to Open Web ™. Inspired by activate-linux. As of 0.1, it’s a Web Component written in TypeScript,

Blair Noctis 8 Jun 6, 2022
📈 AI powered web scraper that let's you scrape anything you want from the web including google search results

AI powered web scraper that let's you scrape anything you want from the web including google web search results from your terminal. And at the same ti

Udhay rajeev 27 Dec 27, 2022
Progressive Web App (PWA) built in Node.js & Express that automatically reloads/refreshes your browser, web page, and app when developing.

Expresso ☕️ Checks for changes in your source and automatically reloads your browser, or web page, and app window. Makes development easier. Report Bu

Start Rev Technology 3 Oct 6, 2022
Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron 334 Dec 29, 2022
💻 Countries Web is a web application that lets you view data for all the countries in the world and filter them by country name and continent.

?? Countries Web View Demo This is the Countries Web, a web application that lets you view data for all the countries in the world and filter them by

João Gabriel 5 Jun 23, 2022
Learn Web 2.0 and Web 3.0 Development using Next.js, Typescript, AWS CDK, AWS Serverless, Ethereum and AWS Aurora Serverless

Learn Web 2.0 Cloud and Web 3.0 Development in Baby Steps In this course repo we will learn Web 2.0 cloud development using the latest state of the ar

Panacloud Multi-Cloud Internet-Scale Modern Global Apps 89 Jan 3, 2023
Tools to check version monitoring (updates) for web application. web 应用版本监测(更新)工具库

?? version-rocket ?? English | 简体中文 Notify users when a new version of your site is available and prompt them to refresh the page. When you finish dep

hakuna 77 Dec 29, 2022
TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Williams Colmenares 14 Dec 17, 2022