NewsBlur/templates/reader/feeds_skeleton.xhtml

<div class="NB-layout">

    <div class="left-pane">

        <div class="left-north">
            <div class="NB-feeds-header-user">
                <div class="NB-feeds-header-user-image">
                    {% if social_profile.large_photo_url %}
                        <img src="{{ social_profile.large_photo_url }}">
                    {% else %}
                        {% if user.profile.is_premium %}
                            <img src="{{ MEDIA_URL }}/img/reader/account_premium_{{ account_images|random }}.jpg" />
                        {% else %}
                            <img src="{{ MEDIA_URL }}/img/reader/account_standard_{{ account_images|random }}.jpg" />
                        {% endif %}
                    {% endif %}
                </div>
                <div class="NB-feeds-header-user-name">{{ social_profile.username }}</div>
                <div class="NB-feeds-header-collapse-sidebar" role="button">
                    <img src="{{ MEDIA_URL }}/img/reader/chevron_sq_left.png">
                </div>
                <div class="NB-feeds-header-user-interactions" role="button">
                    <div class="NB-feeds-header-user-interactions-badge NB-hidden"></div>
                    <img src="{{ MEDIA_URL }}/img/icons/circular/nav_icn_activity_active.png">
                </div>
                <div class="NB-feeds-header-dashboard"></div>
            </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 class="NB-feeds-list-loader">Everything is on its way...</div>
                <div class="NB-feeds-list-error">
                    Something went wrong...
                    <div class="NB-button NB-feeds-list-retry">Retry</div>
                </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 class="NB-feeds-header-container NB-feeds-header-river-container NB-feeds-header-river-dashboard-container">
                        <div class="NB-feeds-header NB-feeds-header-river-dashboard NB-empty" role="link">
                            <img class="NB-feeds-header-icon" src="{{ MEDIA_URL }}img/icons/nouns/home.svg" />
                            <div class="NB-feeds-header-title">
                                NewsBlur Dashboard
                            </div>
                        </div>
                    </div>

                    <div class="NB-feeds-header-container NB-feeds-header-river-container NB-feeds-header-river-infrequent-container">
                        <div class="NB-feeds-header NB-feeds-header-river-infrequent NB-empty" role="link">
                            <div class="NB-feeds-header-count unread_count"></div>
                            <img class="NB-feeds-header-icon" src="" />
                            <div class="NB-feeds-header-title">
                                Infrequent Site Stories
                            </div>
                        </div>
                    </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" role="link">
                            <div class="NB-feeds-header-count unread_count"></div>
                            <img class="NB-feeds-header-icon" src="" />
                            <div class="NB-feeds-header-title">
                                All Site Stories
                            </div>
                        </div>
                    </div>

                </div>

                <ul class="folder NB-feedlist" id="feed_list"></ul>
                
                <div class="NB-feeds-header-container NB-feeds-header-read-container NB-hidden">
                    <div class="NB-feeds-header NB-feeds-header-read" role="link">
                        <img class="NB-feeds-header-icon" src="" />
                        <div class="NB-feeds-header-title">
                            Read Stories
                        </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" role="link">
                        <div class="NB-feeds-header-count unread_count"></div>
                        <img class="NB-feeds-header-icon" src="" />
                        <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" role="link">
                        <div class="NB-feeds-header-count unread_count"></div>
                        <img class="NB-feeds-header-icon" src="" />
                        <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-searches-container NB-hidden">
                    <div class="NB-feeds-header NB-feeds-header-searches">
                        <img class="NB-feeds-header-icon" src="" />
                        <div class="NB-feeds-header-title">
                            Saved Searches
                        </div>
                    </div>
                </div>
                
                <div class="NB-searches-folder">
                    <ul class="NB-searches-feeds NB-feedlist"></ul>
                </div>
                
                <div class="NB-feeds-header-container NB-feeds-header-starred-container">
                    <div class="NB-feeds-header NB-feeds-header-starred NB-empty" role="link">
                        <div class="NB-feeds-header-count feed_counts_floater unread_count"></div>
                        <img class="NB-feeds-header-icon" src="" />
                        <div class="NB-feedlist-collapse-icon"></div>
                        <div class="NB-feeds-header-title">
                            Saved Stories
                        </div>
                    </div>
                </div>
                
                <div class="NB-starred-folder">
                    <ul class="NB-starred-feeds NB-feedlist"></ul>
                </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="left-south">
            <div class="NB-taskbar-container">
                <div class="NB-feed-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>
                    <div class="NB-task-button NB-task-add" role="button">
                        <div class="NB-task-image"></div>
                    </div>
                    <div class="NB-task-button NB-task-manage NB-disabled" role="button">
                        <div class="NB-task-image"></div>
                    </div>
                    <div class="NB-taskbar-intelligence">
                        <div class="NB-intelligence-slider">
                            <ul class="segmented-control">
                                <li class="NB-intelligence-slider-control NB-intelligence-slider-red" role="button">
                                    All
                                </li>
                                <li class="NB-intelligence-slider-control NB-intelligence-slider-yellow" role="button">
                                    <img src="{{ MEDIA_URL }}embed/icons/nouns/indicator-unread.svg">
                                    <span class="NB-intelligence-label">Unread</span>
                                </li>
                                <li class="NB-intelligence-slider-control NB-intelligence-slider-green" role="button">
                                    <img src="{{ MEDIA_URL }}embed/icons/nouns/indicator-focus.svg">
                                    <span class="NB-intelligence-label">Focus</span>
                                </li>
                                <li class="NB-intelligence-slider-control NB-intelligence-slider-blue" role="button">
                                    <img src="{{ MEDIA_URL }}embed/icons/nouns/saved-stories.svg">
                                    <span class="NB-intelligence-label">Saved</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </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 class="NB-feedbar content-north">
            
            <ul class="segmented-control NB-taskbar NB-taskbar-nav">
                <li class="NB-taskbar-button NB-task-story-previous" role="button">
                    <div class="NB-task-image"></div>
                </li>
                <li class="NB-taskbar-button NB-task-story-next-unread NB-task-story-next-positive" role="button">
                    <div class="NB-task-image"></div>
                    <span class="NB-task-title">Next unread</span>
                </li>
                <li class="NB-taskbar-button NB-task-story-next" role="button">
                    <div class="NB-task-image"></div>
                </li>
            </ul>
            
            <div class="NB-story-titles-expand-sidebar"></div>
            
            <div class="NB-story-titles-header"></div>
            
        </div>

        <div id="story_taskbar" class="NB-taskbar-container content-south">
            <ul class="segmented-control NB-taskbar NB-taskbar-view">
                <li class="NB-taskbar-button task_view_page NB-tipsy" tipsy-title="Original">
                    <div class="NB-task-image"></div>
                    <span class="NB-task-title">Original</span>
                    <span class="NB-task-original-return NB-task-title">
                        Return
                    </span>
                    <div class="NB-task-view-switch-arrow NB-task-view-page-to-feed-arrow"></div>
                </li>
                <li class="NB-taskbar-button task_view_feed NB-active NB-tipsy" tipsy-title="Feed">
                    <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>
                </li>
                <li class="NB-taskbar-button task_view_text NB-tipsy" tipsy-title="Text">
                    <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>
                </li>
                <li class="NB-taskbar-button task_view_story NB-tipsy" tipsy-title="Story">
                    <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>
                </li>
            </ul>

            <ul class="segmented-control NB-taskbar NB-taskbar-layout">
                <li class="NB-taskbar-button NB-task-layout-full NB-tipsy" tipsy-title="Full">
                    <div class="NB-task-image"></div>
                    <span class="NB-task-title">Full</span>
                </li>
                <li class="NB-taskbar-button NB-task-layout-split NB-active NB-tipsy" tipsy-title="Split">
                    <div class="NB-task-image"></div>
                    <span class="NB-task-title">Split</span>
                </li>
                <li class="NB-taskbar-button NB-task-layout-list NB-tipsy" tipsy-title="List">
                    <div class="NB-task-image"></div>
                    <span class="NB-task-title">List</span>
                </li>
                <li class="NB-taskbar-button NB-task-layout-magazine NB-tipsy" tipsy-title="Magazine">
                    <div class="NB-task-image"></div>
                    <span class="NB-task-title">Magazine</span>
                </li>
                <li class="NB-taskbar-button NB-task-layout-grid NB-tipsy" tipsy-title="Grid">
                    <div class="NB-task-image"></div>
                    <span class="NB-task-title">Grid</span>
                </li>
            </ul>
            
            <div class="NB-taskbar-options-container">
                <span class="NB-taskbar-options" role="button">
                    <div class="NB-icon"></div>
                    Style
                </span>
            </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>

        <div class="content-pane">

            <div id="story_titles" class="right-north">
                <div class="NB-search-header">
                    <div class="NB-search-header-icon"></div>
                    <div class="NB-search-header-save"></div>
                    <div class="NB-search-header-title"></div>
                </div>
                <div class="NB-story-titles"></div>
            </div>
        
            <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-stories-container">
                            <div class="NB-feed-story-view-header NB-feedbar"></div>
                            <ul class="NB-feed-stories"></ul>
                        </div>
                    </div>
                    <div class="NB-text-view">
                        <div class="NB-text-view-detail"></div>
                    </div>
                    <div class="NB-story-view">
                        <iframe id="story_iframe" class="NB-story-iframe" sandbox="allow-scripts"></iframe>
                    </div>
                </div>
            </div>

        </div>    

    </div>

</div>