Sportsnet theme and SCSS/LESS conversion info

gistfile1.md

Sportsnet Theme Directory Details

• The root directory of the sportnet theme templates is found at:

    sportsnet_theme/sportsnet/
  

  All the editable templates are found in this directory. Current templates of note are:

    * header.php (contains the stylesheet enqueues, and all the top header including the navsystem and scoreboard)
    	- scoreboard.php (contains all the code for the scoreboard found in the main nav).
    	- nav-dropdown-standard.php (contains the code for the megamenu dropdown from the main nav)
    	- nav-dropdown-listen.php (contains the code for the megamenu dropdown from the audio media main nav)
    	- nav-dropdown-watch.php (contains the code for the megamenu dropdown from the video media main nav)
    	- nav-dropdown-mysn.php (contains the code for the megamenu dropdown from the MY SN media main nav)		 
    * index.php (contains the homepage code)
    * single.php (contains the basic article template)
    	- floating_share_menu.php (contains the code for the floating icons found to the right of the article content)
    * footer.php (contains the footer code)
  

• Backend components can be found in:

    sportsnet_theme/sportsnet/inc/
  

  and it's subdirectories. It is not necessary to edit these files to alter the theme.

• The style sheets are handled as Sassy CSS (scss) stylesheets. These css files are compiled from their scss counterparts found in:

    sportsnet_theme/sportsnet/css/scss/
  

  You can compile these using a the scss compiler compass. The css directory has been configured for compass and running 'compass compile' from:

    sportsnet_theme/sportsnet/css/
  

  will read the scss sub-directory and stick the outputs of the compile in the parent css/ directory. Currently sportsnet.css and admin-bar.css are the only active stylesheets being pulled into the templates using the wordpress enqueue stylesheet function.

• SCSS Conversion HOW TO:

  Some good docs can be found here along with the basic sass tools:

  http://sass-lang.com/docs.html
  

  The easiest way to generate a scss file to work from is straight from the desired css file. You can generate your scss file using a number of tools. The easiest way is to use web tool such as the one found at:

  http://css2sass.heroku.com/
  

  You can also use a command line tool for the conversion such as the one packaged with sass:

    sass-convert --trace -F css -T scss ./test.css
  

  The big advantage of the command line is the trace option which tells you which lines are throwing errors.

  Currently there are some errors being thrown during the conversion process. One is found on line 4041

    .showlist .time {
      font-weight: <br />
      <b>Notice</b>:  Undefined variable: boldWeight in <b>/home/dilee20/public_html/clients/sportsnet/responsive/css/_inc-controls.css</b> on line <b>1015</b><br />;
    } 
  

  this should be changed to:

    .showlist .time {
      font-weight: bold;
    }
  

  There is also an error being thrown at lin 4911 due to an extra comma:

    .rotation-manager .info-wrapper .info-content .extra .credit {
      float: none;
      color: #000 !important;
      text-shadow: -1px 0 1px #FFF, 0 -1px 1px #FFF, 1px 0 0 #FFF, 0 1px 1px #FFF;
      filter: Shadow(Color=#FFFFFF, Direction=45, Strength=2), Shadow(Color=#FFFFFF, Direction=135, Strength=2),, Shadow(Color=#FFFFFF, Direction=225, Strength=2), Shadow(Color=#FFFFFF, Direction=315, Strength=2);
    }
  

  Should be:

    .rotation-manager .info-wrapper .info-content .extra .credit {
      float: none;
      color: #000 !important;
      text-shadow: -1px 0 1px #FFF, 0 -1px 1px #FFF, 1px 0 0 #FFF, 0 1px 1px #FFF;
      filter: Shadow(Color=#FFFFFF, Direction=45, Strength=2), Shadow(Color=#FFFFFF, Direction=135, Strength=2), Shadow(Color=#FFFFFF, Direction=225, Strength=2), Shadow(Color=#FFFFFF, Direction=315, Strength=2);
    }
  

  Once you have your scss file generated, you will find it is pretty straight forward in terms of nesting css. It allows variables, nesting and mixins (code snippets). For all of our conversion needs we use a tool called compass found here:

  http://compass-style.org/install/
  

  We have configured compass to use the directory:

    sportsnet_theme/sportsnet/css
  

  In the config sub directory you will find the compass.rb file. We have set up compass to use the scss subdirectory to store the scss files and output the compiled css files to the top level directory. Your compass.rb file should contain these lines to achieve this:

    http_path = "/"
    css_dir = "./"
    sass_dir = "./scss"
    images_dir = "../images"
    javascripts_dir = "../js"
  

  Move your scss files to the scss subdirectory. Then from the css top level directory you can run the command:

    compass compile
  

  And it will search the scss directory for all scss files for conversion. The output css file will be of the same prefix name and can be found in the top level css directory.

  As of now for sportsnet, we have converted the current "styles.css" and "d" typekit style sheet files found on the mocks and merged them into a single sportsnet.scss file found in the scss directory.

• All javascript scripts are stored in:

    sportsnet_theme/sportsnet/js/
  

  Currently dev_utils.js and global_scripts.js are the only active scripts being pulled into the templates in the footer.php file.