• Stars
    star
    171
  • Rank 222,266 (Top 5 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created about 11 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A future facing CSS preprocessor made with postcss

Resin

Build Status Code Climate Issue Count codecov npm version

A CSS preprocessor.

Installation

npm install resin

Usage

var resin = require('resin');

resin({
  // Pass it a css file to process
  src: 'src/entry.css',
  // Tell it what browsers to prefix for
  browsers: ['last 1 version', 'ios', 'android 4'],
  // Add a namespace to your classes to avoid collisions
  namespace: 'dam',
  // Use the varibles plugin
  vars: true,
  // Use the inherit plugin
  extend: true,
  // Generate sourecemaps for debugging
  debug: true
});
// returns a promise.

This function will return an evaluated string that you can write to a file, or stream etc.

Example writing to a file:

var resin = require('resin'),
  write = require('fs').writeFileSync,
  output;

resin({
  // Pass it a css file to process
  src: 'src/entry.css',
  // Tell it what browsers to prefix for
  browsers: ['last 1 version', 'ios', 'android 4']
  // Add a namespace to your classes to avoid collisions
  namespace: 'dam'
}).then(function(result){
  write('path/to/output/dir/filename.css', result.css);
});

Entry CSS file

@import "node-package-name";
@import "other-node-package-name";

Resin will pull in CSS source files distributed via npm packages and add them to the AST. Uses postcss-import under the covers.

Features

Resin supports:

More Repositories

1

topcoat

CSS for clean and fast web apps
HTML
4,257
star
2

icons

Open Source Icons designed for Topcoat
JavaScript
257
star
3

design

Design assets for Topcoat
246
star
4

topcoat.github.com

Topcoat's home
HTML
108
star
5

theme

Topcoat default theme
JavaScript
50
star
6

topcoat-server

topcoat benchmark server
CSS
40
star
7

topcoat-grunt-telemetry

grunt telemetry task
Python
18
star
8

grunt-topcoat

Grunt task for downloading Topcoat build dependencies.
CSS
13
star
9

yeoman-generator-topcoat

Yeoman Topcoat generator
JavaScript
11
star
10

angular-topcoat

Angular directives for use with Topcoat
8
star
11

navigation-bar

Topcoat Navigation Bar
CSS
5
star
12

prototypes

Topcoat Prototypes
CSS
5
star
13

meet-topcoat

Topcoat Slides
JavaScript
5
star
14

checkbox

Topcoat checkbox component
CSS
5
star
15

button

Topcoat default button skin
CSS
4
star
16

range

Topcoat slider input
CSS
4
star
17

topcoat-brackets-extension

Initial stab at Brackets support for Topcoat.
4
star
18

overlay

Topcoat overlay component
CSS
3
star
19

utils

Topcoat utilities
CSS
3
star
20

notification

Topcoat notification
CSS
3
star
21

topcoatify

A tool for custom Topcoat builds from npm.
JavaScript
3
star
22

topcheck

A cli tool to check topcoat components have a uniform structure.
2
star
23

topcoat-ci-config

2
star
24

fonts

Fonts for topcoat theme
JavaScript
2
star
25

select

Select component
CSS
2
star
26

theme-desktop-light

Light desktop theme for Topcoat.
CSS
2
star
27

search-input

Topcoat search input
CSS
2
star
28

base-starter

Starter project for a Topcoat css reset base component
JavaScript
2
star
29

button-bar-template

Template for Topcoat Button Bar
JavaScript
2
star
30

primer

A exploration in an object based component style definition
JavaScript
1
star
31

navigation-bar-base

Base component for Topcoat navigation bar
CSS
1
star
32

list

Topcoat default list component
CSS
1
star
33

theme-mobile-light

Light theme for mobile applications
CSS
1
star
34

switch

Topcoat switch skin
CSS
1
star
35

text-input

Topcoat text input
CSS
1
star
36

tab-bar

Topcoat tab bar component
CSS
1
star
37

variables-mobile

Mobile theme variables
CSS
1
star
38

checkbox-base

Base reset styles for Topcoat checkbox
CSS
1
star
39

radio-button

Topcoat radio input
CSS
1
star
40

icon-button

Topcoat icon button skin
CSS
1
star