diff --git a/examples/responsive.html b/examples/responsive.html new file mode 100644 index 000000000..6c893eb48 --- /dev/null +++ b/examples/responsive.html @@ -0,0 +1,686 @@ + + + + + + + + + + Responsive Elements - Semantic + + + + + + + + +

Responsive UI Examples

+ + +

Basic Responsive

+ + +

Container

+
+
+
Content
+
Content
+
Content
+
Content
+
+
+

Text Container

+
+
+
Content
+
Content
+
Content
+
Content
+
+
+ +

Stackable Grid

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ + +

Doubling Grid

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Doubling Stackable Grid

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Nested Stackable Grid

+
+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
+
+ + +

Stackable Grid Container

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ + +

Doubling Grid Container

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Doubling Stackable Grid Container

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Device Adjustment

+ +

Device Column Width

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Device Visibility

+
+
+
Widescreen
+
+
+
Widescreen
+
+
+
Large Screen
+
+
+
Large Screen
+
+
+
Tablet and Mobile
+
+
+
Tablet and Mobile
+
+
+
Mobile
+
+
+
+
Computer and Up
+
+
+
Computer and Up
+
+
+
+
Tablet Only Content
+
+
+
Tablet Only Content
+
+
+
Tablet Only Content
+
+
+
Tablet Only Content
+
+
+ + +

Responsive Grid with Variations

+ +

Stackable Divided Grid

+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+ +

Stackable Vertically Divided Grid

+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+ +

Celled Doubling Stackable Grid

+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+

Consecutive Doubling Stackable Grid

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Grid Container

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Responsive Elements

+ + +

Responsive Vertical Divider

+ +
+
+
Content
+
+
+ Or +
+
+
Content
+
+
+ + +

Responsive Table

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
EmployeeCorrect Guesses
+

+ +
+ Lena +
Human Resources +
+
+

+ 22 +
+

+ +
+ Matthew +
Fabric Design +
+
+

+ 15 +
+

+ +
+ Lindsay +
Entertainment +
+
+

+ 12 +
+

+ +
+ Mark +
Executive +
+
+

+ 11 +
+
+ +

Responsive Menu

+ +
+
+ +
+ Features + Testimonials + Sign-in +
+ +

Responsive Item

+ +
+
+
+
+ +
+
+ Content Header +
+ Date + Category +
+
+ A description which may flow for several lines and give context to the content. +
+
+ Username +
+
+
+
+
+ +
+
+ Content Header +
+ Date + Category +
+
+ A description which may flow for several lines and give context to the content. +
+
+
+ Primary + +
+
Limited
+
+
+
+
+
+ +
+
+ Content Header +
+ Date + Category +
+
+ A description which may flow for several lines and give context to the content. +
+
+
+ Primary + +
+
+
+
+
+
+ +

Responsive Steps

+ +
+
+
+ +
+
Shipping
+
Choose your shipping options
+
+
+
+ +
+
Billing
+
Enter billing information
+
+
+
+ +
+
Confirm Order
+
+
+
+
+ + + + + + + + +