Responsive CSS counter without Javascript

CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they’re used.

Today I want to show you how to create responsive cards that adapt to screen size. We have one great feature here, if the cards don’t fit on the screen, we’ll show the number of hidden cards, cool, right?

Let’s go to the code!

 

This is out HTML

<section class="small-card">
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__count">
            <p class="small-card__count-text">
                +<span class="small-card__count-value"></span> more items
            </p>
        </div>
    </section>

Nothing special here. We have one section and we have several divs inside!

 

CSS

.small-card {
    position: relative;
    height: 100px;
    padding: 10px;
    overflow: hidden;
    background: #ddd;
    counter-reset: item-count;
}

.small-card__item {
    float: left;
    width: 100px;
    height: 100px;
    background: #444;
    border-radius: 3px;
    margin: 0 0 10px 10px;
}

.small-card__item:first-child {
    margin-left: 0;
}

.small-card__count {
    display: none;
    width: 80px;
    height: 100px;
    position: absolute;
    right: 10px;
    top: 10px;
    background: #fff;
    border-radius: 3px;
}

.small-card__count-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.25em;
}

.small-card__count-value::after {
    content: counter(item-count);
}

@media (max-width: 319px) {
    .small-card__item:nth-child(1)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 9px) {
    .small-card__item:nth-child(0)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(-1) {
        margin-right: 90px;
    }
}

@media (max-width: 429px) {
    .small-card__item:nth-child(2)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 119px) {
    .small-card__item:nth-child(1)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(0) {
        margin-right: 90px;
    }
}

@media (max-width: 539px) {
    .small-card__item:nth-child(3)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 229px) {
    .small-card__item:nth-child(2)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(1) {
        margin-right: 90px;
    }
}

@media (max-width: 649px) {
    .small-card__item:nth-child(4)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 339px) {
    .small-card__item:nth-child(3)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(2) {
        margin-right: 90px;
    }
}

@media (max-width: 759px) {
    .small-card__item:nth-child(5)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 449px) {
    .small-card__item:nth-child(4)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(3) {
        margin-right: 90px;
    }
}

@media (max-width: 869px) {
    .small-card__item:nth-child(6)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 559px) {
    .small-card__item:nth-child(5)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(4) {
        margin-right: 90px;
    }
}

@media (max-width: 979px) {
    .small-card__item:nth-child(7)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 669px) {
    .small-card__item:nth-child(6)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(5) {
        margin-right: 90px;
    }
}

@media (max-width: 1089px) {
    .small-card__item:nth-child(8)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 779px) {
    .small-card__item:nth-child(7)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(6) {
        margin-right: 90px;
    }
}

@media (max-width: 1199px) {
    .small-card__item:nth-child(9)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 889px) {
    .small-card__item:nth-child(8)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(7) {
        margin-right: 90px;
    }
}

Here is the demo.

Thank you all.

You can also read this

Simple REST API with ExpressJS

Express is a minimal and flexible Node.js web application framework...

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

Error handling with ExpressJS

Error Handling refers to how Express catches and processes errors...

app.get('/', function (req, res, next) {
  fs.readFile('/file-does-not-exist', function (err, data) {
})