198 lines
7.3 KiB
Markdown
198 lines
7.3 KiB
Markdown
# Pico UI
|
|
|
|
This repository contains various UI-related plugins for Pico CMS.
|
|
|
|
## Why use these
|
|
|
|
Pico CMS is a great, simple CMS and there are a lot of themes and templates available. It is however
|
|
still primarily designed for text content sites.
|
|
|
|
Most themes can provide some sort of neatly designed homepage, that primarily uses the auto menu
|
|
(`pages` array generated by Pico).
|
|
|
|
If you actually maintain a blog-like content site with featured content and want to manually maintain
|
|
your featured articles on the homepage, this becomes a challenge -- you have to create manual HTML/CSS
|
|
for your featured links.
|
|
|
|
Worse yet, if you have a moderately-sized site with hundreds of pages, loading the pages array slow
|
|
down Pico a lot, and you may have to use something like my [TooManyPages](https://github.com/bigicoin/PicoTooManyPages)
|
|
plugin to keep your site running fast, and you won't get the `pages` array populated at all for the
|
|
auto-menus on most themes.
|
|
|
|
# Pico UI: Card
|
|
|
|
Create a card (with a hyperlink) such as this:
|
|
|
|
|
|
|
|
Using code that looks like below in your markdown file:
|
|
|
|
```
|
|
[ui.card href="https://google.com" img="http://i.imgur.com/TkTgq3L.jpg" ratio="16:9"]
|
|
[title]Cute Dog[/title]
|
|
[text]This page is about this cute dog.[/text]
|
|
[/ui.card]
|
|
```
|
|
|
|
## Installation
|
|
|
|
Installation is simple. Simply drop the `PicoUICard.php` file into the `plugins` directory of your Pico installation.
|
|
|
|
## Configuration
|
|
|
|
The plugin will not be enabled by default, so simply add the following line to your
|
|
`config/config.php` file to enable it:
|
|
|
|
```
|
|
$config[ 'PicoUICard.enabled' ] = true;
|
|
```
|
|
|
|
**Bootstrap**: Bootstrap is a CSS and JS framework used commonly on many web sites. Pico UI Card relies on
|
|
some Bootstrap CSS elements to style and position cards properly.
|
|
|
|
If your theme already includes Bootstrap, you are good. Default config will not include an extra copy of it.
|
|
|
|
If you don't, you can enable this setting to load Bootstrap from their official CDN.
|
|
|
|
```
|
|
$config[ 'PicoUICard.loadBootstrap' ] = true;
|
|
```
|
|
|
|
**Card size ratio**: By default, card images are 16:9, meaning that the height is 56.25% of the width. You
|
|
can change this default ratio, by assigning a value of `width:height` ratio. Default value is `16:9`.
|
|
|
|
```
|
|
$config[ 'PicoUICard.cardRatio' ] = '4:3';
|
|
```
|
|
|
|
Note that in addition to the default ratio setting, you can also change each individual card's ratio using
|
|
the `ratio` attribute in the markdown tag.
|
|
|
|
**Card size and positioning**: Pico UI Cards are wrapped within a `row` class (Bootstrap), and so each card
|
|
has a definition of column size. (See [Bootstrap: Grid System](http://getbootstrap.com/css/#grid))
|
|
|
|
Use the following config to change it. The default value is: `col-md-4 col-sm-6 col-xs-6`.
|
|
|
|
```
|
|
$config[ 'PicoUICard.cssClass.cardPosition' ] = 'col-md-6';
|
|
```
|
|
|
|
**Title text and description text**: You can define your own CSS classes for the title text and description text.
|
|
Typically the use case for this would be customizing font sizes, colors, etc.
|
|
|
|
```
|
|
$config[ 'PicoUICard.cssClass.cardTitle' ] = 'my-title-class';
|
|
$config[ 'PicoUICard.cssClass.cardText' ] = 'my-description-class';
|
|
```
|
|
|
|
# Pico UI: Carousel
|
|
|
|
Create a carousel (with hyperlinked slides) such as this:
|
|
|
|
|
|
|
|
Using code that looks like below in your markdown file:
|
|
|
|
```
|
|
[ui.carousel ratio="2.35:1"]
|
|
[slide href="https://google.com" img="http://i.imgur.com/3jRDGza.png"]First Cute Dog[/slide]
|
|
[slide href="https://google.com" img="http://i.imgur.com/k6CAga7.png"]Second Cute Dog[/slide]
|
|
[slide href="https://google.com" img="http://i.imgur.com/cnSJLRs.png"]Third Cute Dog[/slide]
|
|
[/ui.carousel]
|
|
```
|
|
|
|
## Installation
|
|
|
|
Installation is simple. Simply drop the `PicoUICarousel.php` file into the `plugins` directory of your Pico installation.
|
|
|
|
## Configuration
|
|
|
|
The plugin will not be enabled by default, so simply add the following line to your
|
|
`config/config.php` file to enable it:
|
|
|
|
```
|
|
$config[ 'PicoUICarousel.enabled' ] = true;
|
|
```
|
|
|
|
**jQuery and Slick**: jQuery and the [Slick jQuery plugin](https://github.com/kenwheeler/slick/) are used in
|
|
the Pico UI: Carousel plugin to create carousel displays. Since jQuery is commonly used, if your theme is
|
|
already using it, you don't have to load it. Default config will not include an extra copy of it.
|
|
|
|
As for Slick, if you have downloaded it to your site, you may config it to load locally. Otherwise, the plugin
|
|
will automatically load it from the official CDN.
|
|
|
|
```
|
|
$config[ 'PicoUICarousel.loadJquery' ] = true;
|
|
$config[ 'PicoUICarousel.jqueryUrl' ] = '//cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js';
|
|
$config[ 'PicoUICarousel.slickPath' ] = '//cdn.jsdelivr.net/jquery.slick/1.6.0';
|
|
```
|
|
|
|
**Carousel size ratio**: The size of the carousel will always be full screen width right now. You can however
|
|
adjust the width to height ratio of it. The default ratio is 2.35:1, meaning that the height is 46.25% of
|
|
the width. You can change this default ratio, by assigning a value of `width:height` ratio.
|
|
|
|
```
|
|
$config[ 'PicoUICarousel.carouselRatio' ] = '16:9';
|
|
```
|
|
|
|
Note that in addition to the default ratio setting, you can also change a carousel's ratio using
|
|
the `ratio` attribute in the markdown tag.
|
|
|
|
**Title text**: You can define your own CSS classes for the title text of a slide. Typically the use case for
|
|
this would be customizing font sizes, colors, etc.
|
|
|
|
```
|
|
$config[ 'PicoUICarousel.cssClass.carouselText' ] = 'my-title-class';
|
|
```
|
|
|
|
# Pico UI: Blurb
|
|
|
|
Create a text blurb (with a hyperlink) along an image such as this, typically used to feature content:
|
|
|
|
|
|
|
|
Using code that looks like below in your markdown file:
|
|
|
|
```
|
|
[ui.blurb href="https://google.com" img="http://i.imgur.com/BLPXYLZ.png"]
|
|
[title]Pancake Chef[/title]
|
|
[text]This dog is really good at making pancakes! To see what kind of recipes he uses and what his pancakes look like,
|
|
you should totally click into this page to read more about it.
|
|
[/text]
|
|
[more]Read more...[/more]
|
|
[/ui.blurb]
|
|
```
|
|
|
|
## Installation
|
|
|
|
Installation is simple. Simply drop the `PicoUIBlurb.php` file into the `plugins` directory of your Pico installation.
|
|
|
|
## Configuration
|
|
|
|
The plugin will not be enabled by default, so simply add the following line to your
|
|
`config/config.php` file to enable it:
|
|
|
|
```
|
|
$config[ 'PicoUIBlurb.enabled' ] = true;
|
|
```
|
|
|
|
**Bootstrap**: Bootstrap is a CSS and JS framework used commonly on many web sites. Pico UI Card relies on
|
|
some Bootstrap CSS elements to style and position cards properly.
|
|
|
|
If your theme already includes Bootstrap, you are good. Default config will not include an extra copy of it.
|
|
|
|
If you don't, you can enable this setting to load Bootstrap from their official CDN.
|
|
|
|
```
|
|
$config[ 'PicoUIBlurb.loadBootstrap' ] = true;
|
|
```
|
|
|
|
**Title text, description text, more link text**: You can define your own CSS classes for the title text,
|
|
description text and "More" link text. Typically the use case for this would be customizing font sizes, colors, etc.
|
|
|
|
```
|
|
$config[ 'PicoUIBlurb.cssClass.blurbTitle' ] = 'my-title-class';
|
|
$config[ 'PicoUIBlurb.cssClass.blurbText' ] = 'my-text-class';
|
|
$config[ 'PicoUIBlurb.cssClass.blurbMoreLink' ] = 'my-more-link-class';
|
|
```
|