In CSS, what’s first in Mobile First?

Remember when I suggested that you forget about the CSS while writing the HTML?

Now that you’ve got your HTML markup ready, it’s time to mind the CSS.

So what’s the first thing to do in applying the Mobile First principle?

Forget about the floats

Forget about which goes to the left or right. Remember, we’re building the presentational layer of the website for mobile viewports which are narrow so it’s OK to stack everything first.

I’m currently experimenting by styling these properties in order:

• background-color
• color

Styling the background-color according to the mock-up will give us a visual cue of each blocks hierarchy in a vertical manner. Then set the actual color of the text contained in each block.

After these, it’s time to go more detailed based on the mock-up. Maybe exporting the image assets is next.

I’ll keep you posted!