Semantic Element

Semantic Element is a semantic CSS framework that styles native HTML elements.

npm install semantic-element

yarn add semantic-element

pnpm add semantic-element

@import 'semantic-element/css';

Or link directly in HTML:

<link rel="stylesheet" href="node_modules/semantic-element/dist/semantic-element.css" />

@import 'semantic-element/scss';

You can also import individual components:

// Core
@import 'semantic-element/scss/variables';
@import 'semantic-element/scss/mixins';
@import 'semantic-element/scss/normalize';
@import 'semantic-element/scss/scaffolding';
@import 'semantic-element/scss/typography';

// Components
@import 'semantic-element/scss/buttons';
@import 'semantic-element/scss/grid';
@import 'semantic-element/scss/navbar';
@import 'semantic-element/scss/forms';
@import 'semantic-element/scss/tables';
@import 'semantic-element/scss/dialog';
@import 'semantic-element/scss/alerts';
@import 'semantic-element/scss/panels';
@import 'semantic-element/scss/tabs';
@import 'semantic-element/scss/pagination';
@import 'semantic-element/scss/tooltips';

// Vite
import 'semantic-element/css'

// Or with SCSS
@import 'semantic-element/scss'

• 📚 Full Documentation: https://semantic-element.com (Live examples and API reference)
• 📖 Source Code: scss/ (SCSS source files)
• 🐛 Issues: https://github.com/miclle/semantic-element/issues

• Reset - CSS normalize and reset
• Typography - Headings, paragraphs, lists, code
• Grid - Responsive grid system (2-12 columns)
• Buttons - Various button styles and sizes
• Forms - Styled form elements
• Tables - Clean table styles
• Navbar - Navigation bar component
• Sidebar - Sidebar component
• Dialog - Dialog component using native HTML dialog element
• Alerts - Alert and message styles
• Panels - Panel/card component
• Tabs - Tab navigation
• Pagination - Pagination component
• Progress - Progress bars
• Tooltips - Tooltip styles
• Labels - Label badges
• Breadcrumbs - Breadcrumb navigation
• Lists - Styled lists
• Callouts - Callout boxes
• Timeline - Timeline component
• Media - Media object

Override variables before importing:

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-base: 16px;

@import 'semantic-element/scss';

// Colors
$primary-color
$secondary-color
$success-color
$info-color
$warning-color
$danger-color

// Typography
$font-family-base
$font-size-base
$line-height-base

// Grid
$grid-columns
$grid-gutter-width

// And many more...

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Build documentation site
npm run build:site

# Preview production build
npm run preview:site

When working on the CSS framework:

1. Modify SCSS files in scss/
2. Run npm run build to build changes
3. View changes at http://localhost:4321

Semantic Element uses semantic class naming:

Modern browsers including Chrome, Firefox, Safari, and Edge.

1. Fork it (https://github.com/miclle/semantic-element/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Code and documentation copyright 2014-2025 Miclle. Code released under the MIT license.