Package Exports

@smwb/summer-ui
@smwb/summer-ui/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@smwb/summer-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Summer UI

Summer UI is full typescript library with proto-type supporting and based on material guideline

Installation

Summer UI is available as an npm package.

npm:

npm install @smwb/summer-ui

yarn:

yarn add @smwb/summer-ui

Getting started with Summer UI

Here is an example of a basic app using Summer UI's Button component:

import * as React from 'react';
import '@smwb/summer-ui/styles/normalize.css'
import '@smwb/summer-ui/styles/css/summer-ui.css'
import {Button} from '@smwb/summer-ui'

function App() {
  return <Button>Hello World</Button>;
}

Full library

If you want to use full library you would import components from project root

import {Button} from '@smwb/summer-ui'

Only component

If you need minify your project you can import just several components from direct path

import Button from '@smwb/summer-ui/dist/components/button/button'

Styles

Default CSS

import '@smwb/summer-ui/styles/normalize.css'
import '@smwb/summer-ui/styles/css/summer-ui.css'

Custom CSS

Using one of built-in themes

theme list node_modules/@smwb/summer-ui/styles/less/themes
copy node_modules/@smwb/summer-ui/theme.config.example to the project root and rename to theme.config
add script to package.json "less": "lessc -rp=/ ./node_modules/@smwb/summer-ui/styles/less/components.less src/css/summer-ui.css"
execute npm run less
import css in the project root

  import './css/summer-ui.css'

Using own theme

copy file node_modules/@smwb/summer-ui/styles/less/variables.less to folder /src/css/custom
copy file node_modules/@smwb/summer-ui/theme.config.example to the project root
- rename theme.config.example to theme.config
- edit theme.config @theme to @theme: "custom"
- edit theme.config @themesFolder to @themesFolder : "/src/css";
edit custom.variables.less
add script to package.json "less": "lessc -rp=/ ./node_modules/@smwb/summer-ui/styles/less/components.less src/css/summer-ui.css"
execute npm run less
import css in the project root

import './css/summer-ui.css'