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 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)

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 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';