為Sass用戶準備的 25個新鮮資源

jopen 11年前發布 | 7K 次閱讀 sass

Sass是CSS擴展語言的一個非常穩定的版本，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

Profound Grid

If you are looking to create fixed or fluid layouts for your next project, this particular resource offers a powerful and flexible way for you to achieve that. It will equip you to do, you work efficiently and with a lot of ease.

Gridle

This is a grid system, as may be evident by the name. It was created using Sass and it includes loads of customizing for displaying data beautifully on your devices such as the iPad, iPhone and other smart handheld.

Frameless Grid

If you are one of those developers who is a fan of responsive design (as one should be these days) and you hate fluid grids, you may want to try out the frameless grid. This particular grid will adapt to your design not based on pixels, but based on columns. You will be pleased with the results.

Salsa

If you are familiar with the version 2 of Susy, you will see this resource as a part of it. If you are one of those that prefer simple and pretty much a featureless grid system, Salsa is your way to go.

Table Grid System

This particular resource utilizes tables at its base. This is a rather simple but elegantly beautiful grid system that you will find very useful for quite a lot of your projects. You can thank the developer later.

Grid by Chris Coleman

If you are looking to create websites that seem elegant and are seamlessly balanced, you may want to try out this grid system that presents an optimal combination of columns and clutters. Makes the job easier, while empowering it with beauty.

Results Grid

This particular grid system was created by Ehren Coker based on Sass. It leverages inline blocks, floating elements and media queries in order to provide you with a system that will work flawlessly across a variety of devices in use these days.

Glitched Text

This is a code snippet which allows you to display a really cool effect to your project. It may look scary at first, but once you are warmed up to it, you will notice it is actually quite unique and distinct. You can apply the effect to images and text.

Flat button Generator

If you are looking to use flat styled buttons on your website, you may want to use this generator. It is graceful and quite effective at the same time.

Clean Sticky Footer

If you are running a parallax-based website, you will be pleased with this sticky bar that is fixed at the bottom. You display your offers and other news in this sticky footer. You can also display a navigation with the footer to enhance the overall experience.

Ghost Buttons

While these may not look like buttons, they actually are and they are rather simple to create too. Referred to as ghost buttons, they have a subtle line surrounding them and an active hover effect. It is a definite must for any website these days.

Mixin for Targeting iPad

This particular resources is for users who are willing to calibrate their websites to an iPad device. It is a helpful solution.

Radial-Gradient SASS Mixin

While gradient are not all that popular these days anymore, some website still employ the use of gradients, and if you are running one with gradients on it, then this tool is a must try for you.

Font-Size Mixin

This will take your font size along with the units and generate a font-size CSS declaration. It will also include fallbacks in case somebody is running older browsers.

Long Shadow Generator

The designs have gone flat, and one thing that compliment a flat icon is a long shadow. This is your resource to make those beautiful long shadows and add elegance to the entire look.

Buttons

This particular set includes loads of flat styled buttons with their distinct contours. They are presented with a solid and hollow look. You can use whichever you prefer.

Switches

This is pretty much the same as the previous resource. the only difference is that you make switches instead of buttons.

Map Magic, Buttons

This resource will provide you with pre-defined buttons for call-to-action, dribbble, github, and 推ter etc. You can use the same technique behind this and create other graphical elements if you require.

Responsive Menu

This particular snipped is rather helpful as it will let you add a compact slide out navigation menu on your website. The bar is responsive too.

Search Engine UI

This is a user-interface for a search line. It will generate the search box dynamically, and neatly format the search results. You will be offered a small horizontal navigation as well.

Marv

This resource offers loads of different instruments that offer improvement in the WordPress theme development. The instruments also use LESS and CoffeeScript.