eightpoint - An 8pt grid and modern reset focused on typography and accessibility

  •        5

Eightpoint is a CSS helper library built to help start projects quickly and maintain that quick rhythm by providing common components, a grid, readable typography and built in accessibility basics.

https://github.com/wulkano/eightpoint#readme

Tags
Implementation
License
Platform

   




Related Projects

cssnano - A modular minifier, built on top of the PostCSS ecosystem.

  •    CSS

A modular minifier, built on top of the PostCSS ecosystem. cssnano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately.

ally.js - JavaScript library to help modern web applications with accessibility concerns

  •    Javascript

ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. Its goal is to be A JavaScript library to help web applications with accessibility concerns. The intention is to separate these generic components from actual applications and other libraries.ally.js is published under the MIT License.

react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules

  •    Javascript

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules. Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

postcss-colorblind - A PostCSS plugin for seeing your site as a colorblind person may.

  •    Javascript

The biggest reason is that as many developers don't have problems seeing color, they never stop to consider that their (or their colleagues') choices of colors make their website unusable and frustrating to those who can't see some shades of color. It's not even a small problem either; lots of people struggle with red and green. However, there are JavaScript bookmarklets that let you do this on the fly without having to run a build step. I built this with the thought in mind you could create an automated step to create a report of how you're doing with color.

motherplate - A bare bones responsive SCSS boilerplate for web designers

  •    CSS

This is a bare bones HTML/CSS framework. This is what I'll typically start off most web projects with. It includes a CSS reset and a bunch of minimal boilerplate styles that should come in useful for any project, including a responsive grid, typography, buttons, icons and forms.


a11y

  •    CSS

Pronounced Alix. Because it’s simpler. The whole presentation lives in the wiki. Please note that a substantial work has been accomplished to document the whole project, from the Sass layer to each test explanations through CSS selectors and tricks. I suggest you make a tour on a11y.css documentation website.

postcss-preset-env - Convert modern CSS into something browsers understand

  •    CSS

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. Without any configuration options, PostCSS Preset Env enables Stage 2 features and supports all browsers.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

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

  •    CSS

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.

Less-Framework - An adaptive CSS grid system.

  •    CSS

Less Framework is a CSS grid system for designing adaptive web sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Solid knowledge of HTML and CSS is recommended. You'll find the dimensions for each layout noted down in comments within the CSS files.

bojler - Bojler is an email framework

  •    CSS

Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients. If you have experience with email template development, you know how painful it is to build a perfect email template that works across all email clients.

a11y-toggle - A tiny script for accessible content toggles.

  •    HTML

A tiny script (less than 0.6Kb gzipped) to build accessible content toggles. You can try the live demo which also acts as a documentation. a11y-toggle uses relatively modern JavaScript API (namely reduce, addEventListener, etc.) therefore will not work in Internet Explorer 8 and below. All the other browsers, including mobile ones should work fine.

eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements.

  •    Javascript

Static AST checker for accessibility rules on JSX elements. Ryan Florence built out this awesome runtime-analysis tool called react-a11y. It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.

react-css-components - Define React presentational components with CSS

  •    Javascript

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

teutonic-css - A modern CSS framework — versatile, well documented.

  •    CSS

Teutonic CSS is a modern web design system to develop responsive, accessible websites and web applications. It's based on CSS Variables for easy customization and extension. It features cool tech like CSS Grid. The source is a collection of SCSS modules, but you can use the minified version, as it can be modified using CSS Vars. This repo only contains the pure SCSS files to build the CSS from, also check out the Teutonic Docs.

flexbox-patterns - Patterns for using flexbox CSS to build awesome UI components.

  •    CSS

Assuming you have Node installed, you can install the project dependencies with npm install. This will install PostCSS and Autoprefixer; two critical tools for making your CSS cross-browser compatible. This command will concatenate the source CSS files into a single CSS file, and then use PostCSS to add various vendor-prefixed properties. Open up dist/index.html to see a demo page of the various flexbox patterns in the browser.

postcss-modules - PostCSS plugin to use CSS Modules everywhere

  •    Javascript

A PostCSS plugin to use CSS Modules everywhere. Not only at the client side. getJSON may also return a Promise.

turretcss - Turret is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites

  •    CSS

turretcss - A Responsive Front-end Framework for Accessible and Semantic Websites with default HTML elements, created by Scott de Jonge. Read the Getting started page for information on structure, usage, support and more.

postcss-font-magician - Magically generate all the @font-face rules

  •    Javascript

Font Magician is a PostCSS plugin that magically generates all of your @font-face rules. Never write a @font-face rule again. Just use the font and font-family properties as if they were magic.

Keen-UI - A lightweight collection of essential UI components written with Vue and inspired by Material Design

  •    Javascript

Keen UI is a lightweight Vue.js UI library with a simple API. The design is inspired by Google's Material Design. However, Keen UI is not meant to be a full implementation of the Material Design spec. Keen UI is not a CSS framework. As such, it doesn't include a grid system, typography styles, etc. Instead, the focus is on interactive components that require Javascript.