Sass Mixins Library
Usage & Installation Install for Rails 3.1+ In your Gemfile: Then run: Restart your server. mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss Delete the sprocket directive in application.css.scss: Import Bourbon at the beginning of application.css.scss. @import "bourbon";@import "home";@import "users"; Install for a Non-Rails App Installation Install the gem Install Bourbon into your project's stylesheets directory by generating the bourbon folder: The generated folder will contain all the mixins and other necessary Bourbon files. Sass Watch Run a standard sass --watch from the command line: $ sass --watch stylesheets/sass:stylesheets Lastly, import the mixins at the beginning of your stylesheet(s): @import 'bourbon/bourbon'; Other Commands See the complete list of Command Line Tools. $ bourbon help$ bourbon update Using Rails 3.0.x?
Highlighting current page with CSS
With handy online resources such as List-o-Matic, its now easier than ever to use unordered lists to create navigation. As an extra help to users, why not highlight the current page in the navigation? A recent article on A List Apart called Keeping Navigation current, showed how to do this with PHP. Here’s an easy solution using CSS. First we’ll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway: <ul id="navlist"><li><a href="index.html" >Home</a></li><li><a href="products.html">Products</a></li><li><a href="faq.html">FAQ</a></li><li><a href="contact.html">contact us</a></li></ul> Next we need to add a unique class or id (doesn’t really matter which) to each of the section pages: <ul id="navlist"><li><a href="index.html" id="homenav">Home</a></li><li><a href="products.html" id="prodnav">Products</a></li><li><a href="faq.html" id="faqnav">FAQ</a></li><li><a href="contact.html" id="connav">contact us</a></li></ul>
10 open source e-learning projects to watch - Collaboration - Open Source
As corporate and government organizations embrace the Web for delivering more education and training programs, a wealth of free and open source e-learning applications will help lower the barrier to entry. TechWorld looks at the options. ATutor ATutor is a Web-based learning content management system (LCMS) designed for accessibility and adaptability by the Adaptive Technology Resource Centre at the University of Toronto. Like Moodle, ATutor is a PHP application with some 25,000 registered installations. Web site: Licence: GPL Commercial support: Project home Developed with: PHP Claroline Claroline is an e-learning and "e-working" platform allowing teachers to build online courses and to manage learning and collaborative activities on the Web. Claroline is organized around the concept of "spaces" related to a course or a pedagogical activity. Web site: Licence: GPL Commercial support: Developed with: PHP Dokeos eFront
css
Mastering Sass extends and placeholders | 8 Gram Gorilla
It all begins with the @extend... It’s probably a safe bet you have heard of Sass, and for good reason too as using it really gives you an opportunity to organise and improve how you develop CSS. Before working at Primate I hadn’t had the chance to use Sass as part of my day job but I had experimented a little outside work. Now after telling you how awesome Sass is, I’m also going to tell you how you can use it to produce some really ugly and bloated CSS, ha! One of the cool and useful features of Sass is the @extend keyword. @extends are really handy and they let you introduce code to re-use in your stylesheets in the same way you would do if you were coding straight CSS. Should you @extend a class selector? When you read the @extend documentation, the majority of the samples give an example of extending a class selector in the following way: @extend .error;. As an example, let’s imagine you define a base block of styles with the class .standard_button. @extend placeholders for CSS Zen
960 Grid System
Using fullscreen mode - Document Object Model (DOM)
This is an experimental technologyBecause this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes. The fullscreen API provides an easy way for web content to be presented using the user's entire screen. This article provides information about using this API. Note: This API is early in the standardization process. The API lets you easily direct the browser to make an element and its children, if any, occupy the fullscreen, eliminating all browser user interface and other applications from the screen for the duration. Activating fullscreen mode Note: The specification uses the label, "Fullscreen" as in "requestFullscreen" or "fullscreenEnabled" - without a capital 's'. Let's consider this <video> element: We can put that video into fullscreen mode with script like this: Example
Kick-Start Your Project: A Collection of Handy CSS Snippets
Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project. In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while making a website. Today we are going to see how we can continue this exercise with some things a little bit more technical. Indeed, isn’t there some properties or CSS tricks you always have to check the syntax for, every single time you want to use them? Of course you do my friends! Before we go, let me tell you how I divided this article: Shorthand classes Let’s begin with shorthand classes, which are a very common things. The best example is probably the one where you have some text and an image you want to include on the left side of the text. Nothing more. Design-related snippets Miscellaneous
18 Useful Twitter Boostrap Goodies You Should Know
Introduction Twitter Bootstrap is one of my favourite framework for quick website prototyping and default style for my CMS. If you don't know about Twitter Bootstrap, it's a simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. Created by the developers from Twitter, this great tool contains base CSS, grid, responsive, general styling, UI components and javascript plugins that can speed up your development process. I have been using it for a while now, it allowed me to have full concentration on the functionality of the website instead of cross browsing testing and styling. In this post, I have found many useful tools, plugins and themes created specifically for Twitter Bootstrap. Update I also created a post about third party Twitter Bootstrap javascript plugins - Extend Twitter Bootstrap Javascript Plugins. Everybody seems to like this post a lot, it's mentioned on The Treehouse Show! Tools - Wireframing, Generators and Template
