NewsBlur-viq/templates/reader/feeds_skeleton.xhtml

<div class="NB-layout">

    <div class="left-pane">

        <div class="left-north">
            <div class="NB-feeds-header-dashboard"></div>
            <div class="NB-feeds-selector">
                <input type="text" name="feeds_selector" class="NB-feeds-selector-input NB-search-input" />
            </div>
        </div>

        <div class="left-center">

            <div class="left-center-content NB-sidebar NB-feedlists">
                <div id="NB-feeds-list-loader">Everything is on its way...</div>
                <div class="NB-feeds-header-wrapper">
                    <div class="NB-feeds-header-container NB-feeds-header-tryfeed-container">
                        <div class="NB-feeds-header NB-feeds-header-tryfeed">
                            <img class="NB-feeds-header-icon" src="" />
                            <div class="NB-feeds-header-title"></div>
                        </div>
                    </div>
                </div>

                <div class="NB-feeds-header-container NB-feeds-header-river-container NB-feeds-header-river-global-container">
                    <div class="NB-feeds-header NB-feeds-header-river-global NB-empty">
                        <div class="NB-feeds-header-count unread_count"></div>
                        <div class="NB-feeds-header-icon"></div>
                        <div class="NB-feeds-header-title">
                            Global Shared Stories
                        </div>
                    </div>
                </div>
                
                <div class="NB-feeds-header-container NB-feeds-header-river-container NB-feeds-header-river-blurblogs-container">
                    <div class="NB-feeds-header NB-feeds-header-river-blurblogs NB-empty">
                        <div class="NB-feeds-header-count unread_count"></div>
                        <div class="NB-feeds-header-icon"></div>
                        <div class="NB-feedlist-collapse-icon"></div>
                        <div class="NB-feeds-header-title">
                            All Shared Stories
                        </div>
                    </div>
                </div>

                <div class="NB-socialfeeds-folder">
                    <ul class="NB-socialfeeds NB-feedlist"></ul>
                </div>

                <div class="NB-feeds-header-container NB-feeds-header-river-container NB-feeds-header-river-sites-container">
                    <div class="NB-feeds-header NB-feeds-header-river-sites NB-empty">
                        <div class="NB-feeds-header-count unread_count"></div>
                        <div class="NB-feeds-header-icon"></div>
                        <div class="NB-feeds-header-title">
                            All Site Stories
                        </div>
                    </div>
                </div>

                <ul class="folder NB-feedlist" id="feed_list"></ul>
                
                <div class="NB-feeds-header-container NB-feeds-header-starred-container">
                    <div class="NB-feeds-header NB-feeds-header-starred NB-empty">
                        <div class="NB-feeds-header-count unread_count"></div>
                        <div class="NB-feeds-header-icon"></div>
                        <div class="NB-feeds-header-title">
                            Saved Stories
                        </div>
                    </div>
                </div>
            </div>

            <div class="left-center-footer">
                <div id="NB-progress">
                    <div class="NB-progress-container">
                        <div class="NB-progress-close"></div>
                        <div class="NB-progress-title">Fetching your feeds</div>
                        <div class="NB-progress-percentage"></div>
                        <div class="NB-progress-link"></div>
                        <div class="NB-progress-counts">
                            <span class="NB-progress-counts-fetched"></span>
                            /
                            <span class="NB-progress-counts-total"></span>
                        </div>
                        <div class="NB-progress-bar"></div>
                    </div>
                </div>
            </div>

        </div>

        <div class="NB-taskbar-container left-south">
            <div class="NB-taskbar">
                <div class="NB-callout-ftux NB-callout">
                    <div class="NB-callout-container">
                        <div class="NB-callout-text"></div>
                        <div class="NB-callout-arrow"></div>
                    </div>
                </div>
                <ul class="taskbar_nav taskbar_nav_feeds">
                    <li class="task_button task_button_menu NB-task-add">
                        <div class="NB-task-button-wrapper">
                            <div class="task_button_background"></div>
                            <div class="NB-task-image"></div>
                        </div>
                    </li>
                    <li class="task_button task_button_menu NB-task-manage NB-disabled">
                        <div class="NB-task-button-wrapper">
                            <div class="task_button_background"></div>
                            <div class="NB-task-image"></div>
                        </div>
                    </li>
                </ul>
                <div class="NB-taskbar-intelligence">
                    <div class="NB-intelligence-slider">
                        <ul class="segmented-control">
                            <li class="NB-intelligence-slider-control NB-intelligence-slider-red">
                                All
                            </li>
                            <li class="NB-intelligence-slider-control NB-intelligence-slider-yellow">
                                <img src="{{ MEDIA_URL }}embed/icons/silk/bullet_yellow.png">
                                <span class="NB-intelligence-label">Unread</span>
                            </li>
                            <li class="NB-intelligence-slider-control NB-intelligence-slider-green">
                                <img src="{{ MEDIA_URL }}embed/icons/silk/bullet_green.png">
                                <span class="NB-intelligence-label">Focus</span>
                            </li>
                        </ul>
                    </div>
                </div>
                {# <div class="NB-taskbar-sidebar-toggle-close" title="Hide sidebar (shift + u)"></div> #}
            </div>
        </div>

    </div>

    <div class="NB-menu-manage-container"></div>

    <div class="NB-taskbar-sidebar-toggle-open" title="Show sidebar"><div class="NB-taskbar-sidebar-toggle-open-image"></div></div>

    <div class="right-pane">

        <div id="story_titles" class="right-north">
            <div class="NB-feedbar"></div>
            <div class="NB-story-titles"></div>
        </div>
        <div class="content-pane">
            <div id="story_taskbar" class="NB-taskbar-container content-north">
                <div class="NB-taskbar">
                    <ul class="taskbar_nav taskbar_nav_view">
                        <li class="task_button task_button_view task_view_page NB-active">
                            <div class="NB-task-button-wrapper">
                                <div class="task_button_background"></div>
                                <div class="NB-task-image"></div>
                                <span class="NB-task-title">Original</span>
                                <span class="NB-task-original-return NB-task-title">
                                    <div>Return to</div>
                                    <div>Original</div>
                                </span>
                                <div class="NB-task-view-switch-arrow NB-task-view-page-to-feed-arrow"></div>
                            </div>
                        </li>
                        <li class="task_button task_button_view task_view_feed">
                            <div class="NB-task-button-wrapper">
                                <div class="task_button_background"></div>
                                <div class="NB-task-image"></div>
                                <span class="NB-task-title">Feed</span>
                                <div class="NB-task-view-switch-arrow NB-task-view-to-feed-arrow"></div>
                            </div>
                        </li>
                        <li class="task_button task_button_view task_view_text">
                            <div class="NB-task-button-wrapper">
                                <div class="task_button_background"></div>
                                <div class="NB-task-image"></div>
                                <span class="NB-task-title">Text</span>
                                <div class="NB-task-view-switch-arrow NB-task-view-to-text-arrow"></div>
                            </div>
                        </li>
                        <li class="task_button task_button_view task_view_story">
                            <div class="NB-task-button-wrapper">
                                <div class="task_button_background"></div>
                                <div class="NB-task-image"></div>
                                <span class="NB-task-title">Story</span>
                                <div class="NB-task-view-switch-arrow NB-task-view-to-story-arrow"></div>
                            </div>
                        </li>
                    </ul>
                    <ul class="taskbar_nav taskbar_nav_story first">
                        <li class="task_button task_button_story task_story_previous">
                            <div class="NB-task-button-wrapper">
                                <div class="task_button_background"></div>
                                <div class="NB-task-image"></div>
                            </div>
                        </li>
                        <li class="task_button task_button_story task_story_next_unread task_story_next_positive">
                            <div class="NB-task-button-wrapper">
                                <div class="task_button_background"></div>
                                <div class="NB-task-image"></div>
                                <span class="NB-task-title">Next Unread</span>
                            </div>
                        </li>
                        <li class="task_button task_button_story task_story_next">
                            <div class="NB-task-button-wrapper">
                                <div class="task_button_background"></div>
                                <div class="NB-task-image"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            {% if not user.is_authenticated %}
            <div class="NB-callout-ftux-signup NB-callout">
                <div class="NB-callout-container">
                    <div class="NB-callout-text"></div>
                    <div class="NB-callout-arrow"></div>
                </div>
            </div>
            {% endif %}

            <div id="story_pane" class="content-center">
                <div id="mouse-indicator">
                    <div class="NB-callout-mouse-indicator NB-callout">
                        <div class="NB-callout-container">
                            <div class="NB-callout-text"></div>
                            <div class="NB-callout-arrow"></div>
                        </div>
                    </div>
                </div>
                <div class="NB-story-pane-container">
                    <iframe id="feed_iframe" class="NB-feed-iframe"></iframe>
                    <div class="NB-feed-story-view NB-view-hidden">
                        <div class="NB-feed-story-view-floater"></div>
                        <ul class="NB-feed-stories"></ul>
                    </div>
                    <div class="NB-text-view">
                        <div class="NB-text-view-detail"></div>
                    </div>
                    <iframe id="story_iframe" class="NB-story-iframe"></iframe>
                </div>
            </div>

        </div>    

    </div>

</div>