Building a Downloads Gallery WordPress Plugin

Plugins extend WordPress’ functionality and let you do almost anything with your existing site. In this tutorial, we will create a Downloads Gallery plugin for your WordPress website. We will be keeping it plain and simple and shall focus more on WordPress core instead of PHP logics.

1. Firstly, we will setup the admin area functionality which includes uploading, listing and deleting files.
2. Secondly, we will list the uploaded files on the actual site for others to download them.

You can easily turn this plugin into a full-featured Downloads system, but as of now, we will focus more on how to work with WordPress to setup a working plugin.

Functionality

We will be setting up a Downloads Gallery for your WordPress website, where we need our users to download all the files uploaded by admin. In brief, we need a page to upload files to WordPress and a page to download the requested files.

File Structure

the above screenshot shows the required files and folder to help us setup our plugin. Let’s firstly understand the file structure:

1. secure_files: This folder will store our download files.
2. downloads.php: This file will let the end-user download the file by clicking on a link.
3. style.css: You can write a seperate design for your Downloads Gallery under this file.
4. tutlage_file_manager.php This file will store the logics for the front-end view (website page to download files).
5. tutlage_file_manager_admin.php This file will store the logics for the admin page.

These are the required files in order to setup our WordPress plugin. We will be creating functions to manage uploads and downloads. You will need to have a working knowledge of PHP basics for this purpose.

Getting Started

Create a new folder named tutlage_file_manager under wp-content->plugins, with a new file called tutlage_file_manager.php inside it. Now open that file with your favorite text editor and paste the following code inside it:

<!--?php/*Plugin Name: Tutlage File ManagerPlugin URI: http://www.speckyboy.comDescription: Plugin to setup a simple downloads gallery for your WordPress websiteAuthor: Aman VirkVersion: 1.0Author URI: http://www.thetutlage.com*/?-->

Login to the WordPress dashboard and navigate to Plugins->Installed Plugins. Now, you will be able to find a new plugin listed there. In our case, it shows Tutlage File Manager

You can activate the plugin by clicking the Activate link next to the plugin name, but it will not make any changes to WordPress because we have not yet written any code for our plugin.

Working with Action Hooks

Action Hooks are designated points in WordPress which give you a chance to run your code before executing any described function. Let’s say you wish to add something to the footer of WordPress. You can hook your function with the wp_footer function. See the given example. Check out list of available hooks in WordPress.

<?phpfunction your_function() {    echo '<p>This is inserted at the bottom</p>';}add_action('wp_footer', 'your_function');?>

Now if you have the plugin activated, just go to the website and you will be able to see the above text at the bottom of the page. As we have nothing to do with footer, just remove the above code so that we can write the action hook to show our plugin inside the WordPress Settings tab.

function tutlage_file_manager_callback(){    // here goes our callback function} function tutlage_admin_setup(){    add_options_page("Tutlage File Manager", "Tutlage File Manager", 1, "tutlage_file_manager", "tutlage_file_manager_callback");}add_action('admin_menu',tutlage_admin_setup);

Copy the above code inside your tutlage_file_manager.php file and refresh the

Dashboard

page. Now you will be able to see a link inside the settings tab.

Understanding the Above Code

What we have done so far is called the add_options_page function to list our plugin inside the Settings tab. You can read more about add_options_page here.

As of now, we are able to see our plugin link and a blank page. We can move forward to create an Upload button for our plugin. We will keep the logics for our admin page inside a different file. Let’s create a new file tutlage_file_manager_admin.php.

WordPress, by default, listens to the main plugin file which in our case is tutlage_file_manager.php. So we will include the tutlage_file_manager_admin.php file under this file.

function tutlage_file_manager_callback(){    include_once( 'tutlage_file_manager_admin.php' );}

We have edited our tutlage_file_manager_callback() function which will now include the tutlage_file_manager_admin.php file. Let’s do ‘Hello World‘ to check if we are on the correct path. Paste the below code inside tutlage_file_manager_admin.php and refresh the page to see ‘Hello World’ printed on your screen:

<?php    echo '<p>Hello world</p>';?>

If you do see ‘Hello World’ then we can proceed…

Setting up the Upload Form

Paste the below code inside tutlage_file_manager_admin.php file and refresh the page, you will be able to see the upload form:

<div class="wrap">    <h2>Uploading Files</h2>    <form method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>" enctype="multipart/form-data">        <p><label for="Upload File">Upload File: </label><input type="file" name="tutlage_file_upload" /></p>        <p class="submit"><input type="submit" name="Upload" value="Upload" /></p>    </form></div>

This form will not do anything as of now becuase we have not written any code for it. We need to find out whether the Download directory, which in our case is secure_files, exists or not. Paste the below code at the top of your file.

<?php$folder_path = ABSPATH.'wp-content/plugins/tutlage_file_manager/secure_files';function createDirectory($folder_path){    if(!is_dir($folder_path))    {        mkdir($folder_path);    }}createDirectory($folder_path);?>

1. First, we have defined the base path for our Downloads directory.
2. Next, we have created the function which will check whether the above directory exists or not. If not, it will make a new directory.
3. Finally, we are calling the function.

Now, we can move forward and write the function to add the uploaded files under this directory. Add the below code after the createDirectory() function.:

function uploadFiles($directory,$file_name,$file_tmp_name){    if(move_uploaded_file($file_tmp_name,$directory.'/'.$file_name))    {        return 1;    }    else    {        return 0;    }}

We are simply uploading the files to the given directory under this function. Now we will write the code that gets executed everytime the Upload button is clicked. Add the below code inside the same file ( tutlage_file_manager_admin.php ):

if(isset($_POST['Upload'])){    $file_name = strtotime("now").$_FILES['tutlage_file_upload']['name'];    $upload = uploadFiles($folder_path,$file_name,$_FILES['tutlage_file_upload']['tmp_name']);    if($upload == 1)    {        echo '<div class="updated"><p><strong>File Uploaded Successfully <a href="'.str_replace('%7E','~',$_SERVER['REQUEST_URI']).'">Return Back</a></strong></p></div>';    }    else    {        echo '<div class="error"><p><strong> Error Uploading File <a href="'.str_replace('%7E','~',$_SERVER['REQUEST_URI']).'">Return Back</a></strong></p></div>';    }}

1. We have created a variable $file_name which will add the current time (in milliseconds) in front of the filename. It will make sure we are not over-riding the existing file with the current one if they both have same name.
2. Everytime we click the Upload button, we are running the function uploadFiles() with the required parameters.
3. First, we will pass the folder path.
4. Next, we will pass the actual file name.
5. Lastly, we will pass the temporary file name.
6. If the upload was successful, we will show a success message else we will give an error message.

Check the secure_files folder to find out whether files are saved there or not. At this point, we are able to save files; now we need a way to retrieve all files from the secure_files directory and list them to our plugin’s page.

The below function will return an array of data containing uploaded file information. It is a good pratice to keep all of your functions in one place, so paste the below code right where your last function ends.

 function getUploadedFiles($directory){    $folder = opendir($directory);    while ($file = readdir($folder)) {        if($file !== '.' && $file !== '..')        {            $filename = $directory.'/'.$file;            $file_size = filesize($filename);            $last_date = date("F d Y H:i:s", filectime($filename));            $file_array[] = array('filename' => $file,'filesize' => $file_size,'lastdate' => $last_date);        }    }    return $file_array;}

The above function will list all the files from a specific directory.

Earlier, we created an if statement to upload the files, now we will create an else statement just next to it to list all files.

 else{    $list_files = getUploadedFiles($folder_path);     $output = ' <table class="wp-list-table widefat fixed posts" cellspacing="0">    <thead>        <tr>            <th id="title" class="manage-column column-title sortable desc" style="" scope="col">                <a href=""><span>Title</span></a>            </th>            <th id="title" class="manage-column column-title sortable desc" style="" scope="col">                <a href=""><span>File Size</span></a>            </th>            <th id="title" class="manage-column column-title sortable desc" style="" scope="col">                <a href=""><span>Upload Date</span></a>            </th>            <th id="title" class="manage-column column-title sortable desc" style="" scope="col">                <a href=""><span>Actions</span></a>            </th>        </tr>    </thead><h2> Uploaded Files </h2>    <tbody>';    if(!empty($list_files))    {        foreach($list_files as $key => $value)        {            $output .= '<tr>                <td class="post-title page-title column-title">                    <strong>'.$value['filename'].'</strong>                </td>                <td class="post-title page-title column-title">                    <strong>'.$value['filesize'].' Bytes </strong>                </td>                <td class="post-title page-title column-title">                    <strong>'.$value['lastdate'].'</strong>                </td>                <td class="post-title page-title column-title">                    <a href="'.str_replace( '%7E', '~', $_SERVER['REQUEST_URI']).'&&file='.$value['filename'].'&&action=delete"> Delete </a>                </td>            </tr>';        }    }    else    {        $output .= '<tr><td> No files have been found </td></tr>';    }    $output .= '</tbody></table>';}

It does seem like a lot of code, but most of it is HTML.

1. First, we have called the function getUploadedFiles() which will get all files from a directory and return us the array of data.
2. Next, we have created a table and defined ID and class attributes to make sure our table looks quite similar to the native WordPress table structure.
3. We have also stored the output inside a variable called $output.
4. All we need to do now is to echo the above variable.

Place the below code next to the form we created, and we are done!

 <div class="clear"></div><?php if(isset($output)) { echo $output; } ?>

If everything has gone right, you will now be able to find a Delete button with every file listed on a table. So, why not write one more function to delete the selected file?

 function deleteFiles($file_path){    if(is_file($file_path))    {        unlink($file_path);    }    else    {        rmdir($file_path);    }    return true;}

The above function is quite simple as it will check if the selected filename is a file. Then, we can use the unlink method to delete else, we will also use the rmdir method which will remove the directory.

Now where should we write the code that will run after hiting that Delete button? Do you remember that we created if and else statements earlier? Let’s add else if inside them and this else if will be the one to delete the file.

 elseif(isset($_GET['action']) && $_GET['action'] == 'delete'){    $file_path = $folder_path.'/'.$_GET['file'];    if(deleteFiles($file_path))    {        echo '<div class="updated"><p><strong>File Deleted Successfully <a href="'.str_replace('%7E','~',$_SERVER['PHP_SELF']).'?page=tutlage_file_manager">Return Back</a></strong></p></div>';    }}

Let’s have a quick recap of what we have done so far. We’ve learnt how to add a link to our plugin inside WordPress Settings menu, figured out how WordPress hooks work and have created the functionality to upload and list files from admin’s Dashboard.

Now, we will work with the front-end logic where a user can download all the listed files from our website. Let’s break it down to find what we need to make it work.

1. Create a dynamic page where all files will be listed.
2. Grab all files from our secure_files directory and list them on the above page.
3. Add functionality to download file with onclick event.

Let’s get started with it. Open file tutlage_file_manager.php and paste the following code inside it.

function thetutlage_add_share_page(){    if (!get_page_by_title('Downloads Gallery'))    {        $post = array(            'post_content'  => '',            'post_name'     =>  'Downloads Gallery',            'post_status'   => 'publish',            'post_title'    => 'Downloads Gallery',            'post_type'     => 'page',            'post_parent'   => 0,            'menu_order'    => 0,        );        wp_insert_post($post);    }}thetutlage_add_share_page();

The above function will check whether a page with the title Downloads Gallery exists or not. If our Downloads Gallery exists already, than we will not create a new page else we will create one and name it Downloads Gallery.

Now go back to your actual website and you will find a blank page with a title Downloads Gallery. With that done, we now need to write a function to grab all files from the secure_files directory and list them on this page.

Copy function getUploadedFiles() from tutlage_file_manager_admin.php and paste it to tutlage_file_manager.php and rename the function to getDownloadFiles().

This function will do the same thing: it will grab all the files from a given directory and return them in an array. Now we need to call this function, break the array and list them on the page with title Downloads Gallery.

We need to list files only where the page title is Downloads Gallery, and in order to do that we can use a handy WordPress is_page function:

function list_downloads($content) {    $page = get_page_by_title( 'Downloads Gallery' );    if(is_page($page->ID))    {        $folder_path = ABSPATH.'wp-content/plugins/tutlage_file_manager/secure_files';        $files = getDownloadFiles($folder_path);        if(!empty($files))        {            $output = '<table id="tutlage_file_manager">                <tbody><tr>                    <th>File Name</th>                    <th>File Size</th>                    <th>Download</th>                </tr>';            foreach($files as $value)            {                $output .= '<tr><td>'.$value['filename'].'</td><td>'.$value['filesize'].' Bytes</td><td><a href="'.get_option('siteurl').'/wp-content/plugins/tutlage_file_manager/downloads.php?file='.$value['filename'].'"> Download </a></td></tr>';            }            $output .= '</tbody></table>';        }        else        {            $output = '<h2> No files found </h2>';        }        return $output;    }}

Understanding the Above Code

Most of the above code is HTML which will let us display our files inside a table. There will be a link next to every item which will allow the user to download it.

1. First we will get a page where the title is Downloads Gallery
2. Next we will make a check whether that page exists or not using is_page function.
3. If it exists than we will call the above function getDownloadFiles(), which will return files as an array.
4. Finally, we will break the array and list the items inside a table.

Now if you refresh the page, you will see no change. It is because so far we have only created the function. We still need to attach this function to WordPress so that every-time the content is loaded, our function runs as well.

add_filter( 'the_content', 'list_downloads' );

Just paste the above code in the same file tutlage_file_manager.php and now refresh the page. You will see all the files listed there. Now all we are left with is the downloads.php file. Make a new file inside the plugin directory and name it to downloads.php.:

<?php    $files = $_GET['file'];     $filepath = 'secure_files/'.$files;     header('Content-Description: File Transfer');    header("Content-Disposition: attachment; filename=\"$files\"");    header('Content-Type: application/octet-stream');    header('Content-Transfer-Encoding: binary');    header('Content-Length: ' . filesize($filepath));    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');    header('Pragma: public');    header('Expires: 0');    readfile($filepath);?>

downloads.php does not have much work to do: it will get the file name from the URL and will use method to read the file back to the user. Now, you can easily test the entire plugin right from uploading to downloading files.

Is There Anything Left?

Yes. As of now, we have not created any stylesheet, so let’s take care of that too. Create a new file named style.css.

This file will let you write styles for your actual Downloads page on the website. We just have to link the stylesheet to our existing function called list_downloads(). Open tutlage_file_manager.php.

wp_enqueue_style( 'myprefix-style', plugins_url('style.css', __FILE__) );

Paste the above code inside if statement of list_downloads() function. You can now write any styles for your Downloads Gallery.

All done! Now, why don’t you download the source files and try it for yourself.

Download Source Files

Using jQuery to Validate the Standard WordPress Comment Form →
Using the Power of the .htaccess File to Improve WordPress SEO →
Tracking Social Media Sharing and Button-Clicks with JavaScript and WordPress →
For the Novice Developer: The Anatomy of a WordPress Theme →
Focusing on Usability with an Enhanced Pagination Design in WordPress Entries →

Source : internetwebsitedesign[dot]biz

Read More

Responsive Grids With Susy

Are you happy with with any of the CSS grid libraries available? No? I don’t blame you. Enter Susy, a plugin for the Compass CSS framework that lets you create your own custom grid framework, minimizing overhead, while making it more understandable to use. Sounds good, right? Let’s jump right in.

I’m not going to delve much into Compass or SCSS (the language you write the CSS in), but feel free to refer to our Maintainable CSS With Sass and Compass Premium course, if you want to learn about them.

---

Setting the Stage

You can create three different types of grids: static, fluid and magic.

Today’s popular grid libraries seem to fall short in one way or another. Grids like 960 and Blueprint are both static grids with very specific pixel values. Viewing these grids on screens that are under 950 pixels wide results in horizontal scroll bars–the bane of the Web.

Fluid grids are tricky to get right, but a few do exist. Most fluid grids work with percentages instead of pixels, but they tend to have a maximum size and make it impossible to scale past a respectable maximum width. By itself, a fluid layout is almost as bad as a fixed layout, because while you get better coverage of desktop computers, mobile devices tend to suffer with a worse layout. In this particular situation, a static grid gives you a better experience. Yes, you do have to scroll horizontally on devices with a lower resolution, but percentage based systems usually end up with a column that is, for example, 10% of 480px. This causes a vertical split in your text.

One solution to this problem is CSS media queries. Some of the more popular libraries, like the “1140 grid” and the “Bootstrap scaffolding grid”, come with preset media queries. The 1140 grid has a fluid layout, but small screen sizes cause the columns to stack on top of each other.

Fluid grids are tricky to get right…

Bootstrap’s scaffolding grid, on the other hand, incorporates multiple static layouts. As the screen size changes, Bootstrap changes the layout to the one best suited for the current screen size. Once you get to a mobile screen size, Bootstrap loads the same setup as the 1140 grid, a fluid layout with all the columns stacked on top of each other.

What’s wrong with choosing one of these? Well, technically nothing, but they are not tailor-made for your specific app. This forces you to build your app into their grid and work around the framework’s limitations. You can always modify their framework, but you might as well make your own and shave off the unneeded, overhead features.

---

Introducing Susy

As I mentioned before, Susy is a plugin for the Compass framework that brings a wide array of mix-ins for creating your own CSS grids. You simply specify the default number of columns and a few size options (column width, grid padding, etc), and Susy calculates the correct percentages for your elements. This gives you the power to change the number of columns and their sizes.

You can create three different types of grids: static, fluid and magic.

You already know what static and fluid grids are; let’s take a look at what “magic” grids give you. Magic grids have an elastic outside and a fluid inside. In other words, the outside of the grid (max width) adjusts according to the browser’s default font size (desktop browsers usually have a default of about 16px). The grid’s inside resizes based on the browser’s actual width. This combination gives your site a more consistent look across browsers while still supporting smaller screens.

Susy provides a mix-in called “at-breakpoint”, which allows you to set custom CSS according to the size of the screen. This mix-in accomplishes this feat with CSS media queries. So for example, you can rearrange the columns to stack on top of each other like in the previously discussed frameworks, and you can even remove content that doesn’t fit a mobile device.

---

Setting Up a Susy Project

I assume you already have Compass installed, but if not, you can refer to Jeffrey’s video series. To install Susy, just open a Ruby command line and type the following:

sudo gem install susy

Next create a Compass project. Type the following:

compass create project_name -r susy -u susy

You should see an info page, detailing how to get started.

Inside the newly created directory, you should see two folders along with a config file. You will edit the files residing in the sass directory; Compass compiles these files to output the final CSS to the stylesheets folder.

To save time compiling the CSS files after each update, you can use Compass’ watch command to make Compass automatically recompile your files every time you save an update. So, in the terminal window type the following command:

compass watch

Compass will now start monitoring and re-compiling the files in the sass folder. Keep in mind that you must keep the terminal window open in order to monitor the folder; if you use the terminal for file editing (i.e. vim), then you need to open another window.

---

Susy in Action

Now that you have everything setup, let’s take a look at my quick demo. I am going to keep the HTML short because it’s the CSS that we are really here for. The demo is an event guest manager that lists the invited guests and keeps track of who RSVP’d. It’s a simple idea that showcases many of the concepts we discussed.

The Plan

HTML-wise, there will be a header area followed by a row with the name of the event, some controls, and finally the actual list of guests. You can take a look at the image below to better understand the layout.

Here is the entire HTML page for the demo:

<!DOCTYPE HTML><html>	<head>		<meta name="viewport" content="width=device-width, initial-scale=1" />		<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />	</head>	<body>		<div class="container">			<h1 id="header">Plan It! <span class="tagline">Event Guest Manager</span></h1>			<div id="controls">				<h3 id="menutitle">Guest List For - John's Wedding</h3>				<div id="buttons">					<a id="phonebook" href="#">Add From Contacts</a>					<a id="newguest" href="#">Add New Guest</a>				</div>			</div>			<table cellspacing="0">				<thead>					<tr>						<th>Name</th>						<th class="email">Email</th>						<th class="phone">Phone</th>						<th class="cell">Cell</th>						<th>RSVP Status</th>					</tr>				</thead>				<tbody>					<tr>						<td>Dave K. Samten</th>						<td class="email">dsamten@gman.com</td>						<td class="phone">708-6777</td>						<td class="cell">360-234-1192</td>						<td class="buttoncell">							<a class="unconfirm" href="#" alt="Confirmed">Confirmed</a>						</td>					</tr>					<tr class="alt">						<td>Bob Renper</th>						<td class="email">bobren@gman.com</td>						<td class="phone">537-4267</td>						<td class="cell">621-124-4294</td>						<td class="buttoncell">							<a class="unconfirm" href="#" alt="Confirmed">Confirmed</a>						</td>					</tr>					<tr>						<td>Kevin D. Turner</th>						<td class="email">kturn@gman.com</td>						<td class="phone">942-2674</td>						<td class="cell">930-654-4144</td>						<td class="buttoncell">							<a class="confirm" href="#" alt="RSVP">RSVP</a>						</td>					</tr>				</tbody>			</table>		</div>	</body></html>

Susy uses min-width for the media queries by default; so, you start by defining the CSS for the smallest layout and then gradually expand the layout with the increasing screen size. The ‘mobile’ version separates the tagline and buttons onto their own lines, and we make everything fill the width of the page.

I use another Compass plugin, called Sassy Buttons, to generate the buttons’ CSS. It isn’t integral to this demo, but you can install it by typing the following in a terminal:

gem install sassy-buttons

Then add the following line to your config.rb file:

require 'sassy-buttons'

---

The SCSS

Let’s define the layout. Open _base.scss in the sass folder. This file contains all the import statements and variables that we need later. Replace everything inside that file with the following:

@import "susy";//if you want to use the buttons plugin@import "sassy-buttons";//this is the default number of columns$total-columns: 5;//width of each column$column-width   : 4em;//space between columns$gutter-width   : 1em;//space on the right and left of the grid$grid-padding   : $gutter-width;//alternative layout breakpoints$tablet: 8;$computer: 55em 12;

By itself, a fluid layout is almost as bad as a fixed layout…

The total-columns holds the default number of columns for the smallest display in your layout.

I went with three layouts total: mobile, tablet, and computer. Susy’s breakpoints allow you to do things like setting the min and max sizes for the media queries, and you can even add special support for Internet Explorer. I’m going to keep this example simple and cover just two types.

The tablet breakpoint activates when the screen can fit eight columns. The computer breakpoint activates when the screen is at least 55em wide, and the 12 in $computer: 55em 12; tells Susy to switch to twelve columns.

Now save this file and open screen.scss. Erase everything in the file and import the base file. Let’s also define the main container:

@import "base";body{	background:#F7F3E8;	a{ text-decoration: none; }	.container{		@include container($total-columns, $tablet, $computer);

Notice you don’t need the underscore or the file extension when importing the base file. Inside the container class, we use the first Susy mix-in that defines the different layouts for the grid. Then, it’s just regular SCSS for the mobile layout:

		#header{			font-weight: 700;			font-size: 72px;			span{				font-weight: 300;				font-size: 18px;				display: block;			}		}		#controls{			#buttons{				margin-bottom: 5px;				#phonebook{ @include sassy-button("simple", 6px, 14px, #337EC4); }				#newguest{					margin-top: 5px;					@include sassy-button("simple", 6px, 14px, #D93131);				}			}		}		table{			width:100%;			thead{				color: #FEFEFE;				background: #000;				th{					text-align: left;					font-weight:500;					padding:10px;				}			}			tbody{				border: 3px solid #000;				tr{ background: #E5E5E5; }				tr.alt{ background: #EEEEEE; }				.buttoncell{					.confirm{ @include sassy-button("simple", 6px, 14px, #F39B06); }					.unconfirm{ @include sassy-button("flat", 6px, 14px, #3BA06F); }				}			}			.email{ display: none; }			.phone{ display: none; }		}	}}

As you can see in the last two lines, I hide the email and phone columns in the table so that the page fits normally on a mobile device. As a best practice, give the user a different way to view the full information (i.e. modal, other page), but I leave that out for the sake of this example’s simplicity.

We now have the basic CSS completed for the mobile website, and we can start modifying the layout with breakpoints. Here is a quick screenshot I took on my iPhone of the mobile version:

Adding Breakpoints

The first breakpoint we need to implement is the tablet version; remember, we must start with the smallest layout first. The tablet size is large enough to put the tagline on it’s own line, and we can also display the email column. Unfortunately, it still isn’t big enough to put the event name and buttons on the same line. Here is the SCSS for this breakpoint:

@include at-breakpoint($tablet){	body .container{		#header span{ display: inline; }		table .email{ display: table-cell; }	}}

No ‘magic’ commands here, just standard SCSS inside a Susy mix-in. Here is a screenshot from an iPad of the tablet layout:

Finally, let’s implement the desktop version. We definitely have more than enough room for all the columns; therefore, we indent the table on both sides so that it doesn’t have too much blank space. We also move the buttons onto the same line as the event’s name, aligning it to the right side, in order to center the table (visually, at least). Here is that code:

@include at-breakpoint($computer){	body .container{		#controls{			#menutitle{				@include span-columns(5);				margin-top:5px;			}			#buttons{				text-align: right;				@include span-columns(5 omega);			}		}		table{			@include prefix(1);			@include suffix(1);			.cell{ display: table-cell; }		}	}}

This is the first time we use the span-columns mix-in. Susy takes whatever value you pass to calculate the width percentage of the container. The omega keyword tells Susy that this is the final column in the row. This makes Compass float the column to the right and removes the right margin.

The prefix and suffix mix-ins push the container x amount of columns in from the left and right respectively.

You can now save this file and let compass compile it into CSS. If you added the sassy-buttons plugin after launching the compass watch command, you have to stop the watch command ( shortcut: CTLR-C ) and restart it in order to compile the SCSS.

---

Closing Thoughts

This is a very brief introduction into Susy. For a more complete list of features, you can visit Susy’s documentation.

I hope you enjoyed this article, and thank you for reading. Like always, feel free to leave any comments or questions in the comments section. You can also contact me on Twitter – @GabrielManricks and I will try to get back to you as soon as possible.

Source : internetwebsitedesign[dot]biz

Read More