- title('Customize the styles')

div.left
    :markdown
        ## Customize the styles

        Bibliosoph comes with some handy [Elements](#elements-intro) but you can easily customize them or add your own. The css is written using [Stylus](http://learnboost.github.io/stylus/) and sits in the `assets/css` folder. Though if you ever want to upgrade Bibliosoph and benefit from new Elements and features, you mustn't edit any of the `*.styl` files. That way, when you update Bibliosoph, the css can upgrade silently.

        But don't worry we got you covered if you want to overwrite the css, there is a `assets/css/customize/` folder with a `base.styl` file in it. You can do whatever you want inside this folder, create new files, import them inside the `base.styl`... 

        The `base.styl` is loaded last in the project, so it lets you overwrite everything.



    :markdown
      ### Add icons to the menu items

      Bibliosoph comes with the [TWG icon set](http://blog.twg.ca/2010/11/retina-display-icon-set/) (optimized for the web). To add an icon to a menu item, add something like this to the `assets/css/customize/base.styl` file:

      ```
      .my-menu-item-class span {
        background: url('../images/icons/the-desired-icon.png') no-repeat 0 0;
      }
      ```

- title('Customize the styles')

div.left
    :markdown
        ## Customize the styles

        Bibliosoph comes with some handy [Elements](#elements-intro) but you can easily customize them or add your own. The css is written using [Stylus](http://learnboost.github.io/stylus/) and sits in the `assets/css` folder. Though if you ever want to upgrade Bibliosoph and benefit from new Elements and features, you mustn't edit any of the `*.styl` files. That way, when you update Bibliosoph, the css can upgrade silently.

        But don't worry we got you covered if you want to overwrite the css, there is a `assets/css/customize/` folder with a `base.styl` file in it. You can do whatever you want inside this folder, create new files, import them inside the `base.styl`... 

        The `base.styl` is loaded last in the project, so it lets you overwrite everything.



    :markdown
      ### Add icons to the menu items

      Bibliosoph comes with the [TWG icon set](http://blog.twg.ca/2010/11/retina-display-icon-set/) (optimized for the web). To add an icon to a menu item, add something like this to the `assets/css/customize/base.styl` file:

      ```
      .my-menu-item-class span {
        background: url('../images/icons/icon_48.png') no-repeat 0 0;
      }

      body.left-nav-narrow .my-menu-item-class span {
        background: url('../images/icons/icon_24.png') no-repeat 0 0;
      }
      ```

      The `left-nav-narrow` class is used by the responsive layout.

Update the doc for responsive design
Update the doc for responsive design
