Source: dist/css/journal_boot.css, line 12189
5.3 Interactive Extras
Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.
Source: dist/css/journal_boot.css, line 7888
5.3.1 Expanded Click Area
allows for a relative container to be clickable by the link.
Example
This is a card.
It has an easy to override visual style, and is appropriately subdued.
I am so clickable<div class="card shadow_2 cell small-6 large-4 max-w_40" data-style="" >
<div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
This is a header
</div>
<img src="https://picsum.photos/400/300">
<div class="card-section card-body">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#" class="expanded-click-area button btn btn-primary">I am so clickable</a>
</div>
</div>
Code Sample
Source: dist/css/journal_boot.css, line 7680
5.3.2 Link Decorator
Links with the .link
will auto decorate with an icon of the corresponding file type
File | Effect |
---|---|
Portable Document Format | |
.doc | Word Document |
.txt | Text Document |
.ppt | Power Point |
mailto: | |
tel: | Telephone |
fax: | Fax |
target=_blank |
External Link icons will appear after any link |
Example
<div class="p_4">
<a class="link" href="abc.pdf">A link that is a Pdf Document</a><br/>
<a class="link" href="abc.doc">A link that is a Word Document</a><br/>
<a class="link" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
<a class="link" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
<a class="link" href="mailto:test@abc.org">test@abc.org</a><br/>
<a class="link" href="xyz.zip">A link that is a Zip Document</a><br/></div>
<div class="bg_shade-n3 p_4">
<a class="link-light" href="abc.pdf">A link that is a Pdf Document</a><br/>
<a class="link-light" href="abc.doc">A link that is a Word Document</a><br/>
<a class="link-light" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
<a class="link-light" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
<a class="link-light" href="mailto:test@abc.org">test@abc.org</a><br/>
<a class="link-light" href="xyz.zip">A link that is a Zip Document</a><br/>
</div>
Code Sample
Source: dist/css/journal_boot.css, line 7625
5.3.3 Aspect Ratio
To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly.
Example s
Default styling
.aspect_8x10
lock image to a 8 to 10 ratio
.aspect_1x1
lock image to a 1 to 1 ratio
.aspect_2x1
lock image to a 2 to 1 ratio
.aspect_3x2
lock image to a 3 to 2 ratio
.aspect_4x3
lock image to a 4 to 3 ratio
.aspect_16x9
lock image to a 16 to 9 ratio
.aspect_21x9
lock image to a 21 to 9 ratio
.aspect_4x1
lock image to a 4 to 1 ratio
<div class="grid-w_2 max-w_20" data-style="[modifier class]" >
<div class="m-y_2 lorem-loader [modifier class] "> </div>
</div>
Code Sample
Source: dist/css/journal_boot.css, line 8030
5.3.4 Scrollbar Mini
Give a mini scroll bar to a content area.
Example
<div class="card shadow_2 cell small-6 large-4 max-w_30" >
<div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
This is a header
</div>
<div class="card-section card-body p_4 scrollbar-mini overflow_auto" style="max-height:300px;">
<h4>This is a card.</h4>
<p class="font_1">It has an easy to override visual style, and is appropriately subdued.</p>
<img src="https://picsum.photos/400/300">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
</div>
<div class="card-divider card-footer br_0 br_solid br-t_1 br_primary"> <a href="#" class="button btn btn-primary">I am so clickable</a></div>
</div>
Code Sample
Source: dist/css/journal_boot.css, line 8153
5.3.5 Stars
Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.
Experimental: This item is not finalized and might be subject to change
Example
<ul class="ul_none flex flex_inline star-rating">
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
</ul>
Code Sample
Source: dist/css/journal_boot.css, line 7605
5.3.6 Lorem Text Loader
It is often we need to have space held for a return of details or text.
Deprecated: This set of components was never fully utilized and will be removed for sake of size. 06/01/21
Example
<div class="max-w_40">
<h1 class="lorem-loader font_3 m-y_3"> </h1>
<p class="m-y_2 font_0 lorem-loader"> </p>
<p class="m-y_2 font_0 lorem-loader"> </p>
<p class="m-y_2 font_0 lorem-loader"> </p>
</div>
Code Sample
Source: dist/css/journal_boot.css, line 7930
5.3.7 Is Active Toggle
Many momment there are needs for toggles of icon when the parent is in the state of active
. Used in tree navs, dropdowns, and collapsing areas.
Example s
Default styling
- FA Solid [modifier class] active
- FA Regular [modifier class] active
- FA Light [modifier class] active
.icon-toggle_plus-minus
Toggle between plus and minus square
- FA Solid icon-toggle_plus-minus active
- FA Regular icon-toggle_plus-minus active
- FA Light icon-toggle_plus-minus active
.icon-toggle_chevron-up-down
Toggle a chevron pointing up and then down.
- FA Solid icon-toggle_chevron-up-down active
- FA Regular icon-toggle_chevron-up-down active
- FA Light icon-toggle_chevron-up-down active
.icon-toggle_chevron-double-up-down
Toggle the double chevron to point up when active
- FA Solid icon-toggle_chevron-double-up-down active
- FA Regular icon-toggle_chevron-double-up-down active
- FA Light icon-toggle_chevron-double-up-down active
.icon-toggle_chevron-double-left-right
Toggle chevron left and right
- FA Solid icon-toggle_chevron-double-left-right active
- FA Regular icon-toggle_chevron-double-left-right active
- FA Light icon-toggle_chevron-double-left-right active
.icon-toggle_arrow-circle
Toggle the arrow to have a circle when active.
- FA Solid icon-toggle_arrow-circle active
- FA Regular icon-toggle_arrow-circle active
- FA Light icon-toggle_arrow-circle active
.icon-toggle_bars-times
Toggle between bars and times
- FA Solid icon-toggle_bars-times active
- FA Regular icon-toggle_bars-times active
- FA Light icon-toggle_bars-times active
.icon-toggle_check-sqaure
Check Marks toggle on and off
- FA Solid icon-toggle_check-sqaure active
- FA Regular icon-toggle_check-sqaure active
- FA Light icon-toggle_check-sqaure active
.icon-toggle_check-circle
Check Marks toggle on and off
- FA Solid icon-toggle_check-circle active
- FA Regular icon-toggle_check-circle active
- FA Light icon-toggle_check-circle active
.icon-toggle_check
Check Marks toggle on and off
- FA Solid icon-toggle_check active
- FA Regular icon-toggle_check active
- FA Light icon-toggle_check active
<ul data-style="[modifier class]" class="ul_none m_0 p_0">
<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
<i class="flex_none m-r_5 font_3 fas fa-fw [modifier class]"></i>
<span class="flex_auto ">FA Solid [modifier class]</span>
<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
</li>
<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
<i class="flex_none m-r_5 font_3 far fa-fw [modifier class]"></i>
<span class="flex_auto ">FA Regular [modifier class]</span>
<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
</li>
<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
<i class="flex_none m-r_5 font_3 fal fa-fw [modifier class]"></i>
<span class="flex_auto">FA Light [modifier class]</span>
<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
</li>
</ul>
Code Sample
Source: dist/css/journal_boot.css, line 8083
5.4 Social Links
The social links From the Footer.
Example
<section class="social p_4 m-y_2 bg_shade-n3 font_2">
<ul class="flex social-bar ul_none c_white h:c_white m_0">
<li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-twitter-square"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-linkedin"></i></a></li>
<li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-youtube"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a></li>
</ul>
</section>
Code Sample
Source: dist/css/journal_boot.css, line 8107
5.4.1 Social Links Monochrome
The social links can be restyled to be smaller.
Example
<section class="social p_4 m-y_2 font_n1 bg_white">
<ul class="flex social-bar ul_none m_0">
<li class="flex_shrink m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-twitter-square"></i></a></li>
<li class="flex_shrink m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square"></i></a></li>
<li class="flex_shrink m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin"></i></a></li>
<li class="flex_shrink m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube"></i></a></li>
<li class="flex_shrink m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play"></i></a></li>
<li class="flex_shrink m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple"></i></a></li>
</ul>
</section>
Code Sample
Source: dist/css/journal_boot.css, line 8131
5.4.2 Social Links Smaller
The social links can be restyled to be smaller.
Example
<section class="social p_4 m-y_2 font_0 max-w_20 bg_white">
<ul class="flex social-bar ul_none c_white m_0">
<li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-twitter-square"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-linkedin"></i></a></li>
<li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-youtube"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-google-play"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-apple"></i></a></li>
</ul>
</section>