Bootstrap Components

Alerts

Alert messages can be used to notify the user about something special: danger, success, information or warning. ^[1]

Bootstrap Carousel

Similar to Banners, Carousels are a component that score highly in the visual hierarchy, used to convey multiple messages to the user or provide quick access to their respective page. ^[2]

Carousel variants

WHAT WE OFFER?

=&

SPHPlayground solutions offers Full Stack Web Design and maintenance services to small businesess. Using our advanced tools we can create simple but yet effective WEB solutions with minimal requirements.

We can build anything from a simple static web site to a small interactive web application.

MINIMAL SYSTEM REQUIREMENTS

+++?=

Note:
It is recommended to use the latest stable PHP version whenever possible. For example Playground installed here runs on PHP 8.3.23.

Detailed requirements

RESPONSIVE WEB DESIGN

++=

Our products aim to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.

More about Responsive web design:

• Wikipedia
• w3schools.com
• MDN web docs

JavaScript

+++|=

SPHPlayground's client is build with SASS and JavaScript. You can build your own versions of css and js files using gulp tasks.

---

Server side

+?+?=

You can have your own webserver allready... Or we take care of all WEB server related issues.

We can customise all services to meet with your needs.

SASS & CSS

+=

Sass is a CSS extension language, adding rules, variables, mixins, selector inheritance and etc.

Framework uses either Bootstrap or Foundation Sass components to build CSS for client side projects

---

Photo #1

cows
width: 1200, height: 600

Photo #2

rainbow
width: 1200, height: 600

Photo #3

sunset
width: 1200, height: 600

PreviousNext

Offcanvas

Offcanvas is a sidebar component that can be toggled to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific offcanvas elements. ^[3]

Placement

The placement of the offcanvas component is managed with Position enum. The default placement for Offcanvas components is Position::start. The placement can be changed either in constructor or using Offcanvas::setPosition() method.

• Position::start enum case or string values (start, offcanvas-start) places offcanvas on the left of the viewport.
• Position::end enum case or string values (end, offcanvas-end) places offcanvas on the right of the viewport
• Position::top enum case or string values (top, offcanvas-top) places offcanvas on the top of the viewport
• Position::bottom enum case or string values (bottom, offcanvas-bottom) places offcanvas on the bottom of the viewport