Over the years, there has been a misconception of what SharePoint is and how businesses can leverage the technology. Most Companies in the past hear the word SharePoint and immediately think file storage which turns into a document dumping ground. SharePoint is so much more than a place to store your documents, it’s a platform that allows you to build and style sites that are user friendly.

Think of SharePoint as a dream house that you’re building. You start with a concrete slab, which is your basic out-of-the-box functionality. The next thing you would do is build walls similar to list and document libraries that can be customized to fit your needs. Lists are used to store data similar to a database and provides an export function. A document library however is used to store documents and provides a folder structure capabilities. Both lists and document libraries allow the data to be shown in a variety of ways by setting different views within SharePoint.

After the walls are in place, the next essential piece is the roof. The roof signifies creating or building out additional site collections. A site collection is a top-level site known as the root and has a grouping of websites underneath it. The groupings of websites consist of subsites. A subsite can inherit permissions and navigation structure from its parent site (the site collection) or can be managed independently, but still resides under the site collection.

To complete the outside of the house, it needs windows. Windows come in different shapes, sizes and styles based on each individual’s taste. Just like windows, you can customize the look and feel of your SharePoint site by adding a master page and branding it to fit the needs of your company. SharePoint provides a free designer tool for power users and developers to go in and edit code within the different sites. Here is a website that provides examples of SharePoint websites out there:

http://www.topsharepoint.com/

Now that all the basics are put into place and the SharePoint site is starting to feel like a home, the last important piece is the electricity. The electricity provides the advanced functions that SharePoint has to offer. Some of these functionalities include reporting, advanced workflows and custom apps that can be implemented to take your SharePoint site to the next level.

As with any house, it can come in all shapes and sizes. SharePoint has several offerings based on a company’s preference and specific functionality required. The different versions of SharePoint consist of SharePoint Foundation, Standard, Enterprise and SharePoint Online (365). Each version has specific benefits, but if you are looking for a great solution that provides mobile accessibility, SharePoint Online (365) is the way to go. This is a cloud-based solution that Microsoft hosts, so no more worrying about your server crashing and having the overhead cost of hardware and maintenance.

For more information on SharePoint, please click on the resources below:

SharePoint Online
SharePoint for IT pros

As a web designer, one of the day-to-day challenges is staying up-to-date with the newest tools and programs available. One of the most important for designers in the past couple of years has been the rise in popularity of CSS pre-processors. Sass, or Syntactically Awesome StyleSheets, is one example and provides many useful features that speed up writing CSS, maintaining a CSS design code base, and ultimately aids in the faster completion of projects.

So what really is SASS?

Well, it’s not complex – it’s just CSS3. Any CSS you write will work just as it would if you were not using Sass. What Sass does is it extends CSS, making it more powerful. In reality, Sass is just a bunch of .scss files that compile down to one or more .css files.

How to Get Started

In order to start writing Sass code, you’ll need to have it installed.

The best and easiest way to install Sass is to use an extension. For Visual Studio, you can use Mindscape Web Workbench, SassyStudio, or Web Essentials. I’ve found Mindscape Web Workbench to be reliable, and it comes with other nice features for Visual Studio. (You could also try out a stand-alone program like Scout, or if you’re on a Mac, you can download the Compass app. 

Once the extension is installed (and enabled), Mindscape Web Workbench will also install and enable Sass (and its dependencies) for you, so you won’t need to do anything else.

Get Your Project Setup

In your CSS folder for your project/solution, you’ll first need to create some .scss files. A good practice would be to create a Main.scss file. When you save your project, this file will automatically compile and create a Main.css file for you. The Main.css file is what you will want to link to in your HTML head.

If you’re creating a mobile-first website, you might also want to create a handful of other files: _smartphone.scss, _tablet.scss, _desktop.scss, and so on. You could also separate your Sass file by features, such as _nav.scss, _typography.scss, _grid.scss, just to name a few.

Take notice the underscore before the filenames above – this tells Sass to not compile this file into its own CSS file. Instead, in our Main.scss file, we will import these modular Sass files and let them compile into the Main.css file. In your Main.scss file, write this line of code to import your grid: @import “grid”; That’s all you need to import other Sass files – it should look similar to importing CSS files without Sass. Keeping your code modular in this manner is one of the best features for creating reusable code. Ordering is important, though – just like with regular CSS, inheritance comes into play.

Writing Your First Sass Code – Variables

Now that our project is set up, let’s start writing code. If you’re working from a Photoshop mockup, you might have some colors you need to use in your website design. We can start writing Sass by setting up some variables – these are reusable declarations of code we can use across our Sass and CSS. Let’s make a variable for red:

$red: #c00;

We can now use this variable any place we might declare a background color or text color:

body { background-color: $red; }

When your Sass compiles to your CSS file, the output will look like normal CSS:

body { background-color: #c00; }

You can declare other things besides colors, as well: numbers, strings of text, font names, and responsive breakpoints – anything you want, actually! Variables are very handy for creating code snippets, too – you’ll never have to use find and replace to change your code again.

Another handy feature of Sass is changing the tint of a color on the fly. Let’s say we want to make our red color from above lighter. We can do that easily with this code:

body { background-color: lighten($red,10%); }

This Sass code will take our red color, lighten it by 10%, and automatically generate the hex code in our compiled Main.css file. You can also darken the tint of a color by replacing lighten with darken above.

Nesting

Nesting will speed up your code production by reducing the amount of code you need to write. A good example here would be styling tables, rows, and cells:

table {
          background:#fff;
          tr {
                   border-top:1px solid #000;
                   td {
                             color:$red;
                       }
              }
}

This code will output/compile as:

table { background:#fff; }
table tr { border-top:1px solid #000; }
table tr td { color:#c00;}

Mixins

Mixins are another part of the Sass way of creating reusable and clean code. A good example would be vendor prefixes – we can create a mixin that declares vendor prefixes once so we don’t have repeat ourselves in our Sass document. A good example would be writing a mixin for the border-radius property:

@mixin border-radius($radius){
          -moz-border-radius: $radius;
          -webkit-border-radius: $radius;
          -ms-border-radius: $radius;
          border-radius: $radius;
          }

When we go to write our CSS for border-radius, we can include our mixin (the Sass term for using a mixin) like so:

.button {
          @include border-radius(5px);
}

Our compiled CSS code will look like this:

.button {
           -moz-border-radius: 5px; 
           -webkit-border-radius: 5px; 
           -ms-border-radius: 5px;
           border-radius: 5px;
}

The only gotcha here is that you need to write your code for your mixins before or above your code where you start including them. A good practice would be to keep your mixins in a _mixins.scss file, and declare an import for it at the top of your Main.scss file.

Learn More Sass

That’s just scratching the surface of what Sass can do: you can also write loops, if statements, and even complex math operations to help you write better CSS code. The power and beauty of Sass lets designers write DRY code – or Don’t Repeat Yourself code – and brings designers closer to the development realm. Be sure to try out using Sass in your next project, and read through the resources below to learn more about Sass and its syntax.

Resources
The Sass Project – http://sass-lang.com/
The Sass Way – http://thesassway.com/
Dry-ing Out Your Sass Mixins – http://alistapart.com/article/dry-ing-out-your-sass-mixins
Bootstrap Framework Written Using Sass – https://github.com/twbs/bootstrap-sass
More Sass Tools: http://mashable.com/2013/06/11/sass-compass-tools/