Posts Tagged ‘css’

Close Up Software Developer Programming Code On Screen

CSS Transform Property: Four Common Uses

The CSS transform property allows a developer to perform a number of different actions on an element that changes how that element appears in the browser.  While the realm of possibilities for what you can do with one or more of the transform values is very large, here are some common uses to save time […]

Coding

Accessible Balance: HTML & ARIA

Introduced in 2008 by the Web Accessibility Initiative (WAI) group, the family of attributes known by the acronym ARIA (Accessible Rich Internet Applications) allows developers to supplement HTML where it lacks in accessibility. ARIA is a group of attributes that work to supplement HTML attributes to create a more accessible experience for those using assistive […]

Lee Campbell 6njoebtarec Unsplash

Creating Your First Custom AEM Component Using React – Part 1

Recently, I went through an article about integrating React JS and Angular JS with AEM. In this blog, I am going to show you how to create a custom component that includes a cq:dialog and one that does not include a cq:dialog. Before building the components, clone the repository, which is a sample project based […]

Solved with CSS: Image Captions Done Right

There is a problem with the default styling of the figure caption (figcaption) element that is intrinsic to the way HTML and CSS work on their simplest level.  Elements don’t know or care about the other elements around them; they behave in their own way, no matter what content comes before or after them.  Let’s […]

How to Customize Your Own HTML5 Audio Player

Introduction Web developers have wanted to use audio and video on the web for quite a long time. With the standardization of HTML5 and most modern browsers starting to implement HML5, it’s been a great surprise for us. In the past, implementing audio and video in a web application would be very tedious since we […]

Using BEM-Style CSS Syntax in SCSS

Modular component styles are becoming significantly important in modern UI trends. Handling scalability while decreasing naming convention differences is a necessary step towards code cohesion. Disclaimer: I use a slightly modified flavor of BEM syntax, feel free to use traditional BEM, or some other flavor of your own. When developing UI components, specifically for use […]

How to Force AEM to Not Process CSS URLs

By default, AEM CSS processor will transform the CSS URL functional notation “url()” into a relative URL to the ClientLibrary, if the URL was relative to begin with, ie, it does not start with “/” This poses an issue when using the CSS fill property for SVG and providing a gradient id (read more here) The following was […]

#AdobeSummit Standout: PhoneGap and Framework7 for Mobile Apps

We’ve seen many innovative features and products launched at Adobe Summit 2017. As a developer, one cool feature that attracted me the most was the development of a hybrid mobile application with PhoneGap along with Framework7 open source UI framework. When developing a mobile application using JavaScript, CSS and native libraries, I have faced issues with […]

Shooting Stars@1x

Crafting an Interactive Timeline with SCORE Components

With SCORE, one of our overriding goals is to minimize the complexity and development effort involved in building Sitecore websites. In most cases, you can use a series of SCORE components to build a complicated UI element, using advanced CSS and JavaScript techniques to completely transform them. One such situation that I recently tackled was […]

Web Fonts – To Use, or Not to Use

Ever stumbled upon an article on social media that catches your interest? You click it. You are curious and anxious to read it. You are in the website – it loads, but at first, it seems empty. The site is there, but there is no text in it. You are probably annoyed. You are probably […]

Houdini – A New Development in CSS

We know the frustration all too well… The goal is to build websites and web applications that are cross-browser compatible and provide a similar experience across the board. Unfortunately, when new CSS functionality comes out, we get stuck between having to wait for browsers to adopt it in unison, which can take a few years or […]

Typing On Laptop@1x.jpg

Background to Foreground Image Solution for Responsive Web Development

Proper design plays a key role when it comes to the topic of responsive web design (RWD). But sometimes we don’t have the luxury of a flushed out design to begin with. We often have to manage and make practical use of the assets in hand, and in some cases, background images can become a […]

Load More