Component Visibility by using Foundation Visibility CSS Classes

Foundation framework introduces special Visibility CSS classes. With these classes it is possible to show or hide elements based on screen size.

Valid screen size parameter values and corresponding screen widths:

  • small for screen widths: 0px - 640px
  • medium for screen widths: 641px - 1024px
  • large for screen widths: 1025px - 1440px
  • xlarge for screen widths: 1441px - 1920px
  • xxlarge for screen widths: 1921px...

Implementing VisibilityChanger: The VisibilityAdapter adapter

VisibilityAdapter provides a straightforward adapter for any CssClassifiableContent object to be used as a VisibilityChanger component.

Visibility handling extending VisibilityChanger

VisibilityAdapter::showFromUp()

  • Showing content for specific screen sizes or larger
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Adapters;
    4.  
    5. use Sphp\Html\Tags;
    6. use Sphp\Html\Foundation\Sites\Core\ScreenSizes;
    7.  
    8. $p = Tags::p();
    9. $adapter = new VisibilityAdapter($p);
    10.  
    11. foreach (new ScreenSizes as $size) {
    12.   $adapter->showFromUp($size);
    13.   echo $p->resetContent($p->cssClasses());
    14. }
    15.  
    Highlighted with GeSHi 1.0.9.1
  • Resulting HTML5 code
    1. <p class="show-for-small">class="show-for-small"</p>
    2. <p class="show-for-medium">class="show-for-medium"</p>
    3. <p class="show-for-large">class="show-for-large"</p>
    4. <p class="show-for-xlarge">class="show-for-xlarge"</p>
    5. <p class="show-for-xxlarge">class="show-for-xxlarge"</p>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

    class="show-for-small"

    class="show-for-medium"

    class="show-for-large"

    class="show-for-xlarge"

    class="show-for-xxlarge"

  • Showing content only for specific sceen size
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Adapters;
    4.  
    5. use Sphp\Html\Tags;
    6. use Sphp\Html\Foundation\Sites\Core\ScreenSizes;
    7.  
    8. $p = Tags::p();
    9. $adapter = new VisibilityAdapter($p);
    10. foreach (new ScreenSizes as $size) {
    11.   $adapter->showOnlyFor($size);
    12.   echo $p->resetContent($p->cssClasses());
    13. }
    14.  
    Highlighted with GeSHi 1.0.9.1
  • Resulting HTML5 code
    1. <p class="show-for-small-only">class="show-for-small-only"</p>
    2. <p class="show-for-medium-only">class="show-for-medium-only"</p>
    3. <p class="show-for-large-only">class="show-for-large-only"</p>
    4. <p class="show-for-xlarge-only">class="show-for-xlarge-only"</p>
    5. <p class="show-for-xxlarge-only">class="show-for-xxlarge-only"</p>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

    class="show-for-small-only"

    class="show-for-medium-only"

    class="show-for-large-only"

    class="show-for-xlarge-only"

    class="show-for-xxlarge-only"

Hiding Content by Screen Size

Hiding by Screen Size methods state which components should disappear based on the device's screen size.

  • Hiding content only for specific sceen size
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Adapters;
    4.  
    5. use Sphp\Html\Tags;
    6. use Sphp\Html\Foundation\Sites\Core\ScreenSizes;
    7.  
    8. $p = Tags::p();
    9. $adapter = new VisibilityAdapter($p);
    10. foreach (new ScreenSizes as $size) {
    11.   $adapter->hideOnlyForSize($size);
    12.   echo $p->resetContent($p->cssClasses());
    13. }
    14.  
    Highlighted with GeSHi 1.0.9.1
  • Resulting HTML5 code
    1. <p class="hide-for-small-only">class="hide-for-small-only"</p>
    2. <p class="hide-for-medium-only">class="hide-for-medium-only"</p>
    3. <p class="hide-for-large-only">class="hide-for-large-only"</p>
    4. <p class="hide-for-xlarge-only">class="hide-for-xlarge-only"</p>
    5. <p class="hide-for-xxlarge-only">class="hide-for-xxlarge-only"</p>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

    class="hide-for-small-only"

    class="hide-for-medium-only"

    class="hide-for-large-only"

    class="hide-for-xlarge-only"

    class="hide-for-xxlarge-only"

Orientation Detection

It is also possible to Define content visibility by device orientation. This will change the visibility on mobile devices when the device is rotated. On desktop, the orientation is almost always reported as landscape.

  • Showing content based on Orientation Detection
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Adapters;
    4.  
    5. use Sphp\Html\Tags;
    6.  
    7. $p = Tags::p();
    8. $adapter = new VisibilityAdapter($p);
    9. $adapter->hideForLandscape();
    10. echo $p->resetContent($p->cssClasses());
    11. $adapter->hideForPortrait();
    12. echo $p->resetContent($p->cssClasses());
    13.  
    Highlighted with GeSHi 1.0.9.1
  • Resulting HTML5 code
    1. <p class="show-for-portrait">class="show-for-portrait"</p>
    2. <p class="show-for-landscape">class="show-for-landscape"</p>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

    class="show-for-portrait"

    class="show-for-landscape"

Changing component Visibility: Foundation Visibility CSS Classes

Foundation framework introduces special Visibility CSS classes. With these classes it is possible to show or hide elements based on screen size or device orientation etc..

Valid screen size parameter values and corresponding screen widths:

  • primary for small screen (width: 0px - 640px)
  • secondary for medium screen (width: 641px - 1024px)
  • success for large screen (width: 1025px - 1440px)
  • warning for X-large screen (width: 1441px - 1920px)
  • alert for XX-large screen (width: 1921px...)

Implementing Colourable: The ColourableAdapter adapter

ColourableAdapter provides a straightforward adapter for any Component component to be used as a Colourable component.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Core;
    4.  
    5. use Sphp\Html\Tags;
    6.  
    7. $button = Tags::pushButton('Push me!')->addCssClass('button');
    8.  
    9. $adapter = new ColourableAdapter($button);
    10. echo $adapter->setColor('alert');
    11. echo $adapter->setColor('success');
    12.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

Changing component alignment: using AlingmentAdapter instance

Foundation framework introduces special alignment CSS classes. With these classes it is possible to show or hide elements based on screen size or device orientation etc..

Valid screen size parameter values and corresponding screen widths:

  • small for small screen (width: 0px - 640px)
  • medium for medium screen (width: 641px - 1024px)
  • large for large screen (width: 1025px - 1440px)
  • xlarge for X-large screen (width: 1441px - 1920px)
  • xxlarge for XX-large screen (width: 1921px...)
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Core;
    4.  
    5. use Sphp\Html\Foundation\Sites\Grids\ContainerCell;
    6. use Sphp\Html\Foundation\Sites\Grids\BasicRow;
    7.  
    8. $cols1[] = ContainerCell::create('align-center', ['small-3']);
    9. $cols1[] = ContainerCell::create('align-center', ['small-3']);
    10. $row1 = BasicRow::from($cols1);
    11.  
    12. $alignmentManager = new AlingmentAdapter($row1);
    13.  
    14. $alignmentManager->setHorizontalAlignment('align-center');
    15. $row1->printHtml();
    16.  
    17. $cols2[] = ContainerCell::create('align-right', ['small-3']);
    18. $cols2[] = ContainerCell::create('align-right', ['small-3']);
    19. $row2 = BasicRow::from($cols2);
    20. $alignmentManager2 = new AlingmentAdapter($row2);
    21.  
    22. $alignmentManager2->setHorizontalAlignment('align-right');
    23. $row2->printHtml();
    24.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1. <div class="grid-x align-center">
    2.     <div class="cell small-3">align-center</div>
    3.     <div class="cell small-3">align-center</div>
    4. </div>
    5. <div class="grid-x align-right">
    6.     <div class="cell small-3">align-right</div>
    7.     <div class="cell small-3">align-right</div>
    8. </div>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    align-center
    align-center
    align-right
    align-right