0.14.0 • Published 7 months ago

semantic-styles v0.14.0

Weekly downloads
218
License
MIT
Repository
-
Last release
7 months ago

Semantic Styles

Responsive, Themed, UI Design System.

Features:

  • Responsive typography and spacing
  • Calculated, adjustable vertical rhythm
  • Responsive light / dark theme (toggle your OS light / dark mode to see)
  • Classes that match semantic HTML elements
  • Framework agnostic

View Demo

Getting Started

How to use:

  1. Install
  2. Import system classes and variables at the top level of your app
  3. Compose components from system classes and variables + HTML
  4. Customize by overriding system classes and variables with local styles

1: Install

npm install semantic-styles

2: Import system classes and variables as global CSS

React + Gatsby example

// Gatsby <Layout/>

import React from 'react'
import 'semantic-styles'

export default ({ children }) => {
  return (
    <>
      <main>{children}</main>
    </>
  )
}

HTML + CSS + Parcel example

<!-- index.html -->

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Semantic Styles</title>
  </head>
  <body>
    HTML & CSS + Parcel Example
    </div>
    <script src="./index.js"></script>
  </body>
</html>
// index.js

import 'semantic-styles'
<!-- Builds semantic styles into dist folder  -->

parcel index.html

3: Compose components with system classes, system CSS variables, and HTML

// Gatsby <Layout/>

import React from 'react'
import 'semantic-styles'

export default ({ children }) => {
  return (
    <>
      <header className="header padding">
        <h1 className="text--xxxl">Very Large Title</h1>
      </header>
      <main className="main">{children}</main>
      <footer
        className="footer"
        style={{
          background: `var(--accent-1)`,
        }}
      >
        <h4
          style={{
            padding: `var(--space-xl)`,
            fontFamily: `var(--serif)`,
          }}
        >
          Colorful Footer
        </h4>
      </footer>
    </>
  )
}

4: How to customize

Embrace the cascade.

// global system styles
import 'semantic-styles'

// local overrides
import '../styles/local-semantic-styles.css'
/* local-semantic-styles.css */

/* Customized system variables */
:root {
  --accent-1: lime;
  --responsive-unit: 2rem;
}

Classes

Element Classes

  • .aside
  • .btn
  • .btn-primary
  • .code
  • .fieldset
  • .figcaption
  • .figure
  • .footer
  • .form
  • .header
  • .input
  • .main
  • .nav
  • .textarea

Component Classes

  • .card
  • .card-text
  • .card-heading
  • .nav-link

Layout Classes

  • .center
  • .container
  • .content-grid
  • .aside-content-grid
  • .content-aside-grid
  • .image-grid
  • .content
  • .none
  • .padding
  • .page
  • .only-mobile-padding
  • .only-fullscreen-padding

Typography Classes

  • .text--xs
  • .text--sm
  • .text--md
  • .text--lg
  • .text--xl
  • .text--xxl
  • .text--xxxl

Variables

Color Variables

  • --text-color
  • --bg-1
  • --bg-2
  • --grey
  • --accent-1
  • --accent-2
  • --code-bg

Component Variables

  • --radius
  • --thickness
  • --elevation-1
  • --elevation-2
  • --elevation-3
  • --transition
  • --opacity

Layout Variables

  • --container
  • --max-width

Typography Variables

  • --sans
  • --serif
  • --mono
  • --heading-line-height
  • --heading-letter-spacing
  • --paragraph-letter-spacing
  • --caps-letter-spacing
  • --text-sm
  • --text-md
  • --text-lg
  • --text-xl
  • --text-xxl
  • --text-xxxl

Scale Variables

  • --responsive-unit
  • --baseline

Spacing Variables

  • --space-sm
  • --space-md
  • --space-lg
  • --space-xl
CSSDesign SystemResponsiveThemeDark themeUISystem
@infinitebrahmanuniverse/nolb-sema@everything-registry/sub-chunk-2730semantic-styles-monorepo
0.11.0

7 months ago

0.13.0

7 months ago

0.9.0

7 months ago

0.5.0

7 months ago

0.7.0

7 months ago

0.3.4

7 months ago

0.12.0

7 months ago

0.14.0

7 months ago

0.10.0

7 months ago

0.2.0

7 months ago

0.8.0

7 months ago

0.4.1

7 months ago

0.6.0

7 months ago

0.1.10

1 year ago

0.1.11

1 year ago

0.1.12

1 year ago

0.1.13

1 year ago

0.1.14

1 year ago

0.1.15

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.9

1 year ago

0.1.6

1 year ago

0.1.16

1 year ago

0.1.4

3 years ago

0.1.5

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.0.46

3 years ago

0.0.47

3 years ago

0.1.0

3 years ago

0.0.45

3 years ago

0.0.44

3 years ago

0.0.43

3 years ago

0.0.42

3 years ago

0.0.40

3 years ago

0.0.41

3 years ago

0.0.37

3 years ago

0.0.38

3 years ago

0.0.39

3 years ago

0.0.36

3 years ago

0.0.31

3 years ago

0.0.32

3 years ago

0.0.34

3 years ago

0.0.35

3 years ago

0.0.30

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.0.24

3 years ago

0.0.25

3 years ago

0.0.26

3 years ago

0.0.27

3 years ago

0.0.23

4 years ago

0.0.22

4 years ago

0.0.21

4 years ago

0.0.20

4 years ago

0.0.16

4 years ago

0.0.17

4 years ago

0.0.18

4 years ago

0.0.19

4 years ago

0.0.15

4 years ago

0.0.14

4 years ago

0.0.13

4 years ago

0.0.12

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago