An AnchorCMS theme for designers & artists.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
fonts
img
js
sass
.gitattributes
404.php
README.md
about.txt
article.php
footer.php
functions.php
header.php
page-about.php
page-contact.php
page-portfolio.php
page.php
posts.php
search.php

README.md

Brag Sheet

An AnchorCMS theme for designers, artists, and dreamers.

DEMO

Features

  • Responsive, mobile-ready
  • Drawer navigation
  • Alerts & calls to action
  • Sophisticated hover effects
  • Rich typography & icon fonts (Icomoo)
  • Mixitup gallery for art, photos, and your wildest visuals: https://mixitup.kunkalabs.com/
  • Unobtrusive sticky footer
  • Joyous UX!

Extra slaw

  • Sass
  • Bourbon & Neat
  • MixItUp jQuery plugin

Upcoming - pending Anchor 1.0 release

  • Plugin support
  • Publish to social media
  • Pleasing custom palette-picker: http://www.checkman.io/please/
  • Per-page & per-article custom fields
  • More page templates/components: price tables, accordion, forms

Requires:

  1. Anchor CMS 0.9 Install Anchor CMS
  2. Sass 3.3.* Install Sass
  3. Bourbon 3.2.* Install Bourbon
  4. Neat 1.5.* Install Neat
  • jQuery (included in header.php)
  • jQuery.mixitup (portfolio.php grid)
  • jQuery.cookie (saves alert dismiss state, might do more stuff in the future

Installation

  1. After verifying that your Anchor CMS instance is working, download & unzip to anchor-install-path/themes/
  2. Log into Anchor CMS admin panel, Extend, Appearance section, set Current Theme to Brag Sheet.
  3. Create site variables & custom fields
    1. In the Extend section, select Custom Field. Create a new field with the following options:

       	Type: post
       	Field: image
       	Unique Key: thumbnail
       	Label: Your choice - I suggest article thumbnail 200x200
       	File types: .png, .gif, .jpg
       	Image max width: 200
       	Image max height: 200
      

Usage

  1. Icon fonts by IcoMoon

    1. Download & unzip fonts/ to brag-sheet/fonts
    2. Copy icon classes from style.css to /scss/partials/_icons.scss
    3. Declare class="icon-name" on element in HTML or content: "\symbol-code" in SASS.
    4. If you're not sure what you're doing, I recommend adding your icons in addition to mine (rather than substituting).
  2. screen.scss contains global imports & styles, which are written to screen.css

  3. page-$name.scss is the convention for page templates; e.g. page-about.css contains all styles for page-about.php 4 _variables.scss contains style variables. Variable names usually describe styled element e.g. $comment-color, $comment-color-focus, $link, $link-hover.

  4. Drawer navigation requires all content to be nested between <main></main> tags, which open in header.php and close in footer.php.

  5. Call to action styles are located in _footer.scss & footer.php. Drawer & header styles can be found in _header.scss (although some related markup unexpectedly lives in footer.php, rather than header.php)

  6. posts.scss & posts.php control the blog roll, likewise article.scss & article.php control individual post views.

  7. page-portfolio.php items require the following:

    • MixItUp target element: .portfolio-item
    • Lightbox caption: figcaption h2 & figcaption .fig-description
  8. To correctly route the POST made on page-contact.php, copy add the following to the bottom of anchor/routes/site.php - replace your@email.com with your own email address!:

     		// Necessary for form POST on page-contact.php
     		// http://forums.anchorcms.com/discussion/making-a-contact-form
     		Route::post('contact', function() {
    
     	    $input = Input::get(array('contact-subject', 'contact-name', 'contact-email', 'contact-message'));
    
     	    // Validator check...
     	    $validator = new Validator($input);
    
     	    $validator->check('contact-subject')
     	        ->is_max(1, "Subject is required!");
    
     	    $validator->check('contact-name')
     	        ->is_max(2, "Name is required!");
    
     	    $validator->check('contact-email')
     	        ->is_email("Email is required!");
    
     	    $validator->check('contact-message')
     	        ->is_max(5, "Message is empty or too short!");
    
     	    if($errors = $validator->errors()) {
     	        Input::flash();
     	        Notify::error($errors);
     	        return Response::redirect('contact#error');
     	    }
    
     	    $me = "your@email.com"; // Your email address
     	    $subject = $input['contact-subject'];
     	    $message = $input['contact-message'];
    
     	    $header  = "From: " . $input['contact-email'] . " \r\n";
     	    $header .= "Reply-To: " . $input['contact-email'] . " \r\n";
     	    $header .= "Return-Path: " . $input['contact-email'] . "\r\n";
     	    $header .= "X-Mailer: PHP \r\n";
    
     	    if(mail($me, $subject, $message, $header)) {
     	        Notify::success("Email sent!");
     	        return Response::redirect('contact#sent');
     	    } else {
     	        Notify::error("Failed to send email!");
     	        return Response::redirect('contact#failed');
     	    }
    
     		});