87 lines
3.2 KiB
Markdown
87 lines
3.2 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';
|
|
```
|