CSS for clean and fast web apps

Related tags

CSS css ui-components
Overview

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

Comments
  • Working with topcoat icons

    Working with topcoat icons

    Hi, I somehow cannot get how to deal with the icons and cannot find any explanation for it.

    For instance, how should I embed one of the nice svgs in a button and maybe change the color of the icon? I'm pretty sure that editing the svg and hard linking it in the code is not the intended way now is it?

    Thanks, T.

    opened by Timothep 29
  • Input accessibility issue

    Input accessibility issue

    Our radio/input/checkbox inputs are not accessible by using the tab key because we use display:block to hide the native element and replace it with an image. This could be fixed if we change the display:block to a position:absolute w/ something like left:-9999px.

    What do you think about this method ?

    enhancement 
    opened by piatra 20
  • Question - TopCoat still Adobe Supported?

    Question - TopCoat still Adobe Supported?

    Is Adobe still supporting topcoat development? Last Blog post is in November. I don't see any mention of topcoat on http://html.adobe.com/opensource/

    Please advise.

    Thanks

    opened by nravulapalli 18
  • Placeholders inputs not centered with Android 4.1.2

    Placeholders inputs not centered with Android 4.1.2

    Hi, I have a problem with placeholders inputs in mobile theme of topcoat v0.8.0 when testing on a android phone in version 4.1.2. Placeholders are not centered. The problem affect just placeholder not value like you can see in screenshots. With a computer browser i haven't the problem.

    placeholder-pb screenshot_2013-11-19-10-00-27

    opened by matthieuh 13
  • :hover on touch devices

    :hover on touch devices

    There is actually no such a thing there, as there is no pointer. It leads to persistent :hover state after interaction is done.

    I have fixed this for now by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover

    mostly because I don't want to modify topcoat for this.

    Ideally, mobile only build should not contain :hover declarations or it should be configurable via css ....

    opened by kof 12
  • Update all components to desktop parity

    Update all components to desktop parity

    Desktop parity will be achieved!

    best_star_trek

    Steps to desktop parity are:

    • Add build step in Gruntfile for:

      • desktop dark
      • desktop light
      • mobile dark
      • mobile light

      use checkbox stylus task in Gruntfile as example: https://github.com/topcoat/checkbox/blob/master/Gruntfile.js#L32

    • Compare:

      • make desktop components match https://raw.github.com/topcoat/design/master/TopCoat_DesktopKit.png
      • make sure mobile components match https://raw.github.com/topcoat/design/master/TopCoat-MobileKit.png

    • Remove:

      • left over files from previous builds
        • img/
      • unused grunt tasks
        • jade
        • copy

    Components to review

    • [x] Button
      • https://github.com/topcoat/button/pull/9
      • https://github.com/topcoat/theme/pull/12 npm publish
    • [x] List
      • https://github.com/topcoat/list-base/pull/2
      • https://github.com/topcoat/list/pull/7
    • [x] Checkbox
    • [x] Navigation Bar
      • https://github.com/topcoat/navigation-bar/pull/5
      • npm publish ( github page already up )
    • [x] Radio Button
      • https://github.com/topcoat/radio-button/pull/6
    • [x] Search Input
      • https://github.com/topcoat/search-input/pull/6
      • depends on https://github.com/topcoat/search-input-base/pull/1
      • npm publish
    • [x] Text Input
      • https://github.com/topcoat/text-input/pull/5
      • https://github.com/topcoat/input-base/pull/3
    • [x] Textarea
      • https://github.com/topcoat/textarea/pull/4
      • https://github.com/topcoat/textarea-base/pull/4
    • [x] Icon Button
    • [x] button bar
      • Please review
      • depends on button, so needs to be updated if button gets updated.
    opened by kristoferjoseph 12
  • Sweep the leg

    Sweep the leg

    sweep-the-leg-o

    Let's make a pass to clean up the components again.

    Let's do the following steps:

    1. Exact version numbers in package.json
    2. Make sure Grunt file matches this
    3. Remove line-height where it is being used to define height of component. --Use rem base padding, try to remove height property but maintain same computed height
    4. Desktop theme has changed the root font size which effects all rem measurements. Go through and tweak as needed

    Component checklist to come. Just add your name to the component you are tackling.

    opened by GarthDB 11
  • topcoat:download task failed for range-input

    topcoat:download task failed for range-input

    Git clone range-input, then do npm install -> grunt default.

    It's been failing since June.

    Running "topcoat:download" (topcoat) task

Downloading: https://api.github.com/repos/topcoat/range-input-base/zipball
To => tmp/src/controls/range-input-base.zip
No theme specified

Downloading: https://api.github.com/repos/topcoat/utils/zipball
To => tmp/src/utils/utils.zip
No skins specified
Progress [===================] 100% 0.0s
Running "unzip:controls" (unzip) task
Warning: Corrupted zip : can't find end of central directory Use --force to continue.
    bug 
    opened by ynliu 11
  • grunt-topcoat ignoring HTTP Proxy

    grunt-topcoat ignoring HTTP Proxy

    It seems like the Grunt TopCoat Task to download the files via "request"-Module (method curl) is ignoring the data for System HTTP(S)_PROXY.

    cd topcoat
set HTTP_PROXY=http://uid:[email protected]
set HTTPS_PROXY=http://uid:[email protected]
grunt

    leads to EHOSTUNREACH error message.

    I'm new to node and grunt, so maybe it is my fault, but i didn't manage to get it running except setting the proxy directly in the "curl"-method of the TopCoat Grunt task.

    While

    cd topcoat
set HTTP_PROXY=http://uid:[email protected]
set HTTPS_PROXY=http://uid:[email protected]
npm install

    is no problem

    enhancement 
    opened by bennybennet 11
  • Using topcoat components without the

    Using topcoat components without the "topcoat-" prefix

    I like the OO Structure of Topcoat, but i whish i could use more generic class names for themed components. I.e. using the .button class directly instead of using .topcoat-button.

    What are your thoughts about using placeholder selectors (http://learnboost.github.io/stylus/docs/extend.html#extending-placeholder-selectors) for base classes like $button and removing the "topcoat-" prefix from the topcoat theme components? – This way we could use more generic classes (.button) in our projects and still being able to use a custom theme by just replacing the css code for the themed component instead of replacing class names in html code.

    opened by ahx 10
  • Question: rem vs. em

    Question: rem vs. em

    Hi

    Just a question, why are you using rem and not em.

    From my understanding: rem is relative to font size of html element, em is relative to font size of parent element.

    Example:

    If you build a button widget, sometimes you want to have it smaller in some particular view, not everywhere, but you can't do this using font size on the container in the particular view if rem is used, also you won't change the font size of html, so I need to specify sizes directly on button elements.

    opened by kof 9
  • Stub out components and base components

    Stub out components and base components

    Base:

    • [ ] Alert
    • [ ] Button
    • [ ] Checkbox
    • [ ] Dialog
    • [ ] Label
    • [ ] Link
    • [ ] Progress
    • [ ] Radio
    • [ ] Slider
    • [ ] Tab
    • [ ] Text Area
    • [ ] Text Field
    • [ ] Tooltip
    • [ ] Wait
    • [ ] Wizard (breadcrumbs)

    Components:

    • [ ] Typography - Default
    • [ ] Alert - Default
    • [ ] Alert - Error
    • [ ] Alert - Warning
    • [ ] Alert - Info
    • [ ] Alert - Success
    • [ ] Button - CTA
    • [ ] Button - Primary
    • [ ] Button - Secondary
    • [ ] Button - Warning
    • [ ] Checkbox
    • [ ] Dialog - Default
    • [ ] Dialog - Success
    • [ ] Dialog - Info
    • [ ] Dialog - Warning
    • [ ] Dialog - Error
    • [ ] Dialog - Modal
    • [ ] Label - Default
    • [ ] Label - Top
    • [ ] Label - Large
    • [ ] Label - Special
    • [ ] Link - Default
    • [ ] Link - Subtle
    • [ ] Progress - Small
    • [ ] Progress - Medium
    • [ ] Progress - Large
    • [ ] Radio
    • [ ] Radio - disabled
    • [ ] Slider - Default
    • [ ] Slider - With Label
    • [ ] Slider - Filled
    • [ ] Slider - Double Handle
    • [ ] Slider - Video Player
    • [ ] Slider - Tick
    • [ ] Slider - Ramp
    • [ ] Slider - Color
    • [ ] Slider - Round
    • [ ] Tab - Default
    • [ ] Text Area - Default
    • [ ] Text Area - Quiet
    • [ ] Text Field - Default
    • [ ] Text Field - Quiet
    • [ ] Tooltip - Default
    • [ ] Tooltip - Error
    • [ ] Tooltip - Info
    • [ ] Tooltip - Success
    • [ ] Wait - Default (Radial) - Small
    • [ ] Wait - Default (Radial) - Medium
    • [ ] Wait - Default (Radial) - Large
    • [ ] Wait - Dots - Small
    • [ ] Wait - Dots - Medium
    • [ ] Wait - Dots - Large
    • [ ] Wizard - Plain
    • [ ] Wizard - With Label
    • [ ] Wizard - With Tooltip
    opened by GarthDB 0
  • Automate Topmarks benchmarking

    Automate Topmarks benchmarking

    Each component needs Topmarks added to it as a local testing tool, and will also be used as an automated test on commit.

    As of right now, there are just 2 tests: loadspeed and scrollspeed we can add more tests as needed.

    • [ ] Typography - Default
    • [ ] Alert - Default
    • [ ] Alert - Error
    • [ ] Alert - Warning
    • [ ] Alert - Info
    • [ ] Alert - Success
    • [ ] Button - CTA
    • [ ] Button - Primary
    • [ ] Button - Secondary
    • [ ] Button - Warning
    • [ ] Checkbox
    • [ ] Dialog - Default
    • [ ] Dialog - Success
    • [ ] Dialog - Info
    • [ ] Dialog - Warning
    • [ ] Dialog - Error
    • [ ] Dialog - Modal
    • [ ] Label - Default
    • [ ] Label - Top
    • [ ] Label - Large
    • [ ] Label - Special
    • [ ] Link - Default
    • [ ] Link - Subtle
    • [ ] Progress - Small
    • [ ] Progress - Medium
    • [ ] Progress - Large
    • [ ] Radio
    • [ ] Radio - disabled
    • [ ] Slider - Default
    • [ ] Slider - With Label
    • [ ] Slider - Filled
    • [ ] Slider - Double Handle
    • [ ] Slider - Video Player
    • [ ] Slider - Tick
    • [ ] Slider - Ramp
    • [ ] Slider - Color
    • [ ] Slider - Round
    • [ ] Tab - Default
    • [ ] Text Area - Default
    • [ ] Text Area - Quiet
    • [ ] Text Field - Default
    • [ ] Text Field - Quiet
    • [ ] Tooltip - Default
    • [ ] Tooltip - Error
    • [ ] Tooltip - Info
    • [ ] Tooltip - Success
    • [ ] Wait - Default (Radial) - Small
    • [ ] Wait - Default (Radial) - Medium
    • [ ] Wait - Default (Radial) - Large
    • [ ] Wait - Dots - Small
    • [ ] Wait - Dots - Medium
    • [ ] Wait - Dots - Large
    • [ ] Wizard - Plain
    • [ ] Wizard - With Label
    • [ ] Wizard - With Tooltip
    opened by GarthDB 0
  • Create components

    Create components

    We can break these into separate issues if needed:

    • [ ] Typography - Default
    • [ ] Alert - Default
    • [ ] Alert - Error
    • [ ] Alert - Warning
    • [ ] Alert - Info
    • [ ] Alert - Success
    • [ ] Button - CTA
    • [ ] Button - Primary
    • [ ] Button - Secondary
    • [ ] Button - Warning
    • [ ] Checkbox
    • [ ] Dialog - Default
    • [ ] Dialog - Success
    • [ ] Dialog - Info
    • [ ] Dialog - Warning
    • [ ] Dialog - Error
    • [ ] Dialog - Modal
    • [ ] Label - Default
    • [ ] Label - Top
    • [ ] Label - Large
    • [ ] Label - Special
    • [ ] Link - Default
    • [ ] Link - Subtle
    • [ ] Progress - Small
    • [ ] Progress - Medium
    • [ ] Progress - Large
    • [ ] Radio
    • [ ] Radio - disabled
    • [ ] Slider - Default
    • [ ] Slider - With Label
    • [ ] Slider - Filled
    • [ ] Slider - Double Handle
    • [ ] Slider - Video Player
    • [ ] Slider - Tick
    • [ ] Slider - Ramp
    • [ ] Slider - Color
    • [ ] Slider - Round
    • [ ] Tab - Default
    • [ ] Text Area - Default
    • [ ] Text Area - Quiet
    • [ ] Text Field - Default
    • [ ] Text Field - Quiet
    • [ ] Tooltip - Default
    • [ ] Tooltip - Error
    • [ ] Tooltip - Info
    • [ ] Tooltip - Success
    • [ ] Wait - Default (Radial) - Small
    • [ ] Wait - Default (Radial) - Medium
    • [ ] Wait - Default (Radial) - Large
    • [ ] Wait - Dots - Small
    • [ ] Wait - Dots - Medium
    • [ ] Wait - Dots - Large
    • [ ] Wizard - Plain
    • [ ] Wizard - With Label
    • [ ] Wizard - With Tooltip
    opened by GarthDB 0
  • Create basic base components

    Create basic base components

    Base components are essentially component-specific resets. We might find some of these could be combined as we are going through them, but here's a rough list (we can break them into separate issues if needed):

    • [ ] Alert
    • [ ] Button
    • [ ] Checkbox
    • [ ] Dialog
    • [ ] Label
    • [ ] Link
    • [ ] Progress
    • [ ] Radio
    • [ ] Radio
    • [ ] Slider
    • [ ] Tab
    • [ ] Text Area
    • [ ] Text Field
    • [ ] Tooltip
    • [ ] Wait
    • [ ] Wizard (breadcrumbs)
    opened by GarthDB 2
Releases(v0.8.0)

  • v0.8.0(Oct 21, 2013)

    Major update to the Topcoat theme. Refactored 50+ colors down to:

    • Text color
    • Control base color
    • Page base color
    • Notification color
    • Highlight color
    • Shadow color

    The rest of the colors are generated from the these.

    We also refactored the controls to separate the :focus and :active states by updating the way the focus border is used.

    Source code(tar.gz)
    Source code(zip)

  • v0.7.5(Sep 24, 2013)

  • v0.7.0(Aug 30, 2013)

  • 0.6.0(Aug 15, 2013)

  • 0.4.1(Aug 15, 2013)

  • 0.4.0(Aug 15, 2013)

    • Updated grunt-topcoat to fix critical bug due to a github api change
    • Added support to util for inline-block based containers to keep their contents from wrapping
    • Fixed bug due to inline block containers in navigation bar
    • Added initial variables for Desktop theme
    Source code(tar.gz)
    Source code(zip)

  • 0.3.0(Aug 15, 2013)

    • Added search input
    • Updated build to use shallow clones for development
    • Cleaned up docs
    • Bug fixes
      • Navigation bar alignment issue due to not using box-sizing
      • Svg icons added to avoid need for media query
      • Icon button alignment issues
    Source code(tar.gz)
    Source code(zip)

  • 0.2.5(Aug 15, 2013)

    • Added build system
      • Enables a user to define what components to add to css
      • Enables individual fixing and versioning of components
    • Added initial set of base components ( Reset components to style )
      • Button Base
      • List Base
      • Input Base
    • Added initial set of components
      • Button
        • standard
        • quiet
        • large
        • quiet large
        • call to action
      • Icon Button
      • Navigation Bar
      • List
      • Text Input
    • Added theme architecture
    • Added style guide generation from css comments
    Source code(tar.gz)
    Source code(zip)

  • 0.2.0(Aug 15, 2013)

    • Cleaned up repo to prepare for new architecture
    • Moved static css to docs to be in line with where guides will be generated
    • Added mobile css file to release folder *Class naming API will be changing in 0.3.0 release to match coding guidelines
    • Added CSS Coding guidelines
    • Added first pass at component architecture document
    • Updated the CSS styles to match the desktop design kit PSD.
    • Added a mobile design kit PSD that matches the current set of mobile styles.
    Source code(tar.gz)
    Source code(zip)

  • 0.1.0(Aug 15, 2013)

    • Initial set of TopCoat components and style guide adapted for desktop web apps
    • Known issue: component and bower installs not working properly. You have to manually download from /release folder
    Source code(tar.gz)
    Source code(zip)
Owner
Topcoat
Topcoat
GitHub topcoat.io
A clean, elegant and advanced blog theme for Hugo.

DoIt Theme | Hugo English README | 简体中文说明 DoIt is a clean, elegant and advanced blog theme for Hugo. It is based on the LoveIt Theme, LeaveIt Theme an

PCloud 398 Jan 8, 2023
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

styled-components 38k Dec 31, 2022
The fastest way to build beautiful Electron apps using simple HTML and CSS

Photon UI toolkit for building desktop apps with Electron. Getting started Clone the repo with git clone https://github.com/connors/photon.git Read th

Connor Sears 9.9k Dec 29, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

null 17.7k Jan 8, 2023
Morfy - Fast morphing library for the web

morfy Fast morphing library for the web · Homepage · View Demo · Report Bug / Request Feature · Table of Contents About Installation Usage Test Contac

Timo Bechtel 4 Aug 28, 2021
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web ?? ?? ?? Version 8 of @fluentui/react is now available on npm! ?? ?? ?? See the release notes for more info, and please file an issue if

Microsoft 14.5k Jan 4, 2023
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the `className` prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server.

babel-plugin-css-in-js A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to

Martin Andert 302 Sep 26, 2022