Name: tc-ui
Owner: Topcoder
Description: Topcoder UI components and styles
Created: 2016-04-12 17:51:44.0
Updated: 2016-12-11 20:52:22.0
Pushed: 2018-02-16 19:11:05.0
Homepage: https://ui.topcoder.com
Size: 139
Language: CSS
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
This repo houses Topcoder's style guide and component library. Design documentation and information on the style guide principles can be found at https://app.frontify.com/d/zEXqGHFD1YN2/ui-library.
The technologies used are React, Redux, ES2015, Webpack, and SCSS.
We use node 5.x and npm 3.x, so you may need to download a new version of node. The easiest way is to download nvm. We have a .nvmrc
file in the root of the project, so you can just run nvm use
to switch to the correct version of node.
Install dependencies by running the following in the root of the project:
npm i
npm -v
to ensure you have a 3.x version.npm start
and head to localhost:8080
npm run lint
npm run build
To contribute to the repository, please create a feature branch off of the dev branch. Once you're finished working on the feature, make a pull request to merge it into dev. Please make sure that every pull request has passed the build checks, which appear just before the “Merge pull request” button in github.
Checkout the code and comments in src/components/ExampleComponent
for an example functional React component and .scss
file.
React
classnames
for dynamic classes. See ExampleComponent
for an example.JavaScript
i
or err
.lodash
and functional JavaScript if it makes the code clearer..eslintrc.json
npm run lint
to check your code against the linterSCSS Files
@import 'topcoder/tc-includes;'
at the top of your .scss
file. Locally, you can look in ./node_modules/appirio-styles/styles/topcoder/_tc-colors.scss
to find many colors already defined (e.g. #A3A3AE
=> $accent-gray
)ort 'topcoder/tc-includes;'
local-var: 50px;
{
ht: $my-local-var;
h: 50px;
r: $medium-gray;
ia screen and (min-width: 768px) {
ight: 100px;
dth: 100px;
lor: $dark-gray;
ide-box {
nt-size: 14px;
edia screen and (min-width: 768px) {
font-size: 18px;
.js
extensionView
from the menuSyntax -> Open all with current extension as...
Babel -> JavaScript (Babel)
.jsx
Sublime Text -> Preferences -> Settings-User
(? + ,
on Mac)
or_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
me": "Oceanic Next.sublime-theme"
SublimeLinter-contrib-eslint
div.cool-class
becomes <div className="cool-class"></div>
a
becomes <a href=""></a>
className
instead of class
reg_replace.sublime-settings
by navigating to Sublime Text -> Preferences -> Package Settings -> Reg Replace -> Settings-User
install --save tc-ui