_DSC1517

My First (real) SCSS Mixin

While working on the redesign for the Xavier Website (dubbed V4), I tasked myself with trying to simplify our CSS. Luckily we use SASS/SCSS on our servers and we can write a lot more CSS in much less time.

One particular mixin I’ve been working on creates the generic styles for one of our new layouts for the site.

See the Pen <a href=’http://codepen.io/mcmullengreg/pen/WbEzBz/’>WbEzBz</a> by Greg McMullen (<a href=’http://codepen.io/mcmullengreg’>@mcmullengreg</a>) on <a href=’http://codepen.io’>CodePen</a>.
Halloween 2014 Pumpkins
2014pumpkinPatch1
Embedded Twitter Feed

Embedded Twitter Feed for Umbraco

Basic embedded twitter feed macro for usage on your Umbraco website. There is a 7.x version and a 4.11.x version available.

Takes parameters to embed a twitter timeline including the ability to:

  • Change height and width
  • Link Color
  • Data-Chrome settings (header, footer, scrollbar)
  • Number of Tweets to show

Embedded Twitter Feed CSHTML

@* Embedded Twitter Feed
 * ---------------------
 * Create a widget from Twitter.com FIRST - https://twitter.com/settings/widgets
 * Embedded Timeline API - https://dev.twitter.com/docs/embedded-timelines
 * All of these settings are for the local end. User & Search information
 * Should be setup on the actually widget creation page.
 *
 *
*@

@{
    string widgetID = Parameter.widgetID;
    string width = Parameter.width;
    string height = Parameter.height;
    string linkColor = Parameter.linkColor;
    string numTweets = (Parameter.numTweets != "") ? Parameter.numTweets : "";
    var chrome = "";

@* Boolean values store as string 1 and 0 *@
    if ( Parameter.header == "1" ) {
        chrome += "noheader ";
    } if ( Parameter.footer == "1" ) {
        chrome += "nofooter ";
    } if ( Parameter.scrollbar == "1" ) {
        chrome += "noscrollbar ";
    }
}

<div>
<a class="twitter-timeline" 
    data-widget-id="@widgetID" 
    data-link-color="@linkColor" 
    width="@width" 
    height="@height" 
    data-chrome="@chrome"
    data-tweet-limit="@numTweets">
    </a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

Continue reading

Umbraco Package: Form Wrangler

Form Wrangler is a package for Umbraco that assembles a list of files, with links, from a selected media library folder ID. This package was initially designed for the Rose-Hulman Institute of Technology Website and released to the Our Umbraco community on 22 November 2013.

Form Wrangler Parameters:

  • Name: Media Folder
  • Alias: mediaFolder
  • Type: mediaCurrent

Form Wrangler CSHTML

@inherits umbraco.MacroEngines.DynamicNodeContext
@{
    if ( String.IsNullOrEmpty(@Parameter.mediaFolder) ) {
        &ltp>A folder has not been selected</p>
    }  
    
    var folder = Parameter.mediaFolder; 
    var media = Model.MediaById(folder); 
}

    @helper traverse(dynamic node) { 
        var cc = node.Children; 
        if ( cc.Count()>0 && node.NodeTypeAlias == "Folder" ) {
            <ul>@foreach (var c in cc) {
        <li@structure(c) @traverse(c)</li>
            </ul>
            } 
       } 
    }

    @helper structure( dynamic node ){ 
        if ( node.NodeTypeAlias == "Folder" ) { 
            <span id="@node.Name.ToLower().Replace(" ", "_")" class="folder">@node.Name</span> 
        } else { 
            <a href="@node.Url" target="_blank">@node.Name</a> 
        } 
    }
    <div class="formWrangler">@traverse(media)</div>

Form Wrangler in Action

Form Wrangler
Disclaimer: Form Wrangler was designed “as-is”. Greg McMullen does not provide any warranty of the item whatsoever, whether express, implied or statutory, including, but not limited to, any warranty of merchantability or fitness for a particular purpose or any warranty that the contents of the item will be error-free.