diff --git a/docs/examples/dashboard-bs4/dashboard.scss b/docs/examples/dashboard-bs4/dashboard.scss new file mode 100644 index 00000000..ed2cd340 --- /dev/null +++ b/docs/examples/dashboard-bs4/dashboard.scss @@ -0,0 +1,110 @@ +--- +--- + +/* + * Base structure + */ + +/* Move down content because we have a fixed navbar that is 50px tall */ +body { + padding-top: 50px; +} + + +/* + * Global add-ons + */ + +.sub-header { + padding-bottom: 10px; + border-bottom: 1px solid #eee; +} + +/* + * Top navigation + * Hide default border to remove 1px line. + */ +.navbar-fixed-top { + border: 0; +} + +/* + * Sidebar + */ + +/* Hide for mobile, show later */ +.sidebar { + display: none; +} +@media (min-width: 768px) { + .sidebar { + position: fixed; + top: 51px; + bottom: 0; + left: 0; + z-index: 1000; + display: block; + padding: 20px; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ + background-color: #f5f5f5; + border-right: 1px solid #eee; + } +} + +/* Sidebar navigation */ +.nav-sidebar { + margin-right: -21px; /* 20px padding + 1px border */ + margin-bottom: 20px; + margin-left: -20px; +} +.nav-sidebar > li > a { + padding-right: 20px; + padding-left: 20px; +} +.nav-sidebar > .active > a { + &, + &:hover, + &:focus { + color: #fff; + background-color: #428bca; + } +} + + +/* + * Main content + */ + +.main { + padding: 20px; +} +@media (min-width: 768px) { + .main { + padding-right: 40px; + padding-left: 40px; + } +} +.main .page-header { + margin-top: 0; +} + + +/* + * Placeholder dashboard ideas + */ + +.placeholders { + margin-bottom: 30px; + text-align: center; +} +.placeholders h4 { + margin-bottom: 0; +} +.placeholder { + margin-bottom: 20px; +} +.placeholder img { + display: inline-block; + border-radius: 50%; +} diff --git a/docs/examples/dashboard-bs4/index.md b/docs/examples/dashboard-bs4/index.md new file mode 100644 index 00000000..ef3bdf31 --- /dev/null +++ b/docs/examples/dashboard-bs4/index.md @@ -0,0 +1,210 @@ +--- +layout: example +title: Dashboard BS4 Template +group: material-design +--- + + + + + + + +
+
+
+ + + +
+
+

Dashboard

+ +
+
+ Generic placeholder thumbnail +

Label

+ Something else +
+
+ Generic placeholder thumbnail +

Label

+ Something else +
+
+ Generic placeholder thumbnail +

Label

+ Something else +
+
+ Generic placeholder thumbnail +

Label

+ Something else +
+
+ +

Section title

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeaderHeaderHeaderHeader
1,001Loremipsumdolorsit
1,002ametconsecteturadipiscingelit
1,003IntegernecodioPraesent
1,003liberoSedcursusante
1,004dapibusdiamSednisi
1,005Nullaquissemat
1,006nibhelementumimperdietDuis
1,007sagittisipsumPraesentmauris
1,008Fuscenectellussed
1,009auguesemperportaMauris
1,010massaVestibulumlaciniaarcu
1,011egetnullaClassaptent
1,012tacitisociosquadlitora
1,013torquentperconubianostra
1,014perinceptoshimenaeosCurabitur
1,015sodalesligulainlibero
+
+
+
+
diff --git a/docs/examples/dashboard/dashboard.scss b/docs/examples/dashboard/dashboard.scss new file mode 100644 index 00000000..ae09f045 --- /dev/null +++ b/docs/examples/dashboard/dashboard.scss @@ -0,0 +1,117 @@ +--- +--- + +body { + /* Show it's not fixed to the top */ + min-height: 75rem; + padding-top: 6rem; +} + +// +///* +// * Base structure +// */ +// +///* Move down content because we have a fixed navbar that is 50px tall */ +//body { +// padding-top: 50px; +//} +// +// +///* +// * Global add-ons +// */ +// +//.sub-header { +// padding-bottom: 10px; +// border-bottom: 1px solid #eee; +//} +// +///* +// * Top navigation +// * Hide default border to remove 1px line. +// */ +//.navbar-fixed-top { +// border: 0; +//} +// +///* +// * Sidebar +// */ +// +///* Hide for mobile, show later */ +//.sidebar { +// display: none; +//} +//@media (min-width: 768px) { +// .sidebar { +// position: fixed; +// top: 51px; +// bottom: 0; +// left: 0; +// z-index: 1000; +// display: block; +// padding: 20px; +// overflow-x: hidden; +// overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +// background-color: #f5f5f5; +// border-right: 1px solid #eee; +// } +//} +// +///* Sidebar navigation */ +//.nav-sidebar { +// margin-right: -21px; /* 20px padding + 1px border */ +// margin-bottom: 20px; +// margin-left: -20px; +//} +//.nav-sidebar > li > a { +// padding-right: 20px; +// padding-left: 20px; +//} +//.nav-sidebar > .active > a { +// &, +// &:hover, +// &:focus { +// color: #fff; +// background-color: #428bca; +// } +//} +// +// +///* +// * Main content +// */ +// +//.main { +// padding: 20px; +//} +//@media (min-width: 768px) { +// .main { +// padding-right: 40px; +// padding-left: 40px; +// } +//} +//.main .page-header { +// margin-top: 0; +//} +// +// +///* +// * Placeholder dashboard ideas +// */ +// +//.placeholders { +// margin-bottom: 30px; +// text-align: center; +//} +//.placeholders h4 { +// margin-bottom: 0; +//} +//.placeholder { +// margin-bottom: 20px; +//} +//.placeholder img { +// display: inline-block; +// border-radius: 50%; +//} diff --git a/docs/examples/dashboard/index.md b/docs/examples/dashboard/index.md new file mode 100644 index 00000000..af2d313d --- /dev/null +++ b/docs/examples/dashboard/index.md @@ -0,0 +1,48 @@ +--- +layout: example +title: Dashboard Template +group: material-design +--- + + + + + +
+ +
+ + + +
+
+ +
+
+

Navbar example

+

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.

+ View navbar docs » +
+
diff --git a/docs/examples/index.md b/docs/examples/index.md index 457a8f7b..cfb74713 100644 --- a/docs/examples/index.md +++ b/docs/examples/index.md @@ -3,49 +3,50 @@ layout: simple title: Examples --- -## Framework +## Templates -Examples that focus on implementing uses of built-in components provided by Bootstrap. +Templates that give a quick structural start to using Material Design for Bootstrap. -
- -
+
+

Starter Template

Nothing but the basics: compiled CSS and JavaScript.

launch Launch
- - +
+

Dashboard

+

Dashboard with a drawer

+ launch Launch +
- -
+
-## Custom components +## Components -Brand new components and templates to help folks quickly get started with Material Design for Bootstrap and demonstrate best practices for adding onto the framework. - -
- -
-

Sign-in page

-

Custom form layout and design for a simple sign in form.

- launch Launch -
+Components and templates to help folks quickly get started with Material Design for Bootstrap and demonstrate best practices for adding onto the framework. +
+
+

Sign-in page

+

Custom form layout and design for a simple sign in form.

+ launch Launch +
## Experiments Examples that focus on future-friendly features or techniques. -
-
+
+

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.

launch Launch