1 files changed, 127 insertions, 0 deletions
diff --git a/css3/framework/helpers.css b/css3/framework/helpers.css
new file mode 100644
index 00000000..47c14126
--- /dev/null
+++ b/css3/framework/helpers.css
@@ -0,0 +1,127 @@
+/* bootstrap 4 inspired css helpers */
+
+.d-none { display: none !important; }
+.d-block { display: block !important; }
+.d-inline { display: block !important; }
+.d-flex { display: flex !important; }
+
+.single-line { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.tabular-nums { font-variant-numeric: tabular-nums; }
+
+.pull-right { float: right; }
+
+.flex-expand { flex: 1; }
+.jc-start { justify-content: flex-start; }
+.jc-end { justify-content: flex-end; }
+.jc-center { justify-content: center; }
+.jc-between { justify-content: space-between; }
+.align-items-center { align-items: center; }
+
+.img--fit {
+  width: 100%;
+  height: auto;
+}
+
+.img--rounded {
+  border-radius: 4px;
+}
+
+.elevation-1 {
+  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.18), 0 5px 15px rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0,0,0,0.1);
+}
+
+.svg-icon {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -.125em;
+}
+
+.semi-muted { color: #3f3f3f; }
+.muted { color: #6b6b6b; }
+
+.opacity-muted { opacity: 0.6; }
+
+.semi-bold { font-weight: 500; }
+.bold { font-weight: bold; }
+
+.fs-body { font-size: 1rem; }
+.fs-medium { font-size: 0.875rem; }
+
+.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
+.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
+.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
+.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
+.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
+.mx-5 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }
+
+.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
+.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
+.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
+.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
+.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
+.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
+
+.mb-0 { margin-bottom: 0 !important; }
+.mb-1 { margin-bottom: 0.25rem !important; }
+.mb-2 { margin-bottom: 0.5rem !important; }
+.mb-3 { margin-bottom: 1rem !important; }
+.mb-4 { margin-bottom: 1.5rem !important; }
+.mb-5 { margin-bottom: 2.5rem !important; }
+
+.mt-0 { margin-top: 0 !important; }
+.mt-1 { margin-top: 0.25rem !important; }
+.mt-2 { margin-top: 0.5rem !important; }
+.mt-3 { margin-top: 1rem !important; }
+.mt-4 { margin-top: 1.5rem !important; }
+.mt-5 { margin-top: 2.5rem !important; }
+
+.ml-0 { margin-left: 0 !important; }
+.ml-1 { margin-left: 0.25rem !important; }
+.ml-2 { margin-left: 0.5rem !important; }
+.ml-3 { margin-left: 1rem !important; }
+.ml-4 { margin-left: 1.5rem !important; }
+.ml-5 { margin-left: 2.5rem !important; }
+
+.mr-0 { margin-right: 0 !important; }
+.mr-1 { margin-right: 0.25rem !important; }
+.mr-2 { margin-right: 0.5rem !important; }
+.mr-3 { margin-right: 1rem !important; }
+.mr-4 { margin-right: 1.5rem !important; }
+.mr-5 { margin-right: 2.5rem !important; }
+
+@media (min-width: 576px) {
+  .d-sm-block { display: block !important; }
+  .d-sm-inline { display: inline !important; }
+  .d-sm-flex { display: flex !important; }
+  .d-sm-none { display: none !important; }
+  .text-sm-right { text-align: right; }
+}
+@media (min-width: 768px) {
+  .d-md-block { display: block !important; }
+  .d-md-inline { display: inline !important; }
+  .d-md-flex { display: flex !important; }
+  .d-md-none { display: none !important; }
+  .single-line-md { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+}
+@media (min-width: 992px) {
+  .d-lg-block { display: block !important; }
+  .d-lg-inline { display: inline !important; }
+  .d-lg-flex { display: flex !important; }
+  .d-lg-none { display: none !important; }
+}
+@media (min-width: 1200px) {
+  .d-xl-block { display: block !important; }
+  .d-xl-inline { display: inline !important; }
+  .d-xl-flex { display: flex !important; }
+  .d-xl-none { display: none !important; }
+}
+@media (min-width: 1360px) {
+  .d-xxl-block { display: block !important; }
+  .d-xxl-inline { display: inline !important; }
+  .d-xxl-flex { display: flex !important; }
+  .d-xxl-none { display: none !important; }
+}