Slight is a theme for your subreddit. Originally designed for the community at /r/Monstercat, this retina-ready stylesheet is honest, simple and easy. It’s what you use when other stylesheets can’t provide for the needs of your users—or your need for better design.
You can find more info at /r/slight.
npm install
- Put images in
/images
- Make changes to
slight.styl
node compile
- Make sure you’ve installed node.js, and all of the prerequisites for node-gyp
- Run
npm install
in this folder - Change out the images in
/images
with your own alternatives, where necessary. You can useuseful stuff/template.sketch
to help out if you have Sketch installed. - (Optional) Put all the images you want as flair in
/flairs
. Slight will automatically resize them for you, so add them in the highest resolutions you have. - Edit
slight.styl
to go through what you may want to change. All of the available settings should be well-documented within the file. If you’re using flairs, make sureimage_flairs
is set totrue
. - Add custom overrides or other styles to the end of
slight.styl
as necessary. - Run compile.js using
node compile
and paste the outputted CSS to the stylesheet page on your subreddit (outputted CSS can also be found inoutput.css
for convenience) - (Optional) If you’re using link flairs, make sure that ‘link flair position’ is set to ‘right’ in your flair settings (/about/flair)
Compile.js is a script I wrote for Slight to use. It will take a fully-edited slight
directory, and preform all of the necessary image manipulation and CSS preprocessing required to get Slight up and running. It does the following:
- Resize all images in
/flairs
to pre-determined dimensions - Compile all of the resized images into two spritesheets:
images/flairsheet
andimages/flairsheet2x
- Preprocess
slight.styl
, calculating the dimensions for any of the images
Compile.js can be run with flags to perform only certain steps:
node compile resize
: Just resize the flairs
node compile make-sheet
: Just create stylesheets
node compile compile
: Just preprocess the styles
Running Compile.js without any flags will run all three. If it does not detect /flairs
, it will automatically skip to preprocessing.
I have also set up a Sublime Text Build System (will probably only work on UNIX) that automatically performs node compile compile
, provided Compile.js is in the current directory. It would be a good idea to edit this to use Sublime Text’s project system.