• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Choosing a WooCommerce Theme? Here’s What Most Store Owners Get Wrong

      May 9, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Frameworks Built with SASS CSS Preprocessor

0
  • by Gavin
  • In CSS · DEVELOPMENT
  • — 18 Jul, 2014

CSS provides many advantages towards accessibility, as well as providing the ability to custom-tailor a page or site for various target devices; which- despite certain devices not being able to understand the styling, they will still go onto displaying the content.

CSS preprocessors process text file, and output exact CSS what we need. Exactly what that text file contains depends on the individual preprocessor, but both SASS and LESS are a superset of CSS. They include everything already in the CSS specification plus additional features. A major benefit of which is that if you know CSS, you can already write valid LESS and SASS, and just need to learn a few extra tricks.

In this article we have gathered a list of CSS Frameworks built with Sass CSS preprocessor, that will help you to build dynamic web application quickly and without any hassle.

1. Bootstrap

Bootstrap
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by Mark Otto and Jacob Thornton, It is built with Less and Sass and consists of base CSS + HTML for typography, forms, buttons, tables, grids, navigation, and some more. The grid provided is 940px wide 16-column and, for the layouts, there are solutions for both fixed + fluid ones. Twitter Bootstrap’s HTML elements have a plain-yet-elegant style where form inputs get a nice box-shadow on focus or table rows being highlighted.

2. Foundation

foundation
Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.

3. YAML

yaml
YAML is a modular CSS framework for truly flexible, accessible and responsive websites. The framework is focussed on device independent screen design and provides bullet-proof modules for flexible layouts. Apart from this, the developer of YAML Dirk Jesse has come up with this framework keeping into mind the web standards. In addition, this CSS framework comes complete with a YAML Builder.

4. 1kb Grid

1kbgrid
Simple grid system inspired by the the 1KB CSS Grid designed to utilize Sass to remove unnecessary classes from the HTML markup and make customization easier. The best part is that it’s not exactly 1KB now! Even better than the best part is that it’s been extended to support fluid grids as well.

5. xCSS

xcss
xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features.

6. Helium

helium
Helium is a frontend responsive web framework for rapid prototyping and production-ready development using HTML5 and CSS3. In many ways it is similar to both Twitter Bootstrap and ZURB Foundation – in fact, it uses bits of their code. Unlike either of these two frameworks, however, Helium is designed to be much more lightweight and easier to tinker with.

7. Groundwork CSS

groundwork
GroundworkCSS’s flexible grid system enables you to do rapid development and scales to fit any screen size, from handheld devices to large format televisions.

8. Gumby

gumby
Gumby Framework is a flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit. It is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.

9. Unsemantic

Unsemantic CSS Framework
Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.

10. Maple

maple
Realistic preprocessors-based CSS framework for mobile.

11. Kickoff

kickoff
Kickoff is a lightweight front-end framework for building scalable, responsive websites. It’s built with Sass and Grunt, and released under the MIT License.

12. Susy

susy
The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.

13. Inuit.css

inuitcss
Inuit is a Sass based, Object Oriented framework that is full of objects and abstractions. inuit.css provides little-to-no design which means no undoing things, no deleting CSS and no adhering to other peoples’ design decisions.

14. Seelva

seelva
Seelva is a CSS and HTML Framework built with SASS and Compass. It features a fixed 960px 24 columns grid that can be modified through SASS.

15. Bourbon Neat

Bourbon Neat
Neat is a semantic grid framework built on top of Sass and Bourbon. It is simple enough to get you up and running in minutes, and powerful enough to handle any responsive layout you can dream of.

Share

Tags: css framework sass preprocessorcss frameworkscss preprocessorSass css preoprocessor

— Gavin

A Web addicted Geek stuck inside Tron.

  • Previous story Creating a Flat Style Accordion Using CSS3 and jQuery
  • Next story 10 Free HTML Video Conversion Tools

You may also like...

  • Fresh Tools for Web Developer – December 2015
  • become a developer Process of Becoming a Web Developer
  • optimize devops methodology 5 Strategic Practices To Optimize Your DevOps Methodology
  • jQuery Slider Plugins for Developers

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • CSS
    • Frameworks Built with SASS CSS Preprocessor
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM