neat - A lightweight and flexible Sass grid

We have collection of more than 1 Million open source products ranging from Enterprise product to small libraries in all platforms. We aggregate information from all open source repositories. Search and find the best for your needs. Check out projects section.

neat - A lightweight and flexible Sass grid

Neat is a fluid grid framework with the aim of being easy enough to use out of the box and flexible enough to customize down the road. Alternatively, you can install Neat with Bower.

http://neat.bourbon.io
https://github.com/thoughtbot/neat

Tags	scss sass grid bourbon grid-framework css bourbon-family columns layout media media-queries neat queries semantic eyeglass-module
Implementation	CSS
License	MIT
Platform

Related Projects

neat - A semantic, fluid grid framework on top of Sass and Bourbon

Ruby

A semantic, fluid grid framework on top of Sass and Bourbon

bourbon - A Lightweight Sass Tool Set

Ruby

Bourbon is a library of Sass mixins and functions that are designed to make you a more efficient style sheet author. Alternatively, you can install Bourbon with Bower.

sass bourbon-family css scss bourbon sass-mixins sass-library sass-functions eyeglass-module mixins

some-like-it-neat - A WordPress Theme Using _s, Bourbon + Neat and Theme Hook Alliance

Some Like it Neat is a Minimal Starter theme that is Responsive out of the box. It uses Sass along with Bourbon Neat for help with Responsive grids. It's based on _s and is pretty rad. Bourbon provides a lightweight Sass library (similar to Compass).

include-media - 📐 Simple, elegant and maintainable media queries in Sass

include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax. I spent quite some time experimenting with different libraries and mixins available out there, but eventually all of them failed to do everything I needed in an elegant way. Some of them wouldn't let me mix set breakpoints with case-specific values, others wouldn't properly handle the CSS OR operator and most of them had a syntax that I found complicated and unnatural.

sass scss mediaquery breakpoint eyeglass-module

refills - Components and patterns built with Bourbon and Neat

Follow the @bourbonsass Twitter account for updates. It’s recommended that you use Autoprefixer, as Refills do not come packaged with vendor prefixes.

bourbon refills snippets bourbon-family css sass scss front-end components

mueller - MUELLER is a modular grid system for responsive/adaptive and non-responsive layouts, based on Compass

Modular Grid System. MUELLER is a modular grid system for responsive/adaptive and non-responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media-queries.

layout grid sass compass responsive adaptive rwd

breakpoint - Really simple media queries in Sass

Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best. Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.

sass responsive rwd eyeglass-module breakpoint

breakpoint - Breakpoint is a column based media query generator and responsive image framework.

Javascript

Breakpoint is a grid system and responsive image solution. It's based on the concept that columns shouldn't stretch but get added or taken away as the screen changes size. This concept was taken from the Frameless Grid system developed by Joni Korpi. The Breakpoint grid is also floatless by using inline-block cells and border box sizing. This layout technique is taken from Griddle by Nicolas Gallagher. Breakpoint generates media queries at column break points that you determine. You can also label your media queries which allows JavaScript to pair them with responsive image sources. If you want to use Breakpoint for responsive images you need jQuery and EventEmitter. While not a requirement, you can get enhanced deferreds/callbacks when working with responsive images by installing imagesLoaded.

Singularity - Grids without limits

Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use. Layout on the web has changed significantly since Scott's first push back on March 7, 2012. First came Flexbox, then CSS Grid. CSS Grid provides layout functionality that covers all of Singularity's usecases and then quite a few more that we were never really able to support.

sass responsive rwd eyeglass-module singularity layout grid semantic

sass-mq - A Sass mixin that helps you compose media queries in an elegant way.

mq() is a Sass mixin that helps you compose media queries in an elegant way. Sass MQ was crafted in-house at the Guardian. Today, many more companies and developers are using it in their projects: see who uses Sass MQ.

responsive sass rwd mediaquery query queries media eyeglass-module

breakpoint-slicer - A very quick and efficient syntax for Breakpoint

Along with Respond To, Breakpoint Slicer is an alternative syntax for Breakpoint. It offers a powerful yet very simple way to slice your media queries. See those spans between breakpoints? Let's name them "slices".

breakpoint slicer media query queries responsive web design rwd sass scss eyeglass-module

susy - Responsive layout toolkit for Sass

Susy is a design-agnostic set of tools for creating powerful, custom layouts. We didn't want another grid system full of rules and restrictions — we wanted a power tool for building our own damn systems. Version Three is trimmed down to it's most basic components — functions that can be used to build any grid system. There are two imports to choose from. The default sass/susy comes with un-prefixed versions of the core API functions. If you want Susy to be name-spaced, import sass/susy-prefix instead.

layout grid sass responsive rwd semantic eyeglass-module

pure - A set of small, responsive CSS modules that you can use in every web project.

HTML

Now, all Pure CSS files should be built into the `pure/build/` directory. Allfiles that are in this build directory are also available on the CDN. The namingconventions of the files in the `build/` directory follow these rules:* `[module]-core.css`: The minimal set of styles, ususally structural, that provide the base on which the rest of the module's styles build.* `[module]-nr.css`: Rollup of `[module]-core.css` + `[module].css` + `[module]-[feature].css` from the `src/[module]/` dir. This i

sass-mediaqueries

Ruby

It is a collection of useful media queries mixins for Sass. Great extension for compass or bourbon.

sassCore - 一份基础的scss库，包括常用reset, mixin, grids, typo, css3, media queries等多个文件，是你sass开发的必备库

一份基础的scss库，包括常用reset, mixin, grids, typo, css3, media queries等多个文件，是你sass开发的必备库

avalanche - Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers. $av-namespace Global prefix for layout and cell class names. Default: grid.

css sass scss bem grid-layout grid oocss

foundation-sites - The most advanced responsive front-end framework in the world

HTML

Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototype to production, building sites or apps that work on any kind of device with Foundation. Includes a fully customizable, responsive grid, a large library of Sass mixins, commonly used JavaScript plugins, and full accessibility support. Foundation has three kinds of tests: JavaScript, Sass, and visual regression. Refer to our testing guide for more details.

css scss sass js responsive mobile-first framework eyeglass-module handlebars-helper-rel handlebars-helper-slugify

gridlex - Just a CSS Flexbox Grid System

Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules. The concept is simple: you need to wrap your .col in a .grid.

css sass grid css3 scss css-grid flexbox-grid col mediaqueries flexbox

flint - Flint is a powerful Sass grid framework designed for rapid responsive development.

Flint is a responsive grid framework written in Sass, created to allow developers to rapidly produce responsive layouts that are built on a sophisticated foundation. Most notably? The syntax. Being a designer myself, a large amount of time was spent on this aspect. Flint is very unique in the fact that it uses only a single mixin for all output: _(...).

grid-system grid-framework framework ui grid layout flint breakpoint breakpoints semantic responsive-web-design

Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css is a lightweight, responsive and modern CSS framework. Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.