Constructs

For Susan Robertson of A List Apart, doing CSS audit is like doing a detective job. You can look at the site’s code and dig deeper by seeing how many stylesheets are being called, how they affect the site’s performance and how the CSS itself is written. Your goal is to improve the codebase and make your site run faster.

In her article, she has shared the reasons and benefits to do CSS audit. Some of these benefits include reduced file sizes, guidelines consistency, standardised code and increased performance of the website. Hit the button below to see tips on how to do CSS audit and more.

View More

Guy Routledge has released his new video, this time about text and typography in CSS. In this episode, he covers CSS text attributes that makes for better typography and the best times to use them. Here is a gist of CSS text attributes and values discussed in the video. We hope it will be helpful for both web designers and developers in bringing forth good typography practice when building websites.

• text-align
• text-decoration
• text-indent
• text-overflow
• text-rendering
• text-shadow
• text-transform
• font-family
• font-size
• font-style
• font-weight
• font-variant
• font shorthand
• line-height
• letter-spacing
• word-spacing
• word-wrap
• white-space

Hit the button below to watch, and tell us what you think.

Watch the video

The three most popular CSS Preprocessors at the moment are SASS, LESS and Stylus. In this Queness article, author Paula Borowska elaborates what makes CSS preprocessors great by presenting some side-by-side comparisons between SASS/LESS codes and regular CSS codes. This is a good introductory article to the world of CSS Preprocessors for readers with intermediate CSS knowledge.

Read More

Time for another feature of Codepen demo! This time, Chris (@Colouryum) has created this awesome SVG hover effect to his SVG bulb by using only pure CSS. By applying style to four selectors, the bulb will be animated according to time values assigned in the CSS transition property when on hover. In the second link, he has also created the same SVG hover effect for responsive version.

View Demo   View Responsive

In her search form demo, Paula Borowska will be showing four different takes on how you can spruce up a search input with the help of CSS transitions. Nothing too crazy – there are about four different search box styles – styled with background fade, expand input on hover, increasing icon size on hover and button will appear on hover. Find out more by hitting on the buttons, please!

View More   View Demo