Displaying 1 to 20 from 38 results

neat - A lightweight and flexible Sass grid

  •    CSS

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.

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.

susy - Responsive layout toolkit for Sass

  •    CSS

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.

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.




hamburgers - Tasty CSS-animated Hamburgers

  •    CSS

Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger. You can use <div>s if you insist, but they’re not accessible as a menu button.

plex - The package of IBM’s typeface, IBM Plex.

  •    Python

Meet IBM Plex, our new corporate typeface. It’s global, it’s versatile and it’s distinctly IBM. We designed Plex carefully to both meet our needs as a global tech company and express who we are as people. It took two years and a lot of work to get here, but today we have a signature typeface we’re proud and excited to share with the world. Plex is an open-source project (OFL) and free to download and use. The Plex family comes in a Sans, Serif, Mono and Sans Condensed, all with roman and true italics. The fonts have been designed to work well in user interface (UI) environments as well as other mediums. This project provides all source files and file formats to support most typographical situations.

bootstrap-sass - Official Sass port of Bootstrap 2 and 3.

  •    Ruby

bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications. This is Bootstrap 3. For Bootstrap 4 use the Bootstrap rubygem if you use Ruby, and the main repo otherwise.

scut - Sass utilities for the frontend laborer.

  •    CSS

— a collection of Sass utilities to ease and improve our implementations of common style-code patterns. For a prolonged introduction to Scut, read "Introducing Scut" on CSS-Tricks.


carbon-components - The component library behind Carbon Design System

  •    Javascript

The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles. The component library gives developers a collection of re-usable HTML and SCSS partials for building their products.

family

  •    CSS

Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy and classy way. Otherwise import the Family.scss source file.

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

  •    CSS

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.

Singularity - Grids without limits

  •    CSS

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.

toolkit - Toolkit for Responsive Web Design and Progressive Enhancement with Compass

  •    CSS

Think of Toolkit as your swiss army knife for modern design and development. Those little bits and bobs that make your life easy and you want to reuse throughout projects but never really had a place to put? They're here, and they're designed to make your life happy. Toolkit is broken out into individual pieces, so grab what you want, grab what you need, or grab the lot; the choice is yours. Then, add require 'toolkit' to your config.rb file and @import "toolkit"; to your Sass file.

typi - A sass mixin to make responsive typography easy

  •    CSS

Typi does two things for you incredibly well. Here's a quickie example for both points.

modularscale-sass - Modular scale calculator built into your Sass

  •    CSS

A modular scale is a list of values that share the same relationship. These values are often used to size type and create a sense of harmony in a design. Proportions within modular scales are all around us from the spacing of the joints on our fingers to branches on trees. These natural proportions have been used since the time of the ancient Greeks in architecture and design and can be a tremendously helpful tool to leverage for web designers. Ems work especially well with modular scales as their recursive properties mimic modular scales making them more predictable and easier to manage. Pixels and other units work just fine and breakpoints in responsive web design can naturally fall on your scale to create better relevance to your text as all the values in your layout harmonize with each other.

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

  •    CSS

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.

breakpoint - Really simple media queries in Sass

  •    CSS

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.

Gutenberg - Modern framework to print the web correctly

  •    CSS

Simply include the right stylesheet(s) in your html and load it only for a printer. Gutenberg.css is the base stylesheet but there are themes available in the themes folder. You can also use the unpkg service as a CDN.

true - Sass unit tests

  •    CSS

True is a unit-testing tool for Sass code – initially developed for the Susy layout toolkit. All of the test code is written in pure Sass, and can be compiled by any Sass compiler – but we also provide integration with Mocha JS, for extra features and improved reporting. True the wheels of a bicycle after striking a pothole.

utility-opentype - Simple, CSS utility classes for advanced typographic features.

  •    CSS

This is described in more detail in the design decisions. The following examples are supported on Chrome, Firefox, and Internet Explorer 10+ and fallback as gracefully elsewhere. Works on its own, or alongside frameworks like Basscss. That’s it! You’re ready to use the classes within your markup.