diff --git a/PicoUICard.php b/PicoUICard.php
new file mode 100644
index 0000000..4cab1d7
--- /dev/null
+++ b/PicoUICard.php
@@ -0,0 +1,165 @@
+config['loadBootstrap'] = false;
+ $this->config['cardPosition'] = 'col-md-4 col-sm-6 col-xs-6';
+ $this->config['cardTitle'] = '';
+ $this->config['cardText'] = '';
+ // load custom config if needed
+ if (isset($config['PicoUICard.loadBootstrap'])) {
+ $this->config['loadBootstrap'] = $config['PicoUICard.loadBootstrap'];
+ }
+ if (isset($config['PicoUICard.cssClass.cardPosition'])) {
+ $this->config['cardPosition'] = $config['PicoUICard.cssClass.cardPosition'];
+ }
+ if (isset($config['PicoUICard.cssClass.cardTitle'])) {
+ $this->config['cardTitle'] = $config['PicoUICard.cssClass.cardTitle'];
+ }
+ if (isset($config['PicoUICard.cssClass.cardText'])) {
+ $this->config['cardText'] = $config['PicoUICard.cssClass.cardText'];
+ }
+ }
+
+ /**
+ * Triggered after Pico has prepared the raw file contents for parsing
+ *
+ * @see Pico::parseFileContent()
+ * @see DummyPlugin::onContentParsed()
+ * @param string &$content prepared file contents for parsing
+ * @return void
+ */
+ public function onContentPrepared(&$content)
+ {
+ // we only do any processing at all if the page contains our tag, so we save time
+ if (strpos($content, '[ui.card') !== false) {
+ // below is our comprehensive regex to detect for the full [ui.card] tag,
+ // which includes the tag and its attributes, and the [title] and [text] subtags.
+ $config = $this->config;
+ $content = preg_replace_callback(
+ '/\[ui\.card((\s+[a-z]+\=[\'\"][^\'\"]*[\'\"])*)\s*\]\s*((\[[a-z]+\][^\[]*\[\/[a-z]+\]\s*)*)\[\/ui\.card\s*\]/',
+ function ($matches) use ($config) {
+ // $matches[1] contain the list of attributes
+ // $matches[3] contain the list of subtags
+ preg_match_all('/\s*([a-z]+)\=[\'\"]([^\'\"]*)[\'\"]/', $matches[1], $attributes);
+ preg_match_all('/\[([a-z]+)\]([^\[]*)\[\/([a-z]+)\]\s*/', $matches[3], $subtags);
+ // look for what we want from attributes and subtags
+ $uicard = array('href' => '', 'img' => '', 'title' => '', 'text' => '');
+ for ($i = 0; $i < count($attributes[0]); $i++) {
+ $uicard[ $attributes[1][$i] ] = $attributes[2][$i];
+ }
+ for ($i = 0; $i < count($subtags[0]); $i++) {
+ if ($subtags[1][$i] != $subtags[3][$i]) {
+ continue; // closing subtag must match in order to be valid
+ }
+ $uicard[ $subtags[1][$i] ] = $subtags[2][$i];
+ }
+ $result = '
';
+ return $result;
+ },
+ $content);
+ // now properly combine continous ui cards into same row div
+ $content = preg_replace('/\<\/div\>\<\!\-\-CLOSE_PICO_UI_CARD\-\-\>\s*\<\!\-\-OPEN_PICO_UI_CARD\-\-\>\
/', "\n\n", $content);
+ // now remove the extra comment tags that acted as our search string
+ $content = preg_replace('/\<\!\-\-(OPEN|CLOSE)_PICO_UI_CARD\-\-\>/', '', $content);
+ }
+ }
+
+ /**
+ * Triggered after Pico has rendered the page
+ *
+ * @param string &$output contents which will be sent to the user
+ * @return void
+ */
+ public function onPageRendered(&$output)
+ {
+ // regular pages
+ $output = str_replace('', ($this->buildExtraHeaders() . ''), $output);
+ }
+
+ /**
+ * Add some extra header tags for our styling.
+ */
+ private function buildExtraHeaders() {
+ $headers = '';
+ // if set to true, load from bootstrap cdn
+ if ($this->config['loadBootstrap'] === true) {
+ $headers .= PHP_EOL.'';
+ $headers .= PHP_EOL.'';
+ }
+ // now set up card css classes
+ $headers .= '
+
+';
+ return $headers;
+ }
+}
diff --git a/README.md b/README.md
index e5b152e..ada9b57 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,76 @@
-# PicoUI
-Various UI-related plugins for Pico CMS
+# Pico UI
+
+This repositoru 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"]
+[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 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-4 col-sm-6 col-xs-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';
+```