CSS reset: what and which?

Choosing not to use a CSS reset can really effect your code when you first start coding¬†your site and look at it across browsers and in the long run create more coding hassle. Have you coded a really basic website for one of your assignments before and it looked fine in Chrome, but when you opened it in Safari or Firefox, it had a weird border of padding around it? Many of our beginning coding assignments don’t use a css reset, so some rules from the browser (which vary from browser to browser) are effecting the display of your code.

Every browser has it’s own set of built in CSS that it applies to the site if you haven’t specified otherwise. This is called the user agent stylesheet. You have probably noticed it when you are using Chrome Developer tools and see a greyed out rule in the css that can’t be changed, but it applying to your element.

user agent stylesheet can be overridden by attaching a reset.css

The greyed out rules circled in red are from the browser applied user agent stylesheet. The only way to change these is to add css rules to your style.css to override them.

Continue…

Styletiles tool to communicate with clients

One of the most difficult jobs of a web designer is to accurately communicate with clients. Some clients have a very good idea of what they want their website to look and feel like, but have difficulty communicating their vision. Then there are clients that hand all the creative decisions over to the designer, but then can’t figure out what they don’t like about the mock-ups of the proposed design. Either way, as web designers, we need to come up with quick, easy ways to get our ideas down in a way that visually communicates the website design to a client in a clear way.

Style tiles are a way to create style guides for a website prior to building it.

Style tiles are a way to create style guides for a website prior to building it.

 

There are many tools out there for this purpose, but lately, I’ve been interested in the process of using style guide, especially on team-based projects. One tool that serves this purpose is Styletil.es.”A Style Tile is a design deliverable consisting of fonts, colors and interface elements that communicates the evolution of a visual brand for the web.”¬† Continue…