@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/_base-css-variables.scss

@@ -0,0 +1,348 @@
+// ============================================================================
+// BASE CSS VARIABLES OUTPUT MIXIN
+// ============================================================================
+// This mixin outputs all $base-* SCSS variables as --base-* CSS custom properties.
+// Include this in themes to enable web component theming.
+//
+// Usage in theme file:
+//   @import '../base-css-variables';
+//   :root {
+//     @include output-base-css-variables;
+//   }
+//
+// Web components consume these via fallback chains:
+//   --ms-accent-color: var(--base-accent-color, #3b82f6);
+// ============================================================================
+
+@mixin output-base-css-variables {
+  // === Colors ===
+  --base-accent-color: #{$base-accent-color};
+  --base-accent-color-hover: #{$base-accent-color-hover};
+  --base-accent-color-active: #{$base-accent-color-active};
+  --base-accent-color-light: #{$base-accent-color-light};
+  --base-accent-color-light-hover: #{$base-accent-color-light-hover};
+  --base-primary-bg: #{$base-primary-bg};
+  --base-primary-bg-hover: #{$base-primary-bg-hover};
+  --base-text-color-1: #{$base-text-color-1};
+  --base-text-color-2: #{$base-text-color-2};
+  --base-text-color-3: #{$base-text-color-3};
+  --base-text-color-4: #{$base-text-color-4};
+  --base-text-color-on-accent: #{$base-text-color-on-accent};
+  --base-border-color: #{$base-border-color};
+  --base-border: #{$base-border};
+
+  // === Input Fields ===
+  --base-input-bg: #{$base-input-bg};
+  --base-input-color: #{$base-input-color};
+  --base-input-border: #{$base-input-border};
+  --base-input-border-hover: #{$base-input-border-hover};
+  --base-input-border-focus: #{$base-input-border-focus};
+  --base-input-placeholder-color: #{$base-input-placeholder-color};
+  --base-input-bg-disabled: #{$base-input-bg-disabled};
+
+  // === Input Size Heights ===
+  --base-input-size-xs-height: #{$base-input-size-xs-height};
+  --base-input-size-sm-height: #{$base-input-size-sm-height};
+  --base-input-size-md-height: #{$base-input-size-md-height};
+  --base-input-size-lg-height: #{$base-input-size-lg-height};
+  --base-input-size-xl-height: #{$base-input-size-xl-height};
+
+  // === Dropdown/Popover ===
+  --base-dropdown-bg: #{$base-dropdown-bg};
+  --base-dropdown-border: #{$base-dropdown-border};
+  --base-dropdown-box-shadow: #{$base-dropdown-box-shadow};
+
+  // === Tooltip ===
+  --base-tooltip-bg: #{$base-tooltip-bg};
+  --base-tooltip-text-color: #{$base-tooltip-text-color};
+
+  // === Typography ===
+  --base-font-family: #{$base-font-family};
+  --base-font-size-2xs: #{$base-font-size-2xs};
+  --base-font-size-xs: #{$base-font-size-xs};
+  --base-font-size-sm: #{$base-font-size-sm};
+  --base-font-size-base: #{$base-font-size-base};
+  --base-font-size-lg: #{$base-font-size-lg};
+  --base-font-size-xl: #{$base-font-size-xl};
+  --base-font-size-2xl: #{$base-font-size-2xl};
+  --base-font-weight-normal: #{$base-font-weight-normal};
+  --base-font-weight-medium: #{$base-font-weight-medium};
+  --base-font-weight-semibold: #{$base-font-weight-semibold};
+  --base-line-height-tight: #{$base-line-height-tight};
+  --base-line-height-normal: #{$base-line-height-normal};
+  --base-line-height-relaxed: #{$base-line-height-relaxed};
+
+  // === Border Radius ===
+  --base-border-radius-sm: #{$base-border-radius-sm};
+  --base-border-radius-md: #{$base-border-radius-md};
+  --base-border-radius-lg: #{$base-border-radius-lg};
+}
+
+// ============================================================================
+// PURE ADMIN THEME CSS VARIABLES OUTPUT MIXIN
+// ============================================================================
+// This mixin outputs all themeable SCSS variables as --pa-* CSS custom properties.
+// Components use var(--pa-*) for runtime theme switching capability.
+//
+// Usage in theme file:
+//   :root, .theme-light {
+//     @include output-pa-css-variables;
+//   }
+//   .theme-dark {
+//     @include output-pa-css-variables;
+//   }
+// ============================================================================
+
+@mixin output-pa-css-variables {
+  // =========================================================================
+  // CORE COLORS
+  // =========================================================================
+
+  // Background colors
+  --pa-primary-bg: #{$primary-bg};
+  --pa-bg-secondary: #{$bg-secondary};
+  --pa-content-bg: #{$content-background-color};
+
+  // Text colors
+  --pa-text-primary: #{$text-primary};
+  --pa-text-secondary: #{$text-secondary};
+
+  // Accent colors
+  --pa-accent: #{$accent-color};
+  --pa-accent-hover: #{$accent-hover};
+  --pa-accent-light: #{$accent-light};
+
+  // Border
+  --pa-border-color: #{$border-color};
+
+  // =========================================================================
+  // LAYOUT COLORS
+  // =========================================================================
+
+  // Header
+  --pa-header-bg: #{$header-bg};
+  --pa-header-border-color: #{$header-border-color};
+  --pa-header-text: #{$header-text};
+  --pa-header-text-secondary: #{$header-text-secondary};
+  --pa-header-profile-name-color: #{$header-profile-name-color};
+
+  // Sidebar
+  --pa-sidebar-bg: #{$sidebar-bg};
+  --pa-sidebar-text: #{$sidebar-text};
+  --pa-sidebar-text-secondary: #{$sidebar-text-secondary};
+  --pa-sidebar-submenu-bg: #{$sidebar-submenu-bg};
+  --pa-sidebar-submenu-hover-bg: #{$sidebar-submenu-hover-bg};
+  --pa-sidebar-submenu-active-bg: #{$sidebar-submenu-active-bg};
+
+  // Footer
+  --pa-footer-bg: #{$footer-bg};
+  --pa-footer-border-color: #{$footer-border-color};
+
+  // =========================================================================
+  // BUTTON COLORS
+  // =========================================================================
+
+  // Primary (uses accent color)
+  --pa-btn-primary-bg: #{$btn-primary-bg};
+  --pa-btn-primary-bg-hover: #{$btn-primary-bg-hover};
+  --pa-btn-primary-bg-light: #{$accent-light};
+  --pa-btn-primary-text: #{$btn-primary-text};
+
+  // Secondary
+  --pa-btn-secondary-bg: #{$btn-secondary-bg};
+  --pa-btn-secondary-bg-hover: #{$btn-secondary-bg-hover};
+  --pa-btn-secondary-text: #{$btn-secondary-text};
+
+  // Success
+  --pa-btn-success-bg: #{$btn-success-bg};
+  --pa-btn-success-bg-hover: #{$btn-success-bg-hover};
+  --pa-btn-success-text: #{$btn-success-text};
+
+  // Danger
+  --pa-btn-danger-bg: #{$btn-danger-bg};
+  --pa-btn-danger-bg-hover: #{$btn-danger-bg-hover};
+  --pa-btn-danger-text: #{$btn-danger-text};
+
+  // Warning
+  --pa-btn-warning-bg: #{$btn-warning-bg};
+  --pa-btn-warning-bg-hover: #{$btn-warning-bg-hover};
+  --pa-btn-warning-text: #{$btn-warning-text};
+
+  // Info
+  --pa-btn-info-bg: #{$btn-info-bg};
+  --pa-btn-info-bg-hover: #{$btn-info-bg-hover};
+  --pa-btn-info-text: #{$btn-info-text};
+
+  // Light
+  --pa-btn-light-bg: #{$btn-light-bg};
+  --pa-btn-light-bg-hover: #{$btn-light-bg-hover};
+  --pa-btn-light-text: #{$btn-light-text};
+
+  // Dark
+  --pa-btn-dark-bg: #{$btn-dark-bg};
+  --pa-btn-dark-bg-hover: #{$btn-dark-bg-hover};
+  --pa-btn-dark-text: #{$btn-dark-text};
+
+  // =========================================================================
+  // CONTEXTUAL/SEMANTIC COLORS
+  // =========================================================================
+
+  // Success
+  --pa-success-bg: #{$success-bg};
+  --pa-success-bg-hover: #{$success-bg-hover};
+  --pa-success-bg-light: #{$success-bg-light};
+  --pa-success-bg-subtle: #{$success-bg-subtle};
+  --pa-success-border: #{$success-border};
+  --pa-success-text: #{$success-text};
+  --pa-success-text-light: #{$success-text-light};
+
+  // Danger
+  --pa-danger-bg: #{$danger-bg};
+  --pa-danger-bg-hover: #{$danger-bg-hover};
+  --pa-danger-bg-light: #{$danger-bg-light};
+  --pa-danger-bg-subtle: #{$danger-bg-subtle};
+  --pa-danger-border: #{$danger-border};
+  --pa-danger-text: #{$danger-text};
+  --pa-danger-text-light: #{$danger-text-light};
+
+  // Warning
+  --pa-warning-bg: #{$warning-bg};
+  --pa-warning-bg-hover: #{$warning-bg-hover};
+  --pa-warning-bg-light: #{$warning-bg-light};
+  --pa-warning-bg-subtle: #{$warning-bg-subtle};
+  --pa-warning-border: #{$warning-border};
+  --pa-warning-text: #{$warning-text};
+  --pa-warning-text-light: #{$warning-text-light};
+
+  // Info
+  --pa-info-bg: #{$info-bg};
+  --pa-info-bg-hover: #{$info-bg-hover};
+  --pa-info-bg-light: #{$info-bg-light};
+  --pa-info-bg-subtle: #{$info-bg-subtle};
+  --pa-info-border: #{$info-border};
+  --pa-info-text: #{$info-text};
+  --pa-info-text-light: #{$info-text-light};
+
+  // =========================================================================
+  // CARD COLORS
+  // =========================================================================
+  --pa-card-bg: #{$card-bg};
+  --pa-card-header-bg: #{$card-header-bg};
+  --pa-card-footer-bg: #{$card-footer-bg};
+  --pa-card-tabs-bg: #{$card-tabs-bg};
+
+  // =========================================================================
+  // INPUT/FORM COLORS
+  // =========================================================================
+  --pa-input-bg: #{$input-bg};
+  --pa-input-border: #{$input-border};
+  --pa-input-text: #{$input-text};
+  --pa-input-focus-border-color: #{$input-focus-border-color};
+  --pa-select-focus-border-color: #{$select-focus-border-color};
+  --pa-textarea-focus-border-color: #{$textarea-focus-border-color};
+
+  // Checkbox
+  --pa-checkbox-border-color: #{$checkbox-border-color};
+  --pa-checkbox-border-color-hover: #{$checkbox-border-color-hover};
+  --pa-checkbox-border-color-checked: #{$checkbox-border-color-checked};
+  --pa-checkbox-bg: #{$checkbox-bg};
+  --pa-checkbox-bg-checked: #{$checkbox-bg-checked};
+  --pa-checkbox-bg-indeterminate: #{$checkbox-bg-indeterminate};
+  --pa-checkbox-checkmark-color: #{$checkbox-checkmark-color};
+  --pa-checkbox-focus-shadow: #{$checkbox-focus-shadow};
+
+  // Input group
+  --pa-input-group-prepend-bg: #{$input-group-prepend-bg};
+  --pa-input-group-prepend-text: #{$input-group-prepend-text};
+  --pa-input-group-append-bg: #{$input-group-append-bg};
+  --pa-input-group-append-text: #{$input-group-append-text};
+
+  // =========================================================================
+  // TABLE COLORS
+  // =========================================================================
+  --pa-table-bg: #{$table-bg};
+  --pa-table-header-bg: #{$table-header-bg};
+  --pa-table-stripe: #{$table-stripe};
+  --pa-table-hover-bg: #{$table-hover-bg};
+  --pa-table-hover-accent-color: #{$table-hover-accent-color};
+
+  // =========================================================================
+  // MODAL COLORS
+  // =========================================================================
+  --pa-modal-overlay-bg: #{$modal-overlay-bg};
+  --pa-modal-content-bg: #{$modal-content-bg};
+
+  // =========================================================================
+  // ALERT COLORS
+  // =========================================================================
+  --pa-alert-success-bg: #{$alert-success-bg};
+  --pa-alert-success-border: #{$alert-success-border};
+  --pa-alert-success-text: #{$alert-success-text};
+  --pa-alert-danger-bg: #{$alert-danger-bg};
+  --pa-alert-danger-border: #{$alert-danger-border};
+  --pa-alert-danger-text: #{$alert-danger-text};
+  --pa-alert-warning-bg: #{$alert-warning-bg};
+  --pa-alert-warning-border: #{$alert-warning-border};
+  --pa-alert-warning-text: #{$alert-warning-text};
+  --pa-alert-info-bg: #{$alert-info-bg};
+  --pa-alert-info-border: #{$alert-info-border};
+  --pa-alert-info-text: #{$alert-info-text};
+
+  // =========================================================================
+  // BADGE COLORS
+  // =========================================================================
+  --pa-badge-success-bg: #{$badge-success-bg};
+  --pa-badge-success-text: #{$badge-success-text};
+  --pa-badge-warning-bg: #{$badge-warning-bg};
+  --pa-badge-warning-text: #{$badge-warning-text};
+  --pa-badge-info-bg: #{$badge-info-bg};
+  --pa-badge-info-text: #{$badge-info-text};
+  --pa-badge-danger-bg: #{$badge-danger-bg};
+  --pa-badge-danger-text: #{$badge-danger-text};
+
+  // Composite badge
+  --pa-composite-badge-icon-bg: #{$composite-badge-icon-bg};
+  --pa-composite-badge-label-bg: #{$composite-badge-label-bg};
+  --pa-composite-badge-label-text: #{$composite-badge-label-text};
+  --pa-composite-badge-label-hover-bg: #{$composite-badge-label-hover-bg};
+
+  // =========================================================================
+  // TOOLTIP & POPOVER COLORS
+  // =========================================================================
+  --pa-tooltip-bg: #{$tooltip-bg};
+  --pa-tooltip-text: #{$tooltip-text};
+  --pa-popover-content-bg: #{$popover-content-bg};
+  --pa-popover-text-light: #{$popover-text-light};
+  --pa-popover-text-dark: #{$popover-text-dark};
+
+  // =========================================================================
+  // LOADER COLORS
+  // =========================================================================
+  --pa-loader-overlay-bg: #{$loader-overlay-bg};
+
+  // =========================================================================
+  // PROFILE PANEL COLORS
+  // =========================================================================
+  --pa-profile-overlay-bg: #{$profile-overlay-bg};
+
+  // =========================================================================
+  // COMMAND PALETTE COLORS
+  // =========================================================================
+  --pa-command-palette-backdrop-bg: #{$command-palette-backdrop-bg};
+  --pa-command-palette-item-hover-bg: #{$command-palette-item-hover-bg};
+  --pa-command-palette-item-active-bg: #{$command-palette-item-active-bg};
+  --pa-command-palette-highlight-bg: #{$command-palette-highlight-bg};
+  --pa-command-palette-highlight-text: #{$command-palette-highlight-text};
+
+  // =========================================================================
+  // MULTISELECT COLORS
+  // =========================================================================
+  --pa-multiselect-dropdown-bg: #{$multiselect-dropdown-bg};
+  --pa-multiselect-dropdown-border: #{$multiselect-dropdown-border};
+  --pa-multiselect-dropdown-text: #{$multiselect-dropdown-text};
+  --pa-multiselect-hint-bg: #{$multiselect-hint-bg};
+  --pa-multiselect-hint-border: #{$multiselect-hint-border};
+  --pa-multiselect-option-hover-bg: #{$multiselect-option-hover-bg};
+  --pa-multiselect-pill-bg: #{$multiselect-pill-bg};
+  --pa-multiselect-pill-border: #{$multiselect-pill-border};
+}

package/src/scss/_core.scss

@@ -0,0 +1,99 @@
+/* Pure Admin Visual Framework - Core Styles */
+
+// Forward variables so they're available to files that @use this module
+@forward 'variables/index';
+
+/* ========================================
+   Component Imports
+   Each component is now in its own file for better maintainability
+   ======================================== */
+
+// Base styles and resets
+@use 'core-components/base' as *;
+
+// Layout components (header, sidebar, footer, responsive)
+@use 'core-components/layout' as *;
+
+// Grid system and component layouts
+@use 'core-components/grid' as *;
+
+// Card components
+@use 'core-components/cards' as *;
+
+// Tab components
+@use 'core-components/tabs' as *;
+
+// Statistics components
+@use 'core-components/statistics' as *;
+
+// List components
+@use 'core-components/lists' as *;
+
+// Badge components (standard and composite)
+@use 'core-components/badges' as *;
+
+// Button components
+@use 'core-components/buttons' as *;
+
+// Loader animations
+@use 'core-components/loaders' as *;
+
+// Tooltips and popovers
+@use 'core-components/tooltips' as *;
+
+// Alert components
+@use 'core-components/alerts' as *;
+
+// Form elements
+@use 'core-components/forms' as *;
+
+// Web Components Theme Integration (for @keenmate components)
+@use 'core-components/web-components-theme' as *;
+
+// File selector components
+@use 'core-components/file-selector' as *;
+
+// Checkbox lists
+@use 'core-components/checkbox-lists' as *;
+
+// Table components
+@use 'core-components/tables' as *;
+
+// Comparison tables
+@use 'core-components/comparison' as *;
+
+// Code blocks and syntax display
+@use 'core-components/code' as *;
+
+// Pagination and load more
+@use 'core-components/pagers' as *;
+
+// Profile panel
+@use 'core-components/profile' as *;
+
+// Modal windows
+@use 'core-components/modals' as *;
+
+// Toast notifications
+@use 'core-components/toasts' as *;
+
+// Timeline components
+@use 'core-components/timeline' as *;
+
+// Command Palette
+@use 'core-components/command-palette' as *;
+
+// Logic Tree Renderer
+@use 'core-components/logic-tree' as *;
+
+// Notification bell
+@use 'core-components/notifications' as *;
+
+// Popconfirm (anchored confirmation dialogs)
+@use 'core-components/popconfirm' as *;
+
+// Settings Panel
+@use 'core-components/settings-panel' as *;
+
+// Utility classes and helpers
+@use 'core-components/utilities' as *;

package/src/scss/_fonts.scss

@@ -0,0 +1,67 @@
+/* Pure Admin Visual Framework - Default Font Definitions */
+
+// Default framework fonts - themes can override these
+
+// Delivery Font (framework default)
+@font-face {
+    font-family: "Delivery";
+    src: url(/fonts/Delivery/Delivery_W_Rg.woff2) format("woff2");
+}
+
+// Font size classes
+.font-size-small {
+  font-size: 14px;
+}
+
+.font-size-default {
+  font-size: 16px;
+}
+
+.font-size-large {
+  font-size: 18px;
+}
+
+.font-size-xlarge {
+  font-size: 20px;
+}
+
+// Font family classes with system defaults
+.font-family-system {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-sans {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-serif {
+  font-family: Georgia, "Times New Roman", Times, serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-mono {
+  font-family: "Courier New", Courier, monospace;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-delivery {
+  font-family: "Delivery", system-ui, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}

package/src/scss/_purecss-grid-responsive.scss

@@ -0,0 +1,138 @@
+/*!
+Pure v3.0.0 - Responsive Grid System Only (Minimal Extract)
+Copyright 2013 Yahoo!
+Licensed under the BSD License.
+https://github.com/pure-css/pure/blob/master/LICENSE
+*/
+
+/* Small Screens (sm) - 35.5em / 568px */
+@media screen and (min-width: 35.5em) {
+  .pure-u-sm-1, .pure-u-sm-1-1, .pure-u-sm-1-12, .pure-u-sm-1-2, .pure-u-sm-1-24, .pure-u-sm-1-3, .pure-u-sm-1-4, .pure-u-sm-1-5, .pure-u-sm-1-6, .pure-u-sm-1-8, .pure-u-sm-10-24, .pure-u-sm-11-12, .pure-u-sm-11-24, .pure-u-sm-12-24, .pure-u-sm-13-24, .pure-u-sm-14-24, .pure-u-sm-15-24, .pure-u-sm-16-24, .pure-u-sm-17-24, .pure-u-sm-18-24, .pure-u-sm-19-24, .pure-u-sm-2-24, .pure-u-sm-2-3, .pure-u-sm-2-5, .pure-u-sm-20-24, .pure-u-sm-21-24, .pure-u-sm-22-24, .pure-u-sm-23-24, .pure-u-sm-24-24, .pure-u-sm-3-24, .pure-u-sm-3-4, .pure-u-sm-3-5, .pure-u-sm-3-8, .pure-u-sm-4-24, .pure-u-sm-4-5, .pure-u-sm-5-12, .pure-u-sm-5-24, .pure-u-sm-5-5, .pure-u-sm-5-6, .pure-u-sm-5-8, .pure-u-sm-6-24, .pure-u-sm-7-12, .pure-u-sm-7-24, .pure-u-sm-7-8, .pure-u-sm-8-24, .pure-u-sm-9-24 { display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; }
+  .pure-u-sm-1-24 { width: 4.1667%; }
+  .pure-u-sm-1-12, .pure-u-sm-2-24 { width: 8.3333%; }
+  .pure-u-sm-1-8, .pure-u-sm-3-24 { width: 12.5%; }
+  .pure-u-sm-1-6, .pure-u-sm-4-24 { width: 16.6667%; }
+  .pure-u-sm-1-5 { width: 20%; }
+  .pure-u-sm-5-24 { width: 20.8333%; }
+  .pure-u-sm-1-4, .pure-u-sm-6-24 { width: 25%; }
+  .pure-u-sm-7-24 { width: 29.1667%; }
+  .pure-u-sm-1-3, .pure-u-sm-8-24 { width: 33.3333%; }
+  .pure-u-sm-3-8, .pure-u-sm-9-24 { width: 37.5%; }
+  .pure-u-sm-2-5 { width: 40%; }
+  .pure-u-sm-10-24, .pure-u-sm-5-12 { width: 41.6667%; }
+  .pure-u-sm-11-24 { width: 45.8333%; }
+  .pure-u-sm-1-2, .pure-u-sm-12-24 { width: 50%; }
+  .pure-u-sm-13-24 { width: 54.1667%; }
+  .pure-u-sm-14-24, .pure-u-sm-7-12 { width: 58.3333%; }
+  .pure-u-sm-3-5 { width: 60%; }
+  .pure-u-sm-15-24, .pure-u-sm-5-8 { width: 62.5%; }
+  .pure-u-sm-16-24, .pure-u-sm-2-3 { width: 66.6667%; }
+  .pure-u-sm-17-24 { width: 70.8333%; }
+  .pure-u-sm-18-24, .pure-u-sm-3-4 { width: 75%; }
+  .pure-u-sm-19-24 { width: 79.1667%; }
+  .pure-u-sm-4-5 { width: 80%; }
+  .pure-u-sm-20-24, .pure-u-sm-5-6 { width: 83.3333%; }
+  .pure-u-sm-21-24, .pure-u-sm-7-8 { width: 87.5%; }
+  .pure-u-sm-11-12, .pure-u-sm-22-24 { width: 91.6667%; }
+  .pure-u-sm-23-24 { width: 95.8333%; }
+  .pure-u-sm-1, .pure-u-sm-1-1, .pure-u-sm-24-24, .pure-u-sm-5-5 { width: 100%; }
+}
+
+/* Medium Screens (md) - 48em / 768px */
+@media screen and (min-width: 48em) {
+  .pure-u-md-1, .pure-u-md-1-1, .pure-u-md-1-12, .pure-u-md-1-2, .pure-u-md-1-24, .pure-u-md-1-3, .pure-u-md-1-4, .pure-u-md-1-5, .pure-u-md-1-6, .pure-u-md-1-8, .pure-u-md-10-24, .pure-u-md-11-12, .pure-u-md-11-24, .pure-u-md-12-24, .pure-u-md-13-24, .pure-u-md-14-24, .pure-u-md-15-24, .pure-u-md-16-24, .pure-u-md-17-24, .pure-u-md-18-24, .pure-u-md-19-24, .pure-u-md-2-24, .pure-u-md-2-3, .pure-u-md-2-5, .pure-u-md-20-24, .pure-u-md-21-24, .pure-u-md-22-24, .pure-u-md-23-24, .pure-u-md-24-24, .pure-u-md-3-24, .pure-u-md-3-4, .pure-u-md-3-5, .pure-u-md-3-8, .pure-u-md-4-24, .pure-u-md-4-5, .pure-u-md-5-12, .pure-u-md-5-24, .pure-u-md-5-5, .pure-u-md-5-6, .pure-u-md-5-8, .pure-u-md-6-24, .pure-u-md-7-12, .pure-u-md-7-24, .pure-u-md-7-8, .pure-u-md-8-24, .pure-u-md-9-24 { display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; }
+  .pure-u-md-1-24 { width: 4.1667%; }
+  .pure-u-md-1-12, .pure-u-md-2-24 { width: 8.3333%; }
+  .pure-u-md-1-8, .pure-u-md-3-24 { width: 12.5%; }
+  .pure-u-md-1-6, .pure-u-md-4-24 { width: 16.6667%; }
+  .pure-u-md-1-5 { width: 20%; }
+  .pure-u-md-5-24 { width: 20.8333%; }
+  .pure-u-md-1-4, .pure-u-md-6-24 { width: 25%; }
+  .pure-u-md-7-24 { width: 29.1667%; }
+  .pure-u-md-1-3, .pure-u-md-8-24 { width: 33.3333%; }
+  .pure-u-md-3-8, .pure-u-md-9-24 { width: 37.5%; }
+  .pure-u-md-2-5 { width: 40%; }
+  .pure-u-md-10-24, .pure-u-md-5-12 { width: 41.6667%; }
+  .pure-u-md-11-24 { width: 45.8333%; }
+  .pure-u-md-1-2, .pure-u-md-12-24 { width: 50%; }
+  .pure-u-md-13-24 { width: 54.1667%; }
+  .pure-u-md-14-24, .pure-u-md-7-12 { width: 58.3333%; }
+  .pure-u-md-3-5 { width: 60%; }
+  .pure-u-md-15-24, .pure-u-md-5-8 { width: 62.5%; }
+  .pure-u-md-16-24, .pure-u-md-2-3 { width: 66.6667%; }
+  .pure-u-md-17-24 { width: 70.8333%; }
+  .pure-u-md-18-24, .pure-u-md-3-4 { width: 75%; }
+  .pure-u-md-19-24 { width: 79.1667%; }
+  .pure-u-md-4-5 { width: 80%; }
+  .pure-u-md-20-24, .pure-u-md-5-6 { width: 83.3333%; }
+  .pure-u-md-21-24, .pure-u-md-7-8 { width: 87.5%; }
+  .pure-u-md-11-12, .pure-u-md-22-24 { width: 91.6667%; }
+  .pure-u-md-23-24 { width: 95.8333%; }
+  .pure-u-md-1, .pure-u-md-1-1, .pure-u-md-24-24, .pure-u-md-5-5 { width: 100%; }
+}
+
+/* Large Screens (lg) - 64em / 1024px */
+@media screen and (min-width: 64em) {
+  .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-1-12, .pure-u-lg-1-2, .pure-u-lg-1-24, .pure-u-lg-1-3, .pure-u-lg-1-4, .pure-u-lg-1-5, .pure-u-lg-1-6, .pure-u-lg-1-8, .pure-u-lg-10-24, .pure-u-lg-11-12, .pure-u-lg-11-24, .pure-u-lg-12-24, .pure-u-lg-13-24, .pure-u-lg-14-24, .pure-u-lg-15-24, .pure-u-lg-16-24, .pure-u-lg-17-24, .pure-u-lg-18-24, .pure-u-lg-19-24, .pure-u-lg-2-24, .pure-u-lg-2-3, .pure-u-lg-2-5, .pure-u-lg-20-24, .pure-u-lg-21-24, .pure-u-lg-22-24, .pure-u-lg-23-24, .pure-u-lg-24-24, .pure-u-lg-3-24, .pure-u-lg-3-4, .pure-u-lg-3-5, .pure-u-lg-3-8, .pure-u-lg-4-24, .pure-u-lg-4-5, .pure-u-lg-5-12, .pure-u-lg-5-24, .pure-u-lg-5-5, .pure-u-lg-5-6, .pure-u-lg-5-8, .pure-u-lg-6-24, .pure-u-lg-7-12, .pure-u-lg-7-24, .pure-u-lg-7-8, .pure-u-lg-8-24, .pure-u-lg-9-24 { display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; }
+  .pure-u-lg-1-24 { width: 4.1667%; }
+  .pure-u-lg-1-12, .pure-u-lg-2-24 { width: 8.3333%; }
+  .pure-u-lg-1-8, .pure-u-lg-3-24 { width: 12.5%; }
+  .pure-u-lg-1-6, .pure-u-lg-4-24 { width: 16.6667%; }
+  .pure-u-lg-1-5 { width: 20%; }
+  .pure-u-lg-5-24 { width: 20.8333%; }
+  .pure-u-lg-1-4, .pure-u-lg-6-24 { width: 25%; }
+  .pure-u-lg-7-24 { width: 29.1667%; }
+  .pure-u-lg-1-3, .pure-u-lg-8-24 { width: 33.3333%; }
+  .pure-u-lg-3-8, .pure-u-lg-9-24 { width: 37.5%; }
+  .pure-u-lg-2-5 { width: 40%; }
+  .pure-u-lg-10-24, .pure-u-lg-5-12 { width: 41.6667%; }
+  .pure-u-lg-11-24 { width: 45.8333%; }
+  .pure-u-lg-1-2, .pure-u-lg-12-24 { width: 50%; }
+  .pure-u-lg-13-24 { width: 54.1667%; }
+  .pure-u-lg-14-24, .pure-u-lg-7-12 { width: 58.3333%; }
+  .pure-u-lg-3-5 { width: 60%; }
+  .pure-u-lg-15-24, .pure-u-lg-5-8 { width: 62.5%; }
+  .pure-u-lg-16-24, .pure-u-lg-2-3 { width: 66.6667%; }
+  .pure-u-lg-17-24 { width: 70.8333%; }
+  .pure-u-lg-18-24, .pure-u-lg-3-4 { width: 75%; }
+  .pure-u-lg-19-24 { width: 79.1667%; }
+  .pure-u-lg-4-5 { width: 80%; }
+  .pure-u-lg-20-24, .pure-u-lg-5-6 { width: 83.3333%; }
+  .pure-u-lg-21-24, .pure-u-lg-7-8 { width: 87.5%; }
+  .pure-u-lg-11-12, .pure-u-lg-22-24 { width: 91.6667%; }
+  .pure-u-lg-23-24 { width: 95.8333%; }
+  .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-24-24, .pure-u-lg-5-5 { width: 100%; }
+}
+
+/* Extra Large Screens (xl) - 80em / 1280px */
+@media screen and (min-width: 80em) {
+  .pure-u-xl-1, .pure-u-xl-1-1, .pure-u-xl-1-12, .pure-u-xl-1-2, .pure-u-xl-1-24, .pure-u-xl-1-3, .pure-u-xl-1-4, .pure-u-xl-1-5, .pure-u-xl-1-6, .pure-u-xl-1-8, .pure-u-xl-10-24, .pure-u-xl-11-12, .pure-u-xl-11-24, .pure-u-xl-12-24, .pure-u-xl-13-24, .pure-u-xl-14-24, .pure-u-xl-15-24, .pure-u-xl-16-24, .pure-u-xl-17-24, .pure-u-xl-18-24, .pure-u-xl-19-24, .pure-u-xl-2-24, .pure-u-xl-2-3, .pure-u-xl-2-5, .pure-u-xl-20-24, .pure-u-xl-21-24, .pure-u-xl-22-24, .pure-u-xl-23-24, .pure-u-xl-24-24, .pure-u-xl-3-24, .pure-u-xl-3-4, .pure-u-xl-3-5, .pure-u-xl-3-8, .pure-u-xl-4-24, .pure-u-xl-4-5, .pure-u-xl-5-12, .pure-u-xl-5-24, .pure-u-xl-5-5, .pure-u-xl-5-6, .pure-u-xl-5-8, .pure-u-xl-6-24, .pure-u-xl-7-12, .pure-u-xl-7-24, .pure-u-xl-7-8, .pure-u-xl-8-24, .pure-u-xl-9-24 { display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; }
+  .pure-u-xl-1-24 { width: 4.1667%; }
+  .pure-u-xl-1-12, .pure-u-xl-2-24 { width: 8.3333%; }
+  .pure-u-xl-1-8, .pure-u-xl-3-24 { width: 12.5%; }
+  .pure-u-xl-1-6, .pure-u-xl-4-24 { width: 16.6667%; }
+  .pure-u-xl-1-5 { width: 20%; }
+  .pure-u-xl-5-24 { width: 20.8333%; }
+  .pure-u-xl-1-4, .pure-u-xl-6-24 { width: 25%; }
+  .pure-u-xl-7-24 { width: 29.1667%; }
+  .pure-u-xl-1-3, .pure-u-xl-8-24 { width: 33.3333%; }
+  .pure-u-xl-3-8, .pure-u-xl-9-24 { width: 37.5%; }
+  .pure-u-xl-2-5 { width: 40%; }
+  .pure-u-xl-10-24, .pure-u-xl-5-12 { width: 41.6667%; }
+  .pure-u-xl-11-24 { width: 45.8333%; }
+  .pure-u-xl-1-2, .pure-u-xl-12-24 { width: 50%; }
+  .pure-u-xl-13-24 { width: 54.1667%; }
+  .pure-u-xl-14-24, .pure-u-xl-7-12 { width: 58.3333%; }
+  .pure-u-xl-3-5 { width: 60%; }
+  .pure-u-xl-15-24, .pure-u-xl-5-8 { width: 62.5%; }
+  .pure-u-xl-16-24, .pure-u-xl-2-3 { width: 66.6667%; }
+  .pure-u-xl-17-24 { width: 70.8333%; }
+  .pure-u-xl-18-24, .pure-u-xl-3-4 { width: 75%; }
+  .pure-u-xl-19-24 { width: 79.1667%; }
+  .pure-u-xl-4-5 { width: 80%; }
+  .pure-u-xl-20-24, .pure-u-xl-5-6 { width: 83.3333%; }
+  .pure-u-xl-21-24, .pure-u-xl-7-8 { width: 87.5%; }
+  .pure-u-xl-11-12, .pure-u-xl-22-24 { width: 91.6667%; }
+  .pure-u-xl-23-24 { width: 95.8333%; }
+  .pure-u-xl-1, .pure-u-xl-1-1, .pure-u-xl-24-24, .pure-u-xl-5-5 { width: 100%; }
+}