Blog css

State of Modern Component Styling

By on August 17, 2017 9:47 am

As new user interface component frameworks are created and old frameworks are replaced with emerging technologies, methods for styling those components must change with them. Long gone are the days of creating a simple HTML component and importing a simple CSS file with corresponding class names. Concerns such as style leaking, local DOM manipulation and theming are driving changes to the approaches we take. With developer IDEs and the JavaScript language itself and extensions such as TypeScript becoming more intelligent and allowing auto-completion, should our styling approaches not give us the same? In this world of intelligent auto-completion, why should we expect developers to remember and replicate matching class names across CSS and HTML? Modern frameworks are adapting to this shift and there are many different solutions to the problem of making styling and theming more intuitive. Here we will explore some of these solutions.

Memory Consumption: the Externality of Programming

By on March 17, 2015 11:35 am

Performance is a critical part of most applications. Research continually shows that good performance is essential for a good user experience. Reasonable load times, smooth animations, and responsive interaction gives user a sense of interaction and immersion, whereas slow load times frustrate users, and choppy animation and interaction quickly makes an experience awkward and disconcerting. As developers, we wisely work for better performance by understanding performance characteristics, and verifying performance with tests. However, one aspect of performance can be particularly difficult to assess, and its effect can easily be underestimated. Memory consumption can have a large impact on performance, but in ways that can easily be missed and ignored.

Dojo FAQ: Dynamically loading CSS

By on July 2, 2014 11:46 am


In large JavaScript applications, it can be beneficial to dynamically load CSS stylesheets. For example, if a certain JavaScript widget, such as a complex grid, uses a large standalone stylesheet for its display aesthetics, it would be optimal to only load this stylesheet if the widget is in use, rather than always including the CSS source on each application load.

Building an application with xstyle

By on September 10, 2013 11:10 am

xstyle_transparentIn this post, we want to walk through how you would get started building an application using xstyle, an extensible CSS framework. xstyle provides extensions that allows us to declaratively describe an user interface, making use of data bindings, element generation, and components, giving us an elegant means to create an application. In this tutorial, we will be using xstyle with Dojo, and use xstyle completely for our UI. Before starting, remember that you can use xstyle to any degree desired. xstyle can simply be used to make CSS improvements, it can build more sophisticated UI components, and it can be used to describe the entirety of the user interface (combined with a JavaScript-driven data model). Here we will be looking at the application level usage of xstyle, and we will create an app with a simple list of contacts and a form to edit the contact.

Improving your CSS with xstyle

By on September 4, 2013 9:15 am

xstyle_transparentxstyle is a framework for extending CSS, which can be used to improve the quality, maintainability, and performance of your stylesheets. While xstyle can be used as a full framework for building applications with data bindings and UI generation, in this post we will focus on making progressive improvements to stylesheets within the traditional role played by CSS.

CSS Styling of dgrid

By on May 3, 2012 1:33 pm

The new dgrid is a powerful, but lightweight grid component. It is specifically built to be easily styled with CSS, rather than relying on programmatic properties and changes. The dgrid makes numerous element classes available to reference from CSS and avoids inline styles as much as possible to ensure ease of CSS customization.

Stylesheet Loading Order

Before diving into CSS styling of the dgrid, it is highly recommended that you start your dgrid styling stylesheet with an import (or a link) of dgrid.css (and any other dgrid stylesheets you will use). This will ensure that dgrid.css is loaded before your rules so that your rules can override those in dgrid.css without requiring higher specificity. The dgrid component will load dgrid.css if it hasn’t already been loaded by you, but this will usually cause dgrid.css to load after other stylesheets, and therefore take precedence over other stylesheets.

@import "dgrid/css/dgrid.css";

Queued: Architectural Decisions

By on March 30, 2009 12:07 am

Dojo is a very flexible toolkit; it doesn’t dictate how you organize your code or create your widgets. It simply provides tools, and it’s up to you to decide how you want to fit them together. Developing with AIR puts you squarely in the browser-based application model, but aside from that it mostly stays out of your way as well. As part of our series on the Queued development process, I’m going to take a look at the decisions we made and the philosophies we adopted for the project. It should provide some insight into our process.