Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Sass’

Extra Strength Responsive Grids is a CSS framework that comes with solutions to various issues experienced in responsive layouts.

The framework is completely grid-focused (no styles for typography, tables, forms, etc.) and uses percentage-based width adjustments.

Extra Strength Responsive Grids

For smaller screens, besides using less columns, elements can be resized smartly.

Also, it has support for nested grids and the framework is built on top of SASS that allows any quick customizations.

Scout is a free application (with Windows and Mac versions) that allows anyone to make use of Compass and Sass without the complexity of Ruby + command line.

The application runs Sass and Compass in a self-contained Ruby environment, has support for defining multiple projects and various settings to customize the use.

Scout

Using Scout, we can define custom output folders (so that any generated CSS can be directly written into our project folders) and also set the style of the CSS (nested, compressed, etc.).

And, a logging interface displays every action performed by the app (with any errors occurred).

Many web designers now have a favorite front-end framework for developing sites easily.

Groundwork is another good alternative that is built with SASS + Compass and offers an advanced responsive layout.

Groundwork

It has a flexible,  fluid and nestable grid system which makes creating any layout possible.

The framework includes many UI components like tabs, buttons, forms, navigation, icons and more.

Groundwork is documented very well and there are templates to get started quickly.

Tooltips are usually created and triggered with JavaScript. But, CSS is now powerful enough to handle a simple tooltip functionality itself.

Hint.css is a tooltip library that is built with SASS and only uses CSS + HTML.

The library uses data attribute, content property, pseudo elements and CSS3 transitions.

Hint.css

Tooltips are simple-yet-good looking, has arrows and can be positioned on any side of the parent element.

And, they don’t have to be visible only when hovered but can be set as “always showing” too.

Front-end frameworks are easing the development process a lot and we are seeing new ones popping up regulary.

While Bootstrap and Foundation are the most popular ones, there are also others like HTML KickStart.

Maxmertkit is a fresh one that looks/feels a bit like Bootstrap but has different things to offer.

Maxmertkit

It uses SASS for the CSS part and includes styles for all major stuff like grid, typography, forms, tables, buttons and lists.

There are various widgets like buttons, tabs, grouped elements, badges, dropdowns, tooltips, menus and more.

And, some handy JavaScript components exist for notifications, carousel, buttons, modals, etc.

Like mentioned, it feels like Bootstrap on some parts but differentiates in details where one of them is the choice of the icon fonts which are Font Awesome and Zocial.

Maxmertkit is very well-documented and has lots of example for every part. There is even a drag ‘n’ drop code generator in its homepage.

  • Tags:
  • Filed under: CC License, Design, Xhtml & Css
  • 1 Comment
  • CSS sprites are perfect for minimizing the number of requests made to load the images and improving loading speed.

    However, for a sprite with many images, it takes time to create the sprite image and the CSS rules.

    SpriteMachine is a very straightforward web application for automating the sprite generation process.

    Sprite Machine

    Just upload the images in a .zip file, choose the sprite image orientation (horizontal or vertical) and there you are.

    One great thing about the app is, it also asks whether the rules generates should be in CSS, SCSS or SASS.

    Fiddle Salad is a fresh web development tool, an online IDE, for client-side web applications.

    It allows us to write HTML, CSS, JavaScript code or use alternatives like HAML,Zen Coding, SASS, LESS and more.

    All the code is written in a single-page interface and the output is displayed/rendered instantly.

    Fiddle Salad

    There is built-in code completion support for CSS + jQuery and links to the documentation for the properties of each language.

    With a free membership, it is possible to create any number of projects and save them for re-working on them without losing any settings or data.

    Compass is a stylesheet framework (and not only a collection of classes) for Ruby.

    Using Compass, you can still use the other css frameworks -blueprint, yui, 960- that are ported to Sass and they are ready to be used in your ruby-based web application or stand-alone via a simple command-line interface.

    Compass CSS Framework

    The framework comes with a detailed documentation on:

    You can also watch the podcast on how Compass works.

    Uptime Robot
    feed-holder
    FeedBurner
    HotScripts Marketplace
    PSD2HTML.com