Build semantic, accessible sites with Semantic Element

Powerful, extensible, and feature-packed semantic CSS framework. Build and customize with SCSS, utilize prebuilt grid system and components, and bring projects to life with optional JavaScript plugins.

npm install semantic-element
Get started Download
Currently v0.2.14

Get started any way you want

Install via package manager

Install Semantic Element's source SCSS and JavaScript files via npm, Yarn, or pnpm.

npm install semantic-element
Read installation docs

Include via CDN

When you only need to include Semantic Element's compiled CSS, you can use jsDelivr or unpkg.

<link rel="stylesheet" href="https://unpkg.com/semantic-element/dist/semantic-element.css">
Explore the docs

Read the docs

Get familiar with Semantic Element's semantic approach, grid system, components, and customization options.

Elements Grid System Components

Semantic HTML First

Semantic Element takes a unique approach by styling semantic HTML elements directly. Use native <button>, <table>, and <form> elements without wrapper classes. Write cleaner, more accessible HTML. 





  
    

      Name
      Email

Customize with SCSS

Utilize our source SCSS files to take advantage of variables, mixins, and functions to build faster and customize your project. 

// Import Semantic Element's source SCSS
@import "semantic-element/scss/semantic-element";

// Customize variables
$primary-color: #0d6efd;
$border-radius: 0.5rem;

// Add your own styles
.custom-component {
  color: $primary-color;
}

CSS Custom Properties

Semantic Element uses CSS custom properties (variables) for real-time customization. Change colors, spacing, and more without recompiling. 

:root {
  --primary-color: #0d6efd;
  --success-color: #198754;
  --spacing-unit: 1rem;
}

/* Use them anywhere */
.custom {
  color: var(--primary-color);
  padding: var(--spacing-unit);
}

Modular Components

Import only what you need. Semantic Element's modular architecture lets you include specific components and reduce your CSS footprint. 

// Import only what you need
@import "semantic-element/scss/variables";
@import "semantic-element/scss/mixins";
@import "semantic-element/scss/grid";
@import "semantic-element/scss/buttons";
@import "semantic-element/scss/forms";

Built with semantic components

Explore our extensive collection of semantic components. From buttons to complex forms, everything is built with accessibility and simplicity in mind.

Elements

Typography, buttons, forms, code, images, and more basic HTML elements.

View elements →

Grid System

Powerful mobile-first flexbox grid to build layouts of all shapes and sizes.

View grid system →

Components

Cards, alerts, navigation, modals, and 15+ prebuilt semantic components.

View components →