Skip to content

Instantly share code, notes, and snippets.

@RadValentin

RadValentin/gist:89b0fd3b8f1ffdc15c85

Last active August 29, 2015 14:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save RadValentin/89b0fd3b8f1ffdc15c85 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save RadValentin/89b0fd3b8f1ffdc15c85 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. RadValentin revised this gist May 15, 2014. No changes.
  2. RadValentin revised this gist May 15, 2014. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,7 @@ The widget is contained within an element with the class `.changelog-wrapper`
    ```

    ### Notification button ###

    ```html
    <a class="btn" href="#">
    Link
    @@ -19,14 +20,15 @@ Config options via class attribute
    - Size: `.small`, `.medium` or `.large`

    ### Notification counter ###
    Contained within the notification icon
    Contained within the notification button, shows the number of new notifications
    ```html
    <span class="badge">2</span>
    ```
    Config options via class attribute
    - Shape: `.round`(default) or `.square`

    ### Notification list ###
    This list shows the notification area, it will contain a number of notification items
    ```html
    <div class="changelog-wrapper top pull-left">
    <ul class="changelog-list">
    @@ -41,7 +43,7 @@ Config options via class attribute:
    - Modifiers for main positions: `.pull-left` and `.pull-right` for vertical positions and `.pull-top` for horizontal positions

    ### Notification item ###
    Contained within the notification list
    An item contained within the notification list
    ```html
    <li>
    <span class="label">featured</span>
  3. RadValentin revised this gist May 15, 2014. 1 changed file with 7 additions and 9 deletions.
    16 changes: 7 additions & 9 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ## HTML Elements ##
    ## HTML Structure ##
    ### Changelog Wrapper ###
    The widget is contained within an element with the class `.changelog-wrapper`
    ```html
    @@ -11,7 +11,7 @@ The widget is contained within an element with the class `.changelog-wrapper`
    ```html
    <a class="btn" href="#">
    Link
    <span class="badge top right">2</span>
    <span class="badge">2</span>
    </a>
    ```
    Config options via class attribute
    @@ -21,14 +21,13 @@ Config options via class attribute
    ### Notification counter ###
    Contained within the notification icon
    ```html
    <span class="badge round">2</span>
    <span class="badge">2</span>
    ```
    Config options via class attribute
    - Shape: `.round`(default) or `.square`

    ### Notification list ###
    ```html
    <!-- List position: (top | bottom | left | right) -->
    <div class="changelog-wrapper top pull-left">
    <ul class="changelog-list">
    ...
    @@ -37,19 +36,18 @@ Config options via class attribute
    ```
    Config options via class attribute:
    - Position:
    - Four main positions: `top`, `bottom`, `left`, `right`
    - Modifiers for main positions: `pull-left` and `pull-right` for vertical positions and `pull-top` for horizontal positions
    - Is set on the wrapper `.changelog-wrapper`
    - Four main positions: `.top`, `.bottom`, `.left`, `.right`
    - Modifiers for main positions: `.pull-left` and `.pull-right` for vertical positions and `.pull-top` for horizontal positions

    ### Notification item ###
    Contained within the notification list
    ```html
    <li>
    <!-- #LABEL -->
    <!-- Label type: round (default) | square -->
    <span class="label">featured</span>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
    </li>
    ```
    Config options via class attribute:
    - Shape: `.round`(default) or `square`
    - Shape: `.round`(default) or `.square`

  4. RadValentin created this gist May 15, 2014.
    55 changes: 55 additions & 0 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    ## HTML Elements ##
    ### Changelog Wrapper ###
    The widget is contained within an element with the class `.changelog-wrapper`
    ```html
    <div class="changelog-wrapper">
    ...
    </div>
    ```

    ### Notification button ###
    ```html
    <a class="btn" href="#">
    Link
    <span class="badge top right">2</span>
    </a>
    ```
    Config options via class attribute
    - Appearance: as a button `.btn` or a link `.btn-link`. Link appearance won't have border and background color.
    - Size: `.small`, `.medium` or `.large`

    ### Notification counter ###
    Contained within the notification icon
    ```html
    <span class="badge round">2</span>
    ```
    Config options via class attribute
    - Shape: `.round`(default) or `.square`

    ### Notification list ###
    ```html
    <!-- List position: (top | bottom | left | right) -->
    <div class="changelog-wrapper top pull-left">
    <ul class="changelog-list">
    ...
    </ul>
    </div>
    ```
    Config options via class attribute:
    - Position:
    - Four main positions: `top`, `bottom`, `left`, `right`
    - Modifiers for main positions: `pull-left` and `pull-right` for vertical positions and `pull-top` for horizontal positions

    ### Notification item ###
    Contained within the notification list
    ```html
    <li>
    <!-- #LABEL -->
    <!-- Label type: round (default) | square -->
    <span class="label">featured</span>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
    </li>
    ```
    Config options via class attribute:
    - Shape: `.round`(default) or `square`