A semantic CSS framework that styles native HTML elements
npm install semantic-elementSemantic Element is a semantic CSS framework that styles native HTML elements.
``bash`
npm install semantic-element
`bash`
yarn add semantic-element
`bash`
pnpm add semantic-element
`css`
@import 'semantic-element/css';
Or link directly in HTML:
`html`
`scss`
@import 'semantic-element/scss';
You can also import individual components:
`scss
// 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';
`
`javascript
// Vite
import 'semantic-element/css'
// Or with SCSS
@import 'semantic-element/scss'
`
- 📚 Full Documentation: https://miclle.github.io/semantic-element/ (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:
`scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-base: 16px;
@import 'semantic-element/scss';
`
`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...
`
`bashInstall dependencies
npm install
$3
When working on the CSS framework:
1. Modify SCSS files in
2. Run to build changes
3. View changes at http://localhost:4321Class Naming Reference
Semantic Element uses semantic class naming:
| Component | Class Name |
| --------- | --------------------------------------------- |
| Buttons |
, .button primary, .button large |
| Grid | .grid, .grid two/three/four, .column |
| Forms | .field, form.inline |
| Tables | table.striped, table.bordered |
| Panels | .panel, .panel .body, .panel .heading |
| Alerts | .alert, .alert success |
| Progress | .progress, .progress .bar |
| Tabs | .tabs |
| Navbar | .navbar, .navbar .menu |
| Labels | .label, .label primary |Browser Support
Modern browsers including Chrome, Firefox, Safari, and Edge.
Contributing
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`)Code and documentation copyright 2014-2025 Miclle. Code released under the MIT license.