Skip to content

Conversation

@kevinglover
Copy link

Added Sass for styles

Support for Sass is growing. Annotator.js styles should be using the latest best practices in web development. Implementing Sass styles in Annotator will make it easier to integrate with other frameworks and libraries.

  • Sass files are converted from the existing CSS styles
  • Uses Grunt.js to compile, minify, and copy the files to the right directory
  • It's only optional for use; the compiled CSS are still usable without any extra effort
  • Added minified styles and maps as well

- Converted CSS styles to SCSS
- Broke out styles into components
- Added Grunt runner to compile, minimize, and replace style files
- made the path relative to the folder
@tilgovi
Copy link
Member

tilgovi commented Aug 28, 2015

This is great, thanks.

For development, it's really wonderful to be able to use the serve tool and for build we current have the Makefile. I would consider replacing the Makefile but not in this PR.

Would you mind removing the grunt portion of this and just adding a rule to build the scss source in the Makefile as well as a route for the CSS in tools/serve? You should be able to use node-sass from the CLI for the Makefile and from code for tools/serve.

@tilgovi
Copy link
Member

tilgovi commented Aug 28, 2015

Or if make isn't super familiar with you I'm happy to do this.

@nikolas
Copy link
Contributor

nikolas commented Sep 1, 2015

I agree, the Gruntfile seems unnecessary. Instead, we can just add a make css rule or something to the makefile.

- Removed gruntfile in SCSS
- Added commands to compiles Sass and Minify Css to the main make file
@kevinglover
Copy link
Author

@tilgovi Does this look more like what you had in mind?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These look great, but we can add the dependencies and get smart recompiling.

@tilgovi
Copy link
Member

tilgovi commented Sep 14, 2015

I started to comment with specific changes, but it's hard to communicate all the make specifics over comments. Would you be already if I took this into a branch and added some fixups to the Makefile stuff, then you can look it over and try it out before I merge it?

@kevinglover
Copy link
Author

@tilgovi Sure thing!

@tilgovi
Copy link
Member

tilgovi commented Sep 25, 2015

Took me longer to get back to this than I wanted but I was looking at it today. I've almost got it ready but making this change breaks the browserify bundle that is currently trying to use insert-css. I'm really not a fan of inlining CSS into a JS bundle so I think I'll unbundle that first. Then, I've got the Makefile cleanup ready to go.

@tilgovi tilgovi modified the milestone: v2.0 Apr 28, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants