0.14.0 • Published 2 years ago

semantic-styles v0.14.0

Weekly downloads
218
License
MIT
Repository
-
Last release
2 years 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

2 years ago

0.13.0

2 years ago

0.9.0

2 years ago

0.5.0

2 years ago

0.7.0

2 years ago

0.3.4

2 years ago

0.12.0

2 years ago

0.14.0

2 years ago

0.10.0

2 years ago

0.2.0

2 years ago

0.8.0

2 years ago

0.4.1

2 years ago

0.6.0

2 years ago

0.1.10

3 years ago

0.1.11

3 years ago

0.1.12

3 years ago

0.1.13

3 years ago

0.1.14

3 years ago

0.1.15

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.9

3 years ago

0.1.6

3 years ago

0.1.16

3 years ago

0.1.4

4 years ago

0.1.5

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.0.46

4 years ago

0.0.47

4 years ago

0.1.0

4 years ago

0.0.45

5 years ago

0.0.44

5 years ago

0.0.43

5 years ago

0.0.42

5 years ago

0.0.40

5 years ago

0.0.41

5 years ago

0.0.37

5 years ago

0.0.38

5 years ago

0.0.39

5 years ago

0.0.36

5 years ago

0.0.31

5 years ago

0.0.32

5 years ago

0.0.34

5 years ago

0.0.35

5 years ago

0.0.30

5 years ago

0.0.28

5 years ago

0.0.29

5 years ago

0.0.24

5 years ago

0.0.25

5 years ago

0.0.26

5 years ago

0.0.27

5 years ago

0.0.23

5 years ago

0.0.22

5 years ago

0.0.21

5 years ago

0.0.20

6 years ago

0.0.16

6 years ago

0.0.17

6 years ago

0.0.18

6 years ago

0.0.19

6 years ago

0.0.15

6 years ago

0.0.14

6 years ago

0.0.13

6 years ago

0.0.12

6 years ago

0.0.11

6 years ago

0.0.10

6 years ago

0.0.9

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago