Skip to content

Commit

Permalink
Sass -> LESS
Browse files Browse the repository at this point in the history
  • Loading branch information
amsul committed May 17, 2013
1 parent e97bd00 commit 84059a5
Show file tree
Hide file tree
Showing 44 changed files with 802 additions and 1,012 deletions.
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,3 @@
*.sublime-workspace

node_modules/*

.sass-cache/*
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

language: node_js
node_js:
- 0.10
- 0.8
before_script:
- npm install -g grunt-cli
- gem install sass
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ With this major release, the entire API has been rethought to allow the picker t
- Added Grunt.js build system.
- Added QUnit test suite.
- Added Travis integration.
- Updated themes to be Sass-based.
- Updated themes to be LESS-based.
- Removed “inline” and “inline-fixed” themes.
- Removed jam.js bindings within `package.json`.
- Removed official support for IE7. Still works but looks odd.
Expand Down
36 changes: 18 additions & 18 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = function( grunt ) {
grunt.loadNpmTasks( 'grunt-contrib-jshint' )
grunt.loadNpmTasks( 'grunt-contrib-qunit' )
grunt.loadNpmTasks( 'grunt-contrib-copy' )
grunt.loadNpmTasks( 'grunt-contrib-sass' )
grunt.loadNpmTasks( 'grunt-contrib-less' )
grunt.loadNpmTasks( 'grunt-contrib-clean' )
grunt.loadNpmTasks( 'grunt-contrib-cssmin' )
grunt.loadNpmTasks( 'grunt-contrib-uglify' )
Expand Down Expand Up @@ -118,24 +118,24 @@ module.exports = function( grunt ) {
},


// Compile Sass into CSS.
sass: {
// Compile LESS into CSS.
less: {
options: {
style: 'expanded'
},
demos: {
files: {
'<%= dirs.dest.demos %>/styles/main.css': '<%= dirs.src.demos %>/styles/base.scss'
'<%= dirs.dest.demos %>/styles/main.css': '<%= dirs.src.demos %>/styles/base.less'
}
},
themes: {
files: {
'<%= dirs.dest.themes %>/default.css': [ '<%= dirs.src.themes %>/base.scss', '<%= dirs.src.themes %>/default.scss' ],
'<%= dirs.dest.themes %>/classic.css': [ '<%= dirs.src.themes %>/base.scss', '<%= dirs.src.themes %>/classic.scss' ],
'<%= dirs.dest.themes %>/default.date.css': [ '<%= dirs.src.themes %>/base.date.scss', '<%= dirs.src.themes %>/default.date.scss' ],
'<%= dirs.dest.themes %>/default.time.css': [ '<%= dirs.src.themes %>/base.time.scss', '<%= dirs.src.themes %>/default.time.scss' ],
'<%= dirs.dest.themes %>/classic.date.css': [ '<%= dirs.src.themes %>/base.date.scss', '<%= dirs.src.themes %>/classic.date.scss' ],
'<%= dirs.dest.themes %>/classic.time.css': [ '<%= dirs.src.themes %>/base.time.scss', '<%= dirs.src.themes %>/classic.time.scss' ]
'<%= dirs.dest.themes %>/default.css': [ '<%= dirs.src.themes %>/base.less', '<%= dirs.src.themes %>/default.less' ],
'<%= dirs.dest.themes %>/classic.css': [ '<%= dirs.src.themes %>/base.less', '<%= dirs.src.themes %>/classic.less' ],
'<%= dirs.dest.themes %>/default.date.css': [ '<%= dirs.src.themes %>/base.date.less', '<%= dirs.src.themes %>/default.date.less' ],
'<%= dirs.dest.themes %>/default.time.css': [ '<%= dirs.src.themes %>/base.time.less', '<%= dirs.src.themes %>/default.time.less' ],
'<%= dirs.dest.themes %>/classic.date.css': [ '<%= dirs.src.themes %>/base.date.less', '<%= dirs.src.themes %>/classic.date.less' ],
'<%= dirs.dest.themes %>/classic.time.css': [ '<%= dirs.src.themes %>/base.time.less', '<%= dirs.src.themes %>/classic.time.less' ]
}
}
},
Expand Down Expand Up @@ -216,24 +216,24 @@ module.exports = function( grunt ) {
quick: {
files: [
'<%= dirs.src.raw %>/*.htm',
'<%= dirs.src.demos %>/styles/*.scss', '<%= dirs.src.demos %>/scripts/*.js',
'<%= dirs.src.demos %>/styles/*.less', '<%= dirs.src.demos %>/scripts/*.js',
'<%= dirs.src.pickers %>/**/*.js', '<%= dirs.src.pickers %>/themes/*.css',
'<%= dirs.src.themes %>/*.scss',
'<%= dirs.src.themes %>/*.less',
'<%= dirs.src.translations %>/*.js'
],
tasks: [ 'quick' ]
},
demos: {
files: [
'<%= dirs.src.raw %>/*.htm',
'<%= dirs.src.demos %>/styles/*.scss', '<%= dirs.src.demos %>/scripts/*.js'
'<%= dirs.src.demos %>/styles/*.less', '<%= dirs.src.demos %>/scripts/*.js'
],
tasks: [ 'demo' ]
},
pickers: {
files: [
'<%= dirs.src.pickers %>/**/*.js', '<%= dirs.src.pickers %>/themes/*.css',
'<%= dirs.src.themes %>/*.scss',
'<%= dirs.src.themes %>/*.less',
'<%= dirs.src.translations %>/*.js'
],
tasks: [ 'picker' ]
Expand All @@ -260,10 +260,10 @@ module.exports = function( grunt ) {

// Register the tasks.
// * `htmlify` and `copy:pkg` should come after `uglify` because some package files measure `.min` file sizes.
grunt.registerTask( 'default', [ 'clean', 'concat', 'copy:demos', 'copy:translations', 'sass', 'jshint', 'qunit', 'uglify', 'cssmin', 'htmlify', 'copy:pkg' ] )
grunt.registerTask( 'quick', [ 'concat', 'copy:demos', 'copy:translations', 'sass', 'uglify', 'cssmin', 'htmlify', 'copy:pkg' ] )
grunt.registerTask( 'picker', [ 'clean:pickers', 'concat:pickers', 'copy:translations', 'sass:themes', 'jshint:pickers', 'qunit:pickers', 'uglify:pickers', 'cssmin:pickers' ] )
grunt.registerTask( 'demo', [ 'clean:demos', 'concat:demos', 'copy:demos', 'sass:demos', 'jshint:demos', 'htmlify:demos' ] )
grunt.registerTask( 'default', [ 'clean', 'concat', 'copy:demos', 'copy:translations', 'less', 'jshint', 'qunit', 'uglify', 'cssmin', 'htmlify', 'copy:pkg' ] )
grunt.registerTask( 'quick', [ 'concat', 'copy:demos', 'copy:translations', 'less', 'uglify', 'cssmin', 'htmlify', 'copy:pkg' ] )
grunt.registerTask( 'picker', [ 'clean:pickers', 'concat:pickers', 'copy:translations', 'less:themes', 'jshint:pickers', 'qunit:pickers', 'uglify:pickers', 'cssmin:pickers' ] )
grunt.registerTask( 'demo', [ 'clean:demos', 'concat:demos', 'copy:demos', 'less:demos', 'jshint:demos', 'htmlify:demos' ] )
grunt.registerTask( 'travis', [ 'jshint:pickers', 'qunit:pickers' ] )


Expand Down
22 changes: 11 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,16 @@ _To support old browsers, namely IE8, **also include** the `legacy.js` file._

### Themes

All themes are [generated using Sass](#sass-styling) and compiled into the `lib/themes` folder.
All themes are [generated using LESS](#less-styling) and compiled into the `lib/themes` folder.

File | Contents | Size (min & gzip)
----------------------- | ------------------------ | ----------------------
`default.css` | __Base default *__ | 0.48kb
`default.date.css` | Default date picker | 0.74kb
`default.time.css` | Default time picker | 0.38kb
`classic.css` | __Base classic *__ | 0.37kb
`classic.date.css` | Classic date picker | 0.74kb
`classic.time.css` | Classic time picker | 0.39kb
`default.css` | __Base default *__ | 0.49kb
`default.date.css` | Default date picker | 0.69kb
`default.time.css` | Default time picker | 0.35kb
`classic.css` | __Base classic *__ | 0.32kb
`classic.date.css` | Classic date picker | 0.69kb
`classic.time.css` | Classic time picker | 0.35kb

__*__ One and only one base stylesheet is **required**. Check out the [demos](http://amsul.github.io/pickadate.js/themes.htm) to choose one – and then include the respective pickers as well.

Expand Down Expand Up @@ -114,18 +114,18 @@ Read the Gruntfile to see the build tasks and relative directories of the source


<br>
<a name="sass-styling"></a>
## Styling with Sass
<a name="less-styling"></a>
## Styling with LESS

The picker themes are built using [Sass](http://sass-lang.com/) with Grunt. To customize the CSS output, read the `_variables.scss` file in the `_raw/lib/themes` folder. You can specify:
The picker themes are built using [LESS](http://lesscss.org/) with Grunt. To customize the CSS output, read the `_variables.less` file in the `_raw/lib/themes` folder. You can specify:

- colors for the theme,
- sizes for the picker,
- media-query breakpoints,
- and a whole bunch of other stuff.


After making any changes, run `grunt sass:themes` to compile it into CSS.
After making any changes, run `grunt less:themes` to compile it into CSS.



Expand Down
2 changes: 1 addition & 1 deletion _raw/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ With this major release, the entire API has been rethought to allow the picker t
- Added Grunt.js build system.
- Added QUnit test suite.
- Added Travis integration.
- Updated themes to be Sass-based.
- Updated themes to be LESS-based.
- Removed “inline” and “inline-fixed” themes.
- Removed jam.js bindings within `package.json`.
- Removed official support for IE7. Still works but looks odd.
Expand Down
10 changes: 5 additions & 5 deletions _raw/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ _To support old browsers, namely IE8, **also include** the `legacy.js` file._

### Themes

All themes are [generated using Sass](#sass-styling) and compiled into the `{%= dirs.dest.themes %}` folder.
All themes are [generated using LESS](#less-styling) and compiled into the `{%= dirs.dest.themes %}` folder.

File | Contents | Size (min & gzip)
----------------------- | ------------------------ | ----------------------
Expand Down Expand Up @@ -124,18 +124,18 @@ Read the Gruntfile to see the build tasks and relative directories of the source


<br>
<a name="sass-styling"></a>
## Styling with Sass
<a name="less-styling"></a>
## Styling with LESS

The picker themes are built using [Sass](http://sass-lang.com/) with Grunt. To customize the CSS output, read the `_variables.scss` file in the `{%= dirs.src.themes %}` folder. You can specify:
The picker themes are built using [LESS](http://lesscss.org/) with Grunt. To customize the CSS output, read the `_variables.less` file in the `{%= dirs.src.themes %}` folder. You can specify:

- colors for the theme,
- sizes for the picker,
- media-query breakpoints,
- and a whole bunch of other stuff.


After making any changes, run `grunt sass:themes` to compile it into CSS.
After making any changes, run `grunt less:themes` to compile it into CSS.



Expand Down
3 changes: 3 additions & 0 deletions _raw/TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ a lot of the stuff below may never happen...
docs/fixes/tests
----------------

- test: close with focus (currently crashes on tab)
- test: open without focus

- disable dates using js date objects
- add .main to package.json
- prevent body overflowing scroll
Expand Down
6 changes: 3 additions & 3 deletions _raw/demo/scripts/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -433,10 +433,10 @@ $button_start_stop.on( 'click', function( event ) {
/**
* API demo: render
*/
var addStuff = function( picker ) {
var addStuff = function( $element ) {
var today = new Date(),
todayString = today.getDate() + '/' + (today.getMonth()+1) + '/' + today.getFullYear()
picker.$root.find( '.pickadate__box' ).
$element.find( '.picker__box' ).
prepend('<p class="text-center" style="padding:.25em;border:2px solid red">Hello there! Today is <code>' + todayString + '</code></p>')
},
$button_render = $( '#button__api-render' ),
Expand All @@ -448,7 +448,7 @@ $button_render.on( 'click', function( event ) {
$button_render.text( 'Add stuff' )
}
else {
addStuff( picker_render )
addStuff( picker_render.$root )
$button_render.text( 'Render' )
}
event.stopPropagation()
Expand Down
File renamed without changes.
144 changes: 144 additions & 0 deletions _raw/demo/styles/_variables.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@

/* ==========================================================================
$VARIABLES
========================================================================== */

/**
* Font families
*/
@code-family: Monaco, Consolas, "Liberation Mono", monospace;

/**
* Colors
*/
@blue: #0089ec;

@red: #e20;

@black: #000;
@white: #fff;

@green: #5c2;
@green-darker: #342;
@green-faded: #ecffdd;
@green-faded-darker: darken( desaturate( @green-faded, 50% ), 12.5% ); /* #cbe7b6 */

@dark-brown: #442;

@grey: #ccc;
@grey-lighter: lighten( @grey, 5% ); /* #d9d9d9 */
@grey-lightest: lighten( @grey-lighter, 8% ); /* #ededed */
@grey-darker: darken( @grey, 5% ); /* #bfbfbf */
@grey-darkest: darken( @grey-darker, 8% ); /* #ababab */

@medium-grey: #999;

@dark-grey: #333;

@yellow-faded: #ffd;
@yellow-faded-darker: darken( desaturate( @yellow-faded, 45% ), 8% ); /* #eeeec5 */


/**
* Widths
*/
@breakpoint-tiny: 18.75em; /* 300px */
@breakpoint-small: 33.75em; /* 540px */
@breakpoint-medium: 46.25em; /* 740px */
// @breakpoint-large: 72em; /* 1152px */
// @breakpoint-huge: 80em; /* 1280px */

@gutter: 20px;


/**
* Transitions
*/
@smooth-fast: all linear .15s;





/* ==========================================================================
$MIXINS
========================================================================== */

/**
* Lists
*/
.list-item-inline {
display: inline-block;
margin-right: 1em;
}


/**
* Demo tags
*/
.demo-tag ( @tag-text ) {
padding-top: 30px;
position: relative;

&:before {
content: @tag-text;
position: absolute;
top: 0;
left: 0;
font-family: @code-family;
font-weight: 500;
font-size: 10px;
line-height: 1;
background: @white;
padding: 5px 6px 4px 6px;
color: #989a99;
border-right: 1px solid @grey-lightest;
border-bottom: 1px solid @grey-lightest;
.border-radius( 0 0 4px 0 );
}
}



/**
* Clear fix
*/
.clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}



/**
* Vendor prefixes
*/
.box-shadow ( @rest... ) {
-webkit-box-shadow: @rest;
-moz-box-shadow: @rest;
box-shadow: @rest;
}
.box-sizing ( @rest... ) {
-webkit-box-sizing: @rest;
-moz-box-sizing: @rest;
box-sizing: @rest;
}
.border-radius ( @rest... ) {
-webkit-border-radius: @rest;
-moz-border-radius: @rest;
border-radius: @rest;
}
.transition ( @rest... ) {
-webkit-transition: @rest;
-moz-transition: @rest;
transition: @rest;
}



Loading

0 comments on commit 84059a5

Please sign in to comment.