• Stars
    star
    4,257
  • Rank 10,137 (Top 0.2 %)
  • Language
    HTML
  • License
    Apache License 2.0
  • Created about 12 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

CSS for clean and fast web apps

Topcoat

Join the chat at https://gitter.im/topcoat/Topcoat

CSS for clean and fast web apps


Usage

  • Download Topcoat

  • Open demo/index.html to view the usage guides.

  • Copy your desired theme CSS from the css/ folder into your project

  • Copy the img/ and font/ folders into your project ( Feel free to only copy the images and font weights you intend to use )

  • Link the CSS into your page

<link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.min.css">

*Alternatively incorporate the css into your build process if you are so inclined.


Contributing

Start by checking out our Backlog. (Pls file issues against this repo.)

For the details see our Engineering Practices.

Testing

For performance tests, see dev/test/perf/telemetry/.

Building

Topcoat uses Grunt to build

  • Open the terminal from the topcoat directory

      cd topcoat
    
  • Install npm *comes packaged with node.

  • Install its command line interface (CLI) globally

      npm install -g grunt-cli
    
  • Install dependencies with npm

      npm install
    

*Topcoat uses Grunt 0.4.0. You might want to read more on their website if you haven't upgraded since a lot has changed.

  • Type grunt in the command line to build the css.
  • The results will be built into the release folder.
  • Alternatively type grunt watch to have the build run automatically when you make changes to source files.

Browser support

  • Chrome (latest 2)
  • Edge (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 8+
  • Opera (latest 2)
  • Safari (latest 2)

Release notes

See Release Notes.


License

Apache license

More Repositories

1

icons

Open Source Icons designed for Topcoat
JavaScript
257
star
2

design

Design assets for Topcoat
246
star
3

resin

A future facing CSS preprocessor made with postcss
JavaScript
171
star
4

topcoat.github.com

Topcoat's home
HTML
108
star
5

theme

Topcoat default theme
JavaScript
50
star
6

topcoat-server

topcoat benchmark server
CSS
40
star
7

topcoat-grunt-telemetry

grunt telemetry task
Python
18
star
8

grunt-topcoat

Grunt task for downloading Topcoat build dependencies.
CSS
13
star
9

yeoman-generator-topcoat

Yeoman Topcoat generator
JavaScript
11
star
10

angular-topcoat

Angular directives for use with Topcoat
8
star
11

navigation-bar

Topcoat Navigation Bar
CSS
5
star
12

prototypes

Topcoat Prototypes
CSS
5
star
13

meet-topcoat

Topcoat Slides
JavaScript
5
star
14

checkbox

Topcoat checkbox component
CSS
5
star
15

button

Topcoat default button skin
CSS
4
star
16

range

Topcoat slider input
CSS
4
star
17

topcoat-brackets-extension

Initial stab at Brackets support for Topcoat.
4
star
18

overlay

Topcoat overlay component
CSS
3
star
19

utils

Topcoat utilities
CSS
3
star
20

notification

Topcoat notification
CSS
3
star
21

topcoatify

A tool for custom Topcoat builds from npm.
JavaScript
3
star
22

topcheck

A cli tool to check topcoat components have a uniform structure.
2
star
23

topcoat-ci-config

2
star
24

fonts

Fonts for topcoat theme
JavaScript
2
star
25

select

Select component
CSS
2
star
26

theme-desktop-light

Light desktop theme for Topcoat.
CSS
2
star
27

search-input

Topcoat search input
CSS
2
star
28

base-starter

Starter project for a Topcoat css reset base component
JavaScript
2
star
29

button-bar-template

Template for Topcoat Button Bar
JavaScript
2
star
30

primer

A exploration in an object based component style definition
JavaScript
1
star
31

navigation-bar-base

Base component for Topcoat navigation bar
CSS
1
star
32

list

Topcoat default list component
CSS
1
star
33

theme-mobile-light

Light theme for mobile applications
CSS
1
star
34

switch

Topcoat switch skin
CSS
1
star
35

text-input

Topcoat text input
CSS
1
star
36

tab-bar

Topcoat tab bar component
CSS
1
star
37

variables-mobile

Mobile theme variables
CSS
1
star
38

checkbox-base

Base reset styles for Topcoat checkbox
CSS
1
star
39

radio-button

Topcoat radio input
CSS
1
star
40

icon-button

Topcoat icon button skin
CSS
1
star