<commit_before># appy-style
CSS framework for desktop web-apps


# styles

The style `layout.css` contains the common layout styles, especially the flexbox styles.  To create 
an iTunes like interface with an action bar, a scrolling sidebar with a list of sources, and a primary table view,
and a status bar; use a nested set of hboxes and vboxes like this:
 
 ``` html
 <div class='fill vbox'>
 
    <!-- action bar -->
    <div class='hbox'> 
       <button>play</button>
       <label>song name</label> 
       <span class='grow'></span> <!-- spacer -->
       <input type='search' placeholder='search for songs'/>
    </div>
        
    <!-- the middle section. takes up most of the space -->
    <div class='hbox grow'> 
        <!-- sources pane -->
        <div class='vbox'>
            <h3>sources</h3>
            <div class='scroll grow'>
                <ul>
                    <li>All songs</li>
                    <li>Artists</li>
                    <li>Albums</li>
                    <li>Genres</li>
                </ul>
            </div>
        </div>
        
        <!-- main table view -->
        <div class='grow scroll'>
            <table>
                <tbody>
                    .... table of songs
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- the status bar -->
    <div class='hbox'>
       <label>Songs in library: 23,000</label>
   </div>
   
</div>
```

Primary layout classes:

* `hbox` creates a horizontal box. By default everything is aligned to the left
* `vbox` creates a vertical box. by default everything is aligned to the top
* `grow` makes the element take up all extra space from it's siblings.  ex: list takes up all space, but header and footer are still visible. ex: toolbar with invisible spacers to take up extra space and force some buttons to the right.
* `scroll` makes the element scroll it's content. if you want to have a scrolling list, put `scroll` on the *parent* container of the list.
* `fill` makes the element be absolutely positioned and take all space. Generally used only for the top level container.
* `debug` gives the element a 1px red border
* `hidden` sets display none. good for conditionally hiding elements.

You can make a great number of layouts with just these basics.

    
       
    <commit_msg>update docs<commit_after># appy-style
CSS framework for desktop web-apps


# styles

The style `layout.css` contains the common layout styles, especially the flexbox styles.  To create 
an iTunes like interface with an action bar, a scrolling sidebar with a list of sources, and a primary table view,
and a status bar; use a nested set of hboxes and vboxes like this:
 
 ``` html
 <div class='fill vbox'>
 
    <!-- action bar -->
    <div class='hbox'> 
       <button>play</button>
       <label>song name</label> 
       <span class='grow'></span> <!-- spacer -->
       <input type='search' placeholder='search for songs'/>
    </div>
        
    <!-- the middle section. takes up most of the space -->
    <div class='hbox grow'> 
        <!-- sources pane -->
        <div class='vbox'>
            <h3>sources</h3>
            <div class='scroll grow'>
                <ul>
                    <li>All songs</li>
                    <li>Artists</li>
                    <li>Albums</li>
                    <li>Genres</li>
                </ul>
            </div>
        </div>
        
        <!-- main table view -->
        <div class='grow scroll'>
            <table>
                <tbody>
                    .... table of songs
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- the status bar -->
    <div class='hbox'>
       <label>Songs in library: 23,000</label>
   </div>
   
</div>
```

Primary layout classes, import `src/layout.css`

* `hbox` creates a horizontal box. By default everything is aligned to the left
* `vbox` creates a vertical box. by default everything is aligned to the top
* `grow` makes the element take up all extra space from it's siblings.  ex: list takes up all space, but header and footer are still visible. ex: toolbar with invisible spacers to take up extra space and force some buttons to the right.
* `scroll` makes the element scroll it's content. if you want to have a scrolling list, put `scroll` on the *parent* container of the list.
* `fill` makes the element be absolutely positioned and take all space. Generally used only for the top level container.
* `debug` gives the element a 1px red border
* `hidden` sets display none. good for conditionally hiding elements.

You can make a great number of layouts with just these basics.

    
    
    
       
    
{'fraction_non_alphanumeric': 0.10503842869342442, 'fraction_numerical': 0.0034158838599487617, 'mean_word_length': 2.0186855670103094, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 93, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2781444', 'n_tokens_mistral': 1303, 'n_tokens_neox': 1219, 'n_words': 553}