Helitha Rupasinghe1. Use Flexbox for Responsive Layouts
Flexbox allows you to easily develop responsive and flexible layouts, making it easy to change your website to different screen sizes.
/* This is a CSS snippet for creating a responsive layout using Flexbox.
It sets the parent container to have display: flex and flex-wrap: wrap,
allowing the child elements to adapt to the size of the screen. */
.container {
display: flex; /* Sets the container to use Flexbox layout */
flex-wrap: wrap; /* Allows child elements to wrap onto multiple lines if necessary */
}
/* The child elements are set to have a flex-basis of 100%,
ensuring they take up the full width of the container on smaller screens */
.child {
flex-basis: 100%;
}
/* Media query for screens larger than 768px */
@media (min-width: 768px) {
/* On larger screens, the child elements are set to have a flex-basis of 50%,
allowing them to take up half of the container's width */
.child {
flex-basis: 50%;
}
}
This is a basic example, you can also use flex: 1 to make the child elements take up equal space in the container, or use flex-shrink and flex-grow to control how the child elements adjust in size when the screen size changes.
2. Use CSS Grid for Advanced Layouts
CSS Grid can be used to create complex layouts, with rows and columns that can easily be adjusted to create a variety of different layouts.
/* This is a CSS Snippet for creating an advanced layout with CSS Grid. */
.grid-container {
display: grid; /* Use the grid layout */
grid-template-columns: repeat(3, 1fr); /* Create 3 equal-width columns */
grid-template-rows: 100px 200px; /* Create 2 rows with specific heights */
grid-gap: 10px; /* Add a gap of 10px between the grid items */
}
/* Define grid items */
.grid-item {
background-color: #eee; /* Add a light gray background color */
padding: 20px; /* Add some padding to the items */
}
/* Style specific grid items */
.grid-item:nth-child(1) {
grid-column: 1 / 3; /* Span the first item across the first 3 columns */
grid-row: 1 / 2; /* Span the first item across the first row */
}
.grid-item:nth-child(2) {
grid-column: 2 / 4; /* Span the second item across the last 2 columns */
grid-row: 2 / 3; /* Span the second item across the last row */
}
This CSS code snippet uses the CSS Grid layout to create a grid container with 3 equal-width columns and 2 specific rows. It also uses the grid-gap property to add a 10px gap between the grid items.
It defines .grid-item to have a light gray background color and some padding, and uses the :nth-child pseudo-class to target specific grid items and control their placement within the grid.
It shows how we can span the grid-items to cover multiple rows and columns, and how to use the grid-template-rows and grid-template-columns to define the grid layout .
3. Utilize CSS Variables
CSS Variables are becoming more popular because they allow you to store values in the CSS code, which can then be referenced throughout your code. This allows you to change values on the fly without having to change many lines of code.
/* This is a CSS Snippet for declaring a CSS variable */
:root {
--main-color: #ff0000; /* sets the value of main-color variable to red */
}
/* Use the CSS variable in a CSS rule */
.container {
background-color: var(--main-color); /* sets the background color of .container to the value of the main-color variable */
}
/* You can also use CSS variables to set property values */
.text {
color: var(--main-color); /* sets the text color of .text to the value of the main-color variable */
}
CSS variables are an extremely useful feature for keeping your CSS code DRY and making it easy to update values across your stylesheet.
By using CSS variables you can make your code more maintainable, and also make it easy to update your site's design.
The use of variables allows you to set a value once and reference that value multiple times throughout your stylesheet, rather than having to update the same value in multiple places.
4. Take Advantage of CSS Animations
CSS Animations allow you to create smooth transitions and animations that can easily be tweaked and adjusted as needed.
/* This is a CSS Snippet for defining the animation */
@keyframes animate {
/* Start from 0% */
0% {
/* Set the initial state of the animation */
transform: translateY(0);
}
/* End at 100% */
100% {
/* Set the final state of the animation */
transform: translateY(-10px);
}
}
/* Apply the animation to an element */
.example-element {
/* Set the animation to play for 1 second */
animation: animate 1s;
}
This CSS code snippet defines an animation called "animate" that moves an element up by 10 pixels over the course of 1 second. The animation is applied to the element with the class "example-element".
The @keyframe rule is used to define the animation, which is comprised of one or more keyframes. At 0% (the start of the animation), the transform property is set to translateY(0), which means that the element's position on the Y-axis will remain unchanged. At 100% (the end of the animation), the transform property is set to translateY(-10px), which means that the element will be moved up 10 pixels on the Y-axis.
The animation property is used to apply the animation to an element, and is set to the animation name (animate), duration (1s), and any additional animation properties such as timing function, iteration count and direction.
5. Use Media Queries to Create Responsive Designs
Media Queries can be used to adjust the styling of a website based on the size of the browser window. This is an excellent method for ensuring that your website appears amazing on all devices.
/* This media query targets screens with a minimum width of 600px */
@media (min-width: 600px) {
/* Selects the element with the ID "header" and makes its font-size larger */
#header {
font-size: 2em;
}
/* Selects the class "menu" and changes its display property to "block" */
.menu {
display: block;
}
}
/* This media query targets screens with a maximum width of 600px */
@media (max-width: 600px) {
/* Selects the element with the ID "header" and makes its font-size smaller */
#header {
font-size: 1.5em;
}
/* Selects the class "menu" and changes its display property to "none" */
.menu {
display: none;
}
}
This CSS code demonstrates how media queries can be used to create responsive design. Media queries allow you to change the styling of an element based on the screen size, so you can ensure that your website looks good on any device.
In this example, the media queries target screens with a minimum width of 600px and a maximum width of 600px, respectively. The first media query makes the font-size of the element with the ID "header" larger and changes the display property of the class "menu" to "block." The second media query does the opposite, making the font-size of the element with the ID "header" smaller and hiding the class "menu" by setting its display property to "none."
It's worth noting that with modern CSS and Javascript frameworks, media queries are not the only way to make a website responsive.
Some frameworks like Bootstrap, Foundation, Bulma, etc. have pre-defined CSS classes that can be applied to elements to make them responsive, this can save the developer a lot of time, but also limit the design options.
6. Utilize CSS Preprocessors
CSS preprocessors like SASS, LESS, and Stylus can help you write more complicated and organised CSS code.
/* This is a CSS snippet, which allows us to use variables, mixins, and other advanced features to make our CSS code more readable and maintainable. */
/* Define a variable for the primary color used throughout the site */
$primary-color: #00ff00;
/* Define a mixin for easily creating responsive text */
@mixin responsive-text {
font-size: 16px;
@media (min-width: 768px) {
font-size: 18px;
}
@media (min-width: 992px) {
font-size: 20px;
}
}
/* Use the primary color variable and the responsive text mixin */
h1 {
color: $primary-color;
@include responsive-text;
}
This is a short CSS code snippet that demonstrates how to use CSS preprocessors in order to make the CSS code more readable and maintainable. The above code uses variables and mixins to make it easy to change and update the primary color used throughout the site and to create responsive text respectively.
7. Employ Responsive Typography
Use relative units like ems and rems to adjust font size based on the size of the browser window. This can help create a more consistent look across all devices.
/* Responsive Typography */
/* Define a base font-size and line-height for the body text */
body {
font-size: 16px;
line-height: 1.5;
}
/* Use media queries to adjust the font-size and line-height on different screen sizes */
@media (min-width: 768px) {
body {
font-size: 18px;
line-height: 1.6;
}
}
@media (min-width: 992px) {
body {
font-size: 20px;
line-height: 1.7;
}
}
/* Use rem units for any other typography elements, so that they are relative to the base font-size */
h1, h2, h3 {
font-size: 2rem; /* 2 times the base font-size */
margin-bottom: 0.5rem; /* 0.5 times the base font-size */
}
This CSS snippet is a simple example of how you can use media queries to make your typography responsive. The font-size and line-height properties are set for the body element, then adjusted at different breakpoints using media queries. By using rem units for other typography elements, they will also be relative to the base font-size, making it easy to maintain a consistent typography scale throughout the site.
8. Take Advantage of Shorthand CSS
Shorthand CSS allows you to write CSS faster and more efficiently. It also helps to keep your code more organized and easier to read.
/* Shorthand CSS is a way to write CSS properties and values in a more concise way.
In this CSS Snippet, we'll use shorthand to set the margin and padding for a block element */
/* The element we'll be styling */
#my-block {
/* Shorthand for setting the margin on all sides.
The order is top, right, bottom, left */
margin: 10px 20px 30px 40px;
/* Shorthand for setting the padding on all sides.
The order is top, right, bottom, left */
padding: 5px 10px 15px 20px;
}
In this example, we're using shorthand to set the margins and padding on all sides of an element with the id of "my-block". The margin shorthand property is set to "10px 20px 30px 40px", which sets the top margin to 10px, the right margin to 20px, the bottom margin to 30px, and the left margin to 40px. The padding shorthand property is set to "5px 10px 15px 20px", which sets the top padding to 5px, the right padding to 10px, the bottom padding to 15px, and the left padding to 20px.
💡 Note - It's important to note that if you only want to set the margin or padding on one side of the element, you can use the individual properties such as "margin-top", "padding-right", etc.
9. Use CSS to Create Custom Scrollbars
CSS can be used to customize the look of a browser’s scrollbar. This can help to create a more unique and aesthetically pleasing design.
/*
Custom Scrollbars using CSS
This code snippet will change the appearance of scrollbars on the page
when used in conjunction with ::-webkit-scrollbar pseudo-element
*/
/* Select the scrollbar element */
::-webkit-scrollbar {
/* Change the width of the scrollbar */
width: 10px;
/* Change the background color of the scrollbar */
background-color: #F5F5F5;
}
/* Select the thumb (draggable part) of the scrollbar */
::-webkit-scrollbar-thumb {
/* Change the border radius of the thumb */
border-radius: 10px;
/* Change the background color of the thumb */
background-color: #007bff;
}
/* Select the thumb on hover */
::-webkit-scrollbar-thumb:hover {
/* Change the background color of the thumb on hover */
background-color: #0056b3;
}
This code snippet uses the ::-webkit-scrollbar pseudo-element to select and style the scrollbar, and the ::-webkit-scrollbar-thumb pseudo-element to select and style the thumb (draggable part) of the scrollbar. It changes the width, background color, and border radius of the scrollbar and thumb, and changes the background color of the thumb on hover. Note that this will only work in webkit-based browsers such as Chrome and Safari.
10. Utilize Responsive Images
Responsive images are becoming increasingly popular and can be used to ensure your images look great on all devices.
/* Define the default image size */
img {
max-width: 100%;
}
/* Use media queries to change image size on different screen sizes */
@media (min-width: 768px) {
img {
width: 50%; /* Half the size on screens 768px and up */
}
}
@media (min-width: 992px) {
img {
width: 25%; /* One quarter the size on screens 992px and up */
}
}
This CSS snippet uses media queries to change the width of img elements at different screen sizes. The default max-width is set to 100%, which means the images will scale down to fit the container, but never scale up. The media queries then change the width of the images to 50% when the screen width is at least 768px and 25% when the screen width is at least 992px.
You can adjust the media query breakpoints and percentage values to suit your specific design needs.
