Skip to content

Instantly share code, notes, and snippets.

@steveosoule

steveosoule/mm-theme-styles__styleguide.html

Created January 26, 2026 18:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save steveosoule/4a29ef4572679c74b3b1c2b50f9ce109 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save steveosoule/4a29ef4572679c74b3b1c2b50f9ce109 to your computer and use it in GitHub Desktop.
Download ZIP
mm-theme-styles Styleguide
Raw
mm-theme-styles__styleguide.html
<style>
/* Your existing CSS would go here */
/* Additional styleguide-specific styles */
body {
font-family: Inter, sans-serif;
margin: 0;
padding: 2rem;
background-color: #f8f9fa;
}
.styleguide-container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e9ecef;
}
.section:last-child {
border-bottom: none;
}
.section-title {
color: #111111;
font-size: 24px;
font-weight: 700;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #111111;
}
.sample-item {
margin-bottom: 1rem;
padding: 0.5rem 0;
}
.sample-label {
font-size: 12px;
color: #666;
font-weight: 500;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.button-sample {
text-align: center;
padding: 1rem;
border: 1px solid #e9ecef;
border-radius: 4px;
background: #f8f9fa;
}
.responsive-note {
background: #e3f2fd;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
font-size: 14px;
color: #1565c0;
}
</style>
<div class="styleguide-container">
<h1 class="mm-theme-typography-display-one" style="text-align: center; margin-bottom: 2rem;">MM Theme Styleguide</h1>
<!-- Typography Section -->
<div class="section">
<h2 class="section-title">Typography</h2>
<div class="responsive-note">
<strong>Note:</strong> Typography scales responsively at tablet (≤59.999em) and mobile (≤39.999em) breakpoints.
</div>
<h3 class="mm-theme-typography-title-three">Display Styles</h3>
<div class="sample-item">
<div class="sample-label">Display One</div>
<div class="mm-theme-typography-display-one">The quick brown fox jumps</div>
</div>
<div class="sample-item">
<div class="sample-label">Display Two</div>
<div class="mm-theme-typography-display-two">The quick brown fox jumps</div>
</div>
<div class="sample-item">
<div class="sample-label">Display Three</div>
<div class="mm-theme-typography-display-three">The quick brown fox jumps</div>
</div>
<h3 class="mm-theme-typography-title-three">Title Styles</h3>
<div class="sample-item">
<div class="sample-label">Title One</div>
<div class="mm-theme-typography-title-one">The quick brown fox jumps over the lazy dog</div>
</div>
<div class="sample-item">
<div class="sample-label">Title Two</div>
<div class="mm-theme-typography-title-two">The quick brown fox jumps over the lazy dog</div>
</div>
<div class="sample-item">
<div class="sample-label">Title Three</div>
<div class="mm-theme-typography-title-three">The quick brown fox jumps over the lazy dog</div>
</div>
<div class="sample-item">
<div class="sample-label">Title Four</div>
<div class="mm-theme-typography-title-four">The quick brown fox jumps over the lazy dog</div>
</div>
<h3 class="mm-theme-typography-title-three">Subheading Styles</h3>
<div class="sample-item">
<div class="sample-label">Subheading Large</div>
<div class="mm-theme-typography-subheading-large">The quick brown fox jumps over the lazy dog and continues running through the forest.</div>
</div>
<div class="sample-item">
<div class="sample-label">Subheading Small</div>
<div class="mm-theme-typography-subheading-small">The quick brown fox jumps over the lazy dog and continues running through the forest.</div>
</div>
<div class="sample-item">
<div class="sample-label">Subheading Extra Small</div>
<div class="mm-theme-typography-subheading-extra-small">The quick brown fox jumps over the lazy dog and continues running through the forest.</div>
</div>
<h3 class="mm-theme-typography-title-three">Paragraph Styles</h3>
<div class="sample-item">
<div class="sample-label">Paragraph Large</div>
<div class="mm-theme-typography-paragraph-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="sample-item">
<div class="sample-label">Paragraph Small</div>
<div class="mm-theme-typography-paragraph-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="sample-item">
<div class="sample-label">Paragraph Extra Small</div>
<div class="mm-theme-typography-paragraph-extra-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<!-- Primary Buttons Section -->
<div class="section">
<h2 class="section-title">Primary Buttons</h2>
<div class="button-grid">
<div class="button-sample">
<div class="sample-label">Large</div>
<button class="mm-theme-button-primary mm-theme-button-primary__large">Primary Large</button>
</div>
<div class="button-sample">
<div class="sample-label">Medium</div>
<button class="mm-theme-button-primary mm-theme-button-primary__medium">Primary Medium</button>
</div>
<div class="button-sample">
<div class="sample-label">Small</div>
<button class="mm-theme-button-primary mm-theme-button-primary__small">Primary Small</button>
</div>
<div class="button-sample">
<div class="sample-label">Extra Small</div>
<button class="mm-theme-button-primary mm-theme-button-primary__extra-small">Primary XS</button>
</div>
</div>
<div style="margin-top: 1rem;">
<div class="sample-label">Disabled State</div>
<button class="mm-theme-button-primary mm-theme-button-primary__medium" disabled>Disabled Primary</button>
</div>
</div>
<!-- Secondary Buttons Section -->
<div class="section">
<h2 class="section-title">Secondary Buttons</h2>
<div class="button-grid">
<div class="button-sample">
<div class="sample-label">Large</div>
<button class="mm-theme-button-secondary mm-theme-button-secondary__large">Secondary Large</button>
</div>
<div class="button-sample">
<div class="sample-label">Medium</div>
<button class="mm-theme-button-secondary mm-theme-button-secondary__medium">Secondary Medium</button>
</div>
<div class="button-sample">
<div class="sample-label">Small</div>
<button class="mm-theme-button-secondary mm-theme-button-secondary__small">Secondary Small</button>
</div>
<div class="button-sample">
<div class="sample-label">Extra Small</div>
<button class="mm-theme-button-secondary mm-theme-button-secondary__extra-small">Secondary XS</button>
</div>
</div>
<div style="margin-top: 1rem;">
<div class="sample-label">Disabled State</div>
<button class="mm-theme-button-secondary mm-theme-button-secondary__medium" disabled>Disabled Secondary</button>
</div>
</div>
<!-- Display Link Buttons Section -->
<div class="section">
<h2 class="section-title">Display Link Buttons</h2>
<div class="button-grid">
<div class="button-sample">
<div class="sample-label">Large</div>
<a href="#" class="mm-theme-button-display-link mm-theme-button-display-link__large">Display Link Large</a>
</div>
<div class="button-sample">
<div class="sample-label">Medium</div>
<a href="#" class="mm-theme-button-display-link mm-theme-button-display-link__medium">Display Link Medium</a>
</div>
<div class="button-sample">
<div class="sample-label">Small</div>
<a href="#" class="mm-theme-button-display-link mm-theme-button-display-link__small">Display Link Small</a>
</div>
<div class="button-sample">
<div class="sample-label">Extra Small</div>
<a href="#" class="mm-theme-button-display-link mm-theme-button-display-link__extra-small">Display Link XS</a>
</div>
</div>
<div style="margin-top: 1rem;">
<div class="sample-label">Disabled State</div>
<button class="mm-theme-button-display-link mm-theme-button-display-link__medium" disabled>Disabled Display Link</button>
</div>
</div>
<!-- Primary Link Buttons Section -->
<div class="section">
<h2 class="section-title">Primary Link Buttons</h2>
<div class="button-grid">
<div class="button-sample">
<div class="sample-label">Large</div>
<a href="#" class="mm-theme-button-primary-link mm-theme-button-primary-link__large">Primary Link Large</a>
</div>
<div class="button-sample">
<div class="sample-label">Medium</div>
<a href="#" class="mm-theme-button-primary-link mm-theme-button-primary-link__medium">Primary Link Medium</a>
</div>
<div class="button-sample">
<div class="sample-label">Small</div>
<a href="#" class="mm-theme-button-primary-link mm-theme-button-primary-link__small">Primary Link Small</a>
</div>
<div class="button-sample">
<div class="sample-label">Extra Small</div>
<a href="#" class="mm-theme-button-primary-link mm-theme-button-primary-link__extra-small">Primary Link XS</a>
</div>
</div>
<div style="margin-top: 1rem;">
<div class="sample-label">Disabled State</div>
<button class="mm-theme-button-primary-link mm-theme-button-primary-link__medium" disabled>Disabled Primary Link</button>
</div>
</div>
<!-- Secondary Link Buttons Section -->
<div class="section">
<h2 class="section-title">Secondary Link Buttons</h2>
<div class="button-grid">
<div class="button-sample">
<div class="sample-label">Large</div>
<a href="#" class="mm-theme-button-secondary-link mm-theme-button-secondary-link__large">Secondary Link Large</a>
</div>
<div class="button-sample">
<div class="sample-label">Medium</div>
<a href="#" class="mm-theme-button-secondary-link mm-theme-button-secondary-link__medium">Secondary Link Medium</a>
</div>
<div class="button-sample">
<div class="sample-label">Small</div>
<a href="#" class="mm-theme-button-secondary-link mm-theme-button-secondary-link__small">Secondary Link Small</a>
</div>
<div class="button-sample">
<div class="sample-label">Extra Small</div>
<a href="#" class="mm-theme-button-secondary-link mm-theme-button-secondary-link__extra-small">Secondary Link XS</a>
</div>
</div>
<div style="margin-top: 1rem;">
<div class="sample-label">Disabled State</div>
<button class="mm-theme-button-secondary-link mm-theme-button-secondary-link__medium" disabled>Disabled Secondary Link</button>
</div>
</div>
<!-- Usage Examples Section -->
<div class="section">
<h2 class="section-title">Real-world Usage Examples</h2>
<!-- Hero Section Example -->
<div style="text-align: center; padding: 2rem; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 8px; margin-bottom: 2rem;">
<h1 class="mm-theme-typography-display-two">Welcome to Our Store</h1>
<p class="mm-theme-typography-subheading-large" style="margin: 1rem 0 2rem;">Discover amazing products at unbeatable prices</p>
<button class="mm-theme-button-primary mm-theme-button-primary__large" style="margin-right: 1rem;">Shop Now</button>
<button class="mm-theme-button-secondary mm-theme-button-secondary__large">Learn More</button>
</div>
<!-- Card Example -->
<div style="border: 1px solid #e9ecef; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem;">
<h3 class="mm-theme-typography-title-three" style="margin-top: 0;">Product Card Example</h3>
<p class="mm-theme-typography-paragraph-large">This is a sample product description that shows how the typography and buttons work together in a real interface.</p>
<div style="margin-top: 1rem;">
<button class="mm-theme-button-primary mm-theme-button-primary__medium" style="margin-right: 0.5rem;">Add to Cart</button>
<a href="#" class="mm-theme-button-primary-link mm-theme-button-primary-link__medium">View Details</a>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment