Make the none responsive stylesheets generated by DrFront responsive by use of SASS only.
Last updated 4 years ago by glenn.abrahamsen .
CC0-1.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install drfront-responsive 
SYNC missed versions from official npm registry.

Build Status Code Climate Issue Count devDependency Status Dependency Status



This little SASS-project fixes the none-responsive stylesheets that comes with Dr.Front.
The css has no dependencies, but should only be deployed on top of the already generated code from Dr.Front.


npm install drfront-responsive --save-dev


Include node_modules/drfront-responsive/src/sass/ as a path to your sass-build.

Then you should create your own settings file for the drfront-responsive settings.
This can be copied from node_modules/drfront-responsive/src/sass/settings/_settings.scss.
If you dont provide your own settings, drfront-responsive will use the default settings.
These can be seen in `node_modules/drfront-responsive/src/sass/_global.scss.

Then import the settings file you created and the drfrontresponsive.scss file into your main sass file.

@import "<the-name-you-have-the-config-file"; 
@import "drfront-responsive"

You now have a mixin called drfrontresponsive() ready for use in your stylesheet.
This can be included just simply as:

@include drfront-responsive()

If the default settings are correct for your dr.front setup, then there are two prebuilt css file in node_modules/dist/css/ , one minified and one not.
These can be included just like any other stylesheet, after the drfront css.


Clone or fork the repo from github:

git clone git@github.com:allwiine/drfront-responsive.git

The projects builds by the use of Gulp.
To set up the project for further development, simply run:

npm install 

The you can build the project by running:


Or you can build and have gulp watch the source files for changes, and auto-trigger a new build.
Your do this by running:

gulp dev

All sourcefiles are located in the src/ folder.
The gulpfile and tasks can be found in the gulp/ folder.


This project uses Travis CI

Current Tags

  • 0.0.5                                ...           latest (4 years ago)

5 Versions

  • 0.0.5                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
Dev Dependencies (7)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |