DEV Community: M Adeel Ahsan

A simple CSS Grid System

M Adeel Ahsan — Fri, 15 Oct 2021 15:11:46 +0000

sc-css-grid-system

Simple CSS grid system component built with styled component for react.
sc-css-grid-system utilizes the power of CSS grid and styled-components to easily create responsive grids.

key features

responsive breakpoint xs,sm,md,lg,xl
responsive gutter/gap option
really easy to use

Responsive Grid Example:

import {Grid} from 'sc-css-grid-system';

function CssGridSystem() {
    return (
        <Grid xs={2} sm={3} md={4} lg={6} xl={12} gap={30}>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </Grid>
    );
}

render as:

for complete documentation and demo:

Github repo

NPM

SC-CSS-Grid-System

Applying shadow to transparent images

M Adeel Ahsan — Mon, 28 Dec 2020 10:21:57 +0000

box-shadow doesn't work well with transparent images. The image will show up wrapped in a rectangle.

So in order to tackle this situation, we can use the filter CSS property.

Vscode Live Share

M Adeel Ahsan — Tue, 15 Dec 2020 06:21:12 +0000

Ever want to collaborate on a project remotely or just want to review the code without getting the local copy of the code. Say no more now you can use Vscode live share extension to do just that.
check it out
https://visualstudio.microsoft.com/services/live-share/