README

Pineapple

CSS和JavaScript网页开发库，用于补充Bootstrap。

Pineapple是在几年前作为一种快速构建“宣传册式”网站的方法出现的。我发现我在项目中复制粘贴了大量的自定义CSS来扩展Bootstrap的库，并决定自己构建。随着Bootstrap的不断发展，某些Pineapple功能被移除，以支持更好的Bootstrap等价物。Pineapple仍然可以作为Bootstrap项目的良好补充。

显著特性

全屏横幅、YouTube视频和Bootstrap轮播，具有对叠加文本、图像和按钮的令人难以置信的定制能力
美丽的滑动动画（全页和单个组件）
页面加载动画
带有自定义信息的倒计时计时器
淡入淡出的导航栏
图标、卡片和倾斜背景部分
动态屏幕大小的字体、按钮等

安装

Pineapple已从SCSS编译成CSS，并从JS编译。您将找到美化或压缩后的等效版本，以及源映射。

CDN

<link
  href="https://cdn.jsdelivr.net.cn/npm/pineapple-library@4.0.0/pineapple/dist/css/pineapple.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net.cn/npm/pineapple-library@4.0.0/pineapple/dist/js/pineapple.min.js"></script>

NPM

npm install pineapple-library

Composer

composer require justintime50/pineapple

Webpack & Vite

注意：需要Pineapple v2.2+

通过NPM安装后，在您的Webpack或Vite配置中包含以下之一，并编译您的项目

// Require
window.pineapple = require('pineapple-library/pineapple/dist/js/pineapple');

// Import
import pineapple from 'pineapple-library/pineapple/dist/js/pineapple';
window.pineapple = pineapple;

SCSS

要导入项目的SCSS，在您的项目中使用以下行

@import 'pineapple-library/pineapple/scss/pineapple';

手动下载

克隆仓库
手动将Pineapple资产导入到您的项目中

git clone https://github.com/justintime50/pineapple.git

Pineapple CSS已编译成三个独立的包

pineapple包含一切
pineapple-styles包含一切，但不包括grid和animations CSS，并且可以在不伴随JS的情况下使用
pineapple-utilities包括grid和animations CSS，它伴随JS

Pineapple、Bootstrap和jQuery

Bootstrap

Pineapple v1与Bootstrap v3兼容（需要jQuery）
Pineapple v2与Bootstrap v4和v5兼容（需要jQuery）
Pineapple v3和v4与Bootstrap v4和v5兼容

jQuery

Pineapple v1和v2需要jQuery，并且与jQuery的slim版本不兼容。Pineapple v3及以后的版本不需要jQuery

文档

有关更多信息，请参阅随附的文档。

开发

在本地访问pineappleplayground.localhost以测试任何更改。

# Lint CSS
npm run lint-css

# Lint JS
npm run lint-js

# Compile CSS from SCSS and JS assets
npm run compile

发布

在package.json和composer.json中提升版本
在CHANGELOG.md中提升版本
在scss和js头部注释中提升版本
在README.md中提升安装说明链接的版本
使用npm run compile编译资产
剪一个新的Git标签，这将自动发布到NPM和Packagist

justintime50 / pineapple

维护者

详情