Thoughts on programming, web development and design.

Circuit Board

Category: Web Development Page 1 of 31

Restart Numbered List with CSS

Normally, you can renumber an HTML ordered list. You use the attribute “start” to set the value you want to restart the numbers at. What happens when you have a special style that overrides how the numbers are generated?

Restart Number Lists with CSS

Image by Alicja from Pixabay

For example, I use the following CSS style to override how a list looks.

ol.simple-list {
	counter-reset: li-counter;
	list-style-type: none;
	list-style-type: decimal !ie;
	margin: 0;
	margin-left: 3em;
	padding: 0;
}


It creates a list with numbers like this.

Green Numbered List

When I tried to use the start attribute to restart numbering a list, it set all of the numbers to 1. I tried to update the style with newer CSS styling. It didn’t fix the problem. Finally, I found the right way to make this work. The attribute “counter-increment” lets you reset the counter. You have to pick a number one less than what you want to start at.

.simple-list-counter-9 {
	counter-increment: li-counter 9;
}

By doing this, you can restart your list at the desired number. With the above style the new list starts at 10 instead of 1. This works if all your lists end at number 9. If you want to restart at a different style, I suggest using an in-line style instead of adding it to your CSS file.

Naming Colors in Your CSS

Naming things in programming in hard. What you name things matters. Naming is communication. You want the names in your CSS to be easy to understand. They need to quickly communicate what you were thinking.

What naming convention do you use to name your colors in CSS? CSS can be difficult to maintain. Save yourself and others time by picking an easy naming convention. Your choice can save you hours of debugging in the future.

Naming Your Colors IN CSS

Image by Myriams-Fotos from Pixabay

Choose a Naming Convention

There are two types of naming or variable categories in CSS. Descriptive or functional. A descriptive name describes the value. A functional name describes a use. If you want a variable to display a blue color, you might name it --color-blue. When you want a variable for a specific purpose like an accent color, you might name it --color-accent. Use both variable categories to make it easier to maintain your custom color palette.

Naming Colors

Colors have tints, shades and tones. How do you know what to call each one? Use The Color API to find out what to call the colors in your color palette. You can put in a hex code or RGB value to identify your color.

Start with your color palette

It’s good practice to limit the number of colors in your design. Use descriptive names to define your color palette. Then, use functional names to further define your styles.

root: {
brand-blue-color: #0000ff;  
brand-green-color: #008000;
}

.article-title {
color: var(--brand-blue-color);
}

.primary-button {
color: var(--brand-color-green);
}

When you need to change your colors, you can easily do it. Simply change the color code. If that won’t work, create a new descriptive name and use that instead. Whatever strategy you choose, make it simple so you or someone else can easily make updates in the future.

Make Your Own UI Pattern Library

What are User Interface Design Patterns? A pattern is a plan or model for making something. In software development, patterns provide solutions to specific design problems. Buttons tell people to do something. Download, Buy, Continue or Save.

Make Your Own UI Library

Photo by Susan Q Yin on Unsplash

When you design a website or web app, you’ll need a navigation bar, button, tabs, forms and more. Common design patterns help to make your design easy to use and user friendly.

What is a UI Pattern Library?

A UI Pattern Library is a collection of user interface components or patterns. It helps you to define how each component looks and works. Your pattern library helps to ensure a consistent look and feel across your products. You want to add solutions so you don’t have to solve the same design problem over and over again. Or search your app for the pattern that you need to use.

What goes in it?

You’ll want to define your user interface. How you create buttons, navigation bars, layouts, alerts and notifications. Include guidelines on how and when to use them. You may want to include code snippets so you don’t have to rebuild a component from scratch. Also include color palettes, typography and grid layouts.

Where to find Design Pattern Libraries and Resources?

Build Your Own

When you build your own pattern library, get designers and developers involved. A pattern library is a collaborative project. Both your designers and developers must work together in creating and maintaining it.

  • Decide on what to name things The team needs to decide what to call a component. A shared naming convention prevents communication problems.
  • Use a ticket system to track updates Your design library has to be updated and maintained. A ticket system makes it easy to track changes. You can create an approval system for requests.
  • Audit your library Your library can quickly become out of date. Remove old components, templates and no longer used patterns. Plan to audit your library at least once a year.

Switching to Utility-First CSS

When you write CSS, do you create classes that reflect the UI? Classes like card, button, title, sidebar or link. Your classes have every possible element defined in that class.

Switching to Utility-First CSS

Image by superdirk from Pixabay

What if you didn’t write your CSS that way? Utility-first CSS creates a series of helper classes or utilities. A utility class does one thing really well. For example, you might write a class that changes the background color to blue. Then, you would use to change the background color on buttons, cards and CTA boxes. Use it wherever you want. You mix and match these utilities to create the look you want.

Where can you learn more about it?

Start by checking out these articles:

What CSS Methodologies can I use?

You can look at these couple popular methodologies:

  • Cube CSS – a CSS methodology that focuses on simplicity, consistency and works with whatever medium you are using.
  • Tailwind CSS – a CSS framework that helps you rapidly build modern websites.
  • Atomizer – a CSS utility library that integrates with the most popular web frameworks.

Software development consistently changes. A developer needs to experiment with new tools and new ideas. You need to pick the tools that best suit your project and users.

Making an Advice Generator

Have you tried a coding challenge? Coding challenges allow you to stretch you programming and design skills. You have your choice of places to find coding challenges.

Making an Advice Generator

Image by Dean Moriarty from Pixabay

You can pick coding challenges that ask you to build components or a simple app. Some of the challenges include working with an API.

Advice Generator

The Advice Generator coding challenge on Frontend Mentor has you working with an API. This API provides you with data for displaying advice on a web page.

Screenshot of Advice Generator with Advice #100: Everybody makes mistakes.

How I Built It

I created this app using HTML, CSS and JavaScript. For CSS, I started with Bootstrap to help structure the design. Then, I used FlexBox to manage the layout.

Fetching Data

I used the JavaScript Fetch API to fetch the data from the Advice Slip JSON API and display it on a web page. By default, it picks a piece of advice and displays it. If you want to get another piece of advice, you need to click the dice icon. This icon button retrieves a random piece of advice.

If you don’t use the cache option of no-cache, you get the small piece of advice. When you call the API which returns a random piece of advice, it doesn’t display on the web page. It is caching the data. When you use the no-cache option, fetch retrieves a random piece of advice.

Design Challenges

The layout required centering the advice box and the dice icon for the button. To handle this, I used FlexBox to center the box and to align the button on top of the bottom of the box. You need to use a combination of absolute positioning and FlexBox to get the dice to appear where you want it.

The advice box needs to be flexible. It has to expand and contract depending on the size of the advice. FlexBox makes this easier.

Other Coding Challenges

Page 1 of 31

Powered by WordPress & Theme by Anders Norén