Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zachhardesty7/semantic-styled-ui

set of UI components based off Semantic UI with Styled Components
https://github.com/zachhardesty7/semantic-styled-ui

Last synced: 25 days ago
JSON representation

set of UI components based off Semantic UI with Styled Components

Awesome Lists containing this project

README

        

# Semantic Styled UI

[![npm](https://img.shields.io/npm/v/semantic-styled-ui)](https://www.npmjs.com/package/semantic-styled-ui)
[![npm](https://img.shields.io/npm/dw/semantic-styled-ui)](https://www.npmjs.com/package/semantic-styled-ui)
![types](https://badgen.net/npm/types/semantic-styled-ui)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)
[![time tracker](https://wakatime.com/badge/github/zachhardesty7/semantic-styled-ui.svg)](https://wakatime.com/badge/github/zachhardesty7/semantic-styled-ui)
![NPM](https://img.shields.io/npm/l/semantic-styled-ui)

Leveraging the power and style of Semantic UI and Styled Components to deploy custom components that
abstract away complex library interactions.

## Description

This repo hosts a UI component library for React that styles content based of Semantic UI but
improves the default styles with Styled Components. It allows for easy plug and play in projects
looking to take advantage of Styled Components without dealing with the hassle of integrating
Semantic UI styles manually. It also includes some useful components and prebuilt components for
rapid web app development.

Library originally built for [connect-door] and then copied into
[gulf-corp] for further development. Commits here only go back to
the beginning of the second repo so visit the first for more commit history.

## Dependencies & Installation

Clone this repo and then run the following command to download dependencies and build:

```bash
npm install
npm run build
```

## Known Issues

- pending

## Contributing

1. Fork it ()
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request

## License

Copyright 2018 Zachary Hardesty

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

[Full Apache 2.0 License Source](http://www.apache.org/licenses/LICENSE-2.0)

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

## Special Acknowledgements

- [Semantic UI React][semanticgh] - The official Semantic-UI-React integration
- [Styled Components][styledgh] - Promote declarative rendering of component styles based
on props
- [React][reactgh] - A declarative, efficient, and flexible JavaScript library for building user interfaces
- [React Scroll][scrollgh] - Component for animating vertical scrolling
- [Javascript Standard JS & Airbnb Hybrid Style][standard] - Airbnb's JS ESLint config + JS Standard Style

[connect-door]: https://github.com/zachhardesty7/connect-door/
[gulf-corp]: https://github.com/zachhardesty7/gulf-corp/
[standard]: https://github.com/doasync/eslint-config-airbnb-standard
[reactgh]: https://github.com/facebook/react
[semanticgh]: https://github.com/Semantic-Org/Semantic-UI-React
[styledgh]: https://github.com/styled-components
[scrollgh]: https://github.com/fisshy/react-scroll