Webdesigntuts+ |
- Setting up Foundation With Sass and Compass
- Complete the Tuts+ Survey and Win Prizes
- Building Content Hierarchy Through Design
| Setting up Foundation With Sass and Compass Posted: 02 Oct 2013 09:42 AM PDT  Sass is a great way to speed up front-end development in general, I use it in every one of my projects. Sass (as with all other preprocessors) allows for nested styles, functions and prewritten code in what are called mixins. Foundation has a few different versions, currently we’ve covered the most common HTML/CSS variants, but now let’s talk about a version built on Sass. The team behind Foundation have not only used Sass to allow more friendly and dynamic styling, but they also offer greater customisation in the Sass version than in the HTML/CSS version. Sass is great for those of you who, like me, are designers first and coders second. HTML and CSS are easy enough to learn and get the job done, but it’s a big jump to go from those simplistic languages to jQuery and JavaScript. Using Sass allows you to flirt with the idea of functions, variables, and reusable code which really helps in the transition toward more complex languages. Getting Started: OS XWe’re going to dive right in here, and we’ll need to use terminal/command prompt to do so, but don’t be put off as it’s easier than it looks. To get going open up Terminal (OS X) and paste in the following:
It may take some time to process, but should result in a screen like this:  Once you have completed this step, you’ll have essentially added the Foundation core to your system, allowing you to reuse it as you please without having to go to the Foundation site. What’s cool about taking this approach is that with another simple command you can update this core reusable framework to either the latest public build or release candidate. To do this simply paste one of the following into terminal:
There’s one final step of setup and that’s to install Compass, which will allow us to create builds of Foundation for use in our projects. Again, this may take some time so be patient. Paste in the following:
After installing you should have a Terminal output that looks like this:  Now that we have traversed the twists and turns of installing a ruby gem and keeping it up-to-date, let’s setup a project so we can begin to analyse this route of developing with Foundation. Project Setup: OS XWhenever you want to start a new project simply open up terminal and type “cd” (change directory), without the speech marks, then you’ll need to either type in a path, or create a folder for your project and drag it in to terminal. Make sure there’s a space between “cd” and your path, though. Follow this with a command that will actually create your project:
Ensure you change the “YOUR-PROJECT-NAME” text for your actual project name and hit return. You’ll then see many many lines of information resulting in a choice. This choice dictates whether your Sass files will be converted to CSS files whenever you save them, or manually when you choose to convert them. I always use the second choice, which automatically creates CSS files whenever I save my Sass files. You should see something like this:  You can see from this that a lot has happened and your Foundation-based project is born. Once you’ve chosen your compile method by using the “compass compile” or “compass watch” method, you may want to grab the code that you can see at the bottom of the image. This will just save you some time as it adds your output stylesheet and normalize. From here you can start actually building your project using Sass. Getting Started: WindowsIf you’re using Windows you can still use the Sass version of Foundation, it just takes a few more steps to get going. First off, let’s go grab Ruby. Ruby is what will allow us to install this Sass-based version of Foundation. Unlike OS X, Windows does not have this installed by default, so we’ll need to go get it. Now you’ll want the latest version (2.0.0 at time of writing) and depending on what architecture you are using, pick either the standard for 32-bit machines or x64 for 64-bit machines. If you are unsure which, you have to simply right-click “My Computer” and click “Properties” to find out. Failing that, go with 32-bit. Once downloaded, run through the install. Don’t tick/change anything unless you know what you are doing. After installation is complete go to programs, then Ruby and click “Start Command Prompt with Ruby”. Once that has loaded up copy the following code and paste into the command prompt, you can do this by right clicking on the top bar and going to edit > paste.
You’ll see something similair to this:  You can also keep Foundation up-to-date using either the general public build command or the release candidate command:
Now that we have the basics setup, let’s go ahead and install the final piece, Compass. Just like before, we can install Compass using a command:
Be patient, this will result in a screen like this:  Project Setup: WindowsTo actually create your project you’ll need to switch to a directory such as “Desktop” and run a command. You can do this by typing “cd” without the speech marks, followed by a space, followed by a path. To add the path itself you can either type one in, or simply drag and drop the folder into the command prompt. Once you have changed directory, run this command, and be sure to change YOUR-PROJECT-NAME for your actual project name.
 And that’s it! Following this there aren’t any differences between Windows and OS X. Useful ToolIf you do use OS X there’s a great development tool called CodeKit. This application automatically minifies JS, CSS, SCSS- and converts SCSS to CSS, meaning you can kill terminal and use CodeKit instead. It also offers error highlighting for both JS and SCSS, including libraries such as jQuery.  I know what you’re thinking; “I don’t have OS X”. No worries, I haven’t forgotten about you Windows people- you can grab the closest equivalent application called Prepros.  Coming Up..In the next part we’ll be looking at what you can do with this more dynamic Sass-based version of Foundation, including customising the build, changing default styles and much more.  |
| Complete the Tuts+ Survey and Win Prizes Posted: 02 Oct 2013 07:00 AM PDT  Tell us what you think, and get the chance to win fantastic prizes worth a total of $14,634! We love the community of readers we have at Tuts+ and your opinion is incredibly valuable to us. This week, we're giving you the chance to have your say about Tuts+, and win a few outstanding prizes at the same time. Read on to find out how to get involved and stand a chance of winning one of our prize bundles. The PrizesWe have several fantastic prize bundles up for grabs! The winning entries will be chosen by the Tuts+ team based on the most interesting and memorable 50 word responses to the prize question. As an additional bonus, everyone who completes the survey will receive a coupon code for 50% off their first month’s membership of Tuts+ Premium (only valid for new members). It just takes a few minutes to complete the survey, and we really value your opinion. You will play a very important role in helping us make Tuts+ better than ever. Follow the link below to complete the survey, or read on to find out more about the amazing prizes up for grabs! Grand Prize Winner (x1)
Runner Up (x1)
Honourable Mentions (x3)
Editor Favourites (x5)
Prize Sponsors
The SurveyIt just takes a few minutes to complete the survey, and we really value your opinion. You will play a very important role in helping us improve Tuts+ and bring you better content and services. We'll be using the information we get from our readers to make Tuts+ better than ever! Competition Rules
Thanks for taking the time to share your thoughts about Tuts+. We really appreciate it, and look forward to hearing what you have to say!  |
| Building Content Hierarchy Through Design Posted: 02 Oct 2013 05:25 AM PDT  Way back at the beginning of this series, we talked a lot about content and the importance content has in any design work. It's something that should obviously be looked at and sorted through before you start any project, but you only get to see the real results of this work once you begin designing. When working with content at the beginning of the process, we should try to nail down a structure that works for the content. Also think back to the sketching and wireframing stages of the process. Here, we looked at the ideas we had for laying out our content in a way that worked well and had a good hierarchy to it. Now, we want to make that content hierarchy work visibly and visually through our designs.  So how do we do that? First up we need to decide what in our content is relevant to our users and why so – we need to be able to justify the decisions we make. We also need to look at what needs to be the focus in our content, the bit of information that we really want our users to pay attention to. Then, we need to start translating this into a more visual form. We do this by laying out the content in a way that relates to our original desired content structure. This isn't just about headings and paragraphs either, we need to think more about how the content reads once it's on the page, and the emphasis that needs to be placed on all the different elements. Once we have some basic content in place, we can start to use different tools and aids to help focus our attention on making the certain bits that need to be emphasised stronger and stand out more.  Tools and Aids to Help YouSize & ContrastThe size can relate to both the size of the individual bits of content you have in your design as well as other elements, such as imagery, and how these play off against each other. For example, use size to draw attention to main headings. Ensuring that they are perhaps larger than the main content shows that they have a different level of importance and are something that the user needs to pay attention to. Size is also good for breaking up the content on your page into smaller chunks and emphasising small parts of content that are important. You can also use size to take the emphasis away from certain elements or bits of content that you want to be less noticeable or aren't as important as the rest. This also ties in heavily to contrast – creating a more visual content hierarchy that is quite contrasting adds to the visual impact in your design. Font Weights & Font StylesUsing font weights and styles cleverly is a great way to add more subtle emphasis to parts of your content that might be interspersed and dotted around with the rest of the main content that you have. Using font weights that are heavier than the rest of your content (such as a bold version of a typeface you have in your design) or in a different font style (such as italic) can be great for adding emphasis to little bits of content you might want to pull out and give a bit more recognition, without overpowering the rest of the design. Also use font weights and styles to add impact and strong emphasis to your designs. For example, if the design style permits, then using a 'light' weight of a typeface (which is often much thinner than standard font weights) can work well to add impact to large headings, like the example you can see below.  ColourVarying colour is another effective with which you can divide and display content in your designs. This doesn't mean you go splashing colour everywhere, instead use it to subtly add focus to areas of your design, either by blocking off areas of content or using it within your content to add emphasis to text that might require it. Position & AlignmentHow you position your content has a big impact on how it's perceived by your users. Ensuring that you work to your grid system and align your content well is super important. Alignment also creates order in your design, helping to tell the story of your website and guide your users on a journey through your website.  Proximity & WhitespaceLooking at how close or far apart elements in your design are spaced is essential to building a visual content hierarchy that has impact and makes sense. If elements which are related are too far apart, it will break the flow for the user when they're reading the page. However, the same can be said for elements that are spaced far too close together. Things which are too cramped are going to be difficult to understand in terms of what has the most importance or should have the most emphasis. As a user, it's then going to be difficult to understand how to find your way around.  AssignmentsNow you know about different ways you can add visual weight or emphasis to particular elements, I want you to put it into practice in your own design. Try to integrate one of each of the techniques displayed above to add more of a visual content hierarchy into your design.  |
| You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment