Modern web development requires mastery over a wide range of skills such as knowledge of more than one programming language, frameworks, work methodologies, and much more. To create and design these web pages is a learning process like any other job and with technology’s rapidly evolving pace, web designers need to stay on top of all of this development and change and know how to build pages over several platforms and devices.
Although responsive web design is no easy task, there are ways that web developers can facilitate the process such as using SASS, a CSS preprocessor that aids with CSS grid layout and to better understand SASS, it’s essential to understand responsive web design’s fundamentals.
Responsive Web Design
Responsive web design ensures that across platforms, the website or application maintains a similar format on a device that doesn’t have the same capabilities.
For the user to have a better experience, designs should have an easy transition that don’t alter the page too much; to accomplish this, a web developer will employ a mix of flexible grids and layouts along with images and CSS media queries. When the user switches from their tablet to smartphone, the website should also adjust to different image sizes, scripting abilities, and resolution, shifting from one set of values to another based on the needs of the client.
To apply responsive web design to a website, you will need the following:
CSS and HTML: these two computing languages are paramount for web developers because they are the code that make up responsive web design in their websites. Together they determine the layout and design of a page when on a web browser.
HTML focuses on placing the structure, elements, and content that go onto a page and CSS allows web developers to modify the layout and design of the elements themselves on a page that already has HTML.
CSS code can also be included in the <style> part of an HTML page or even be written in a separate stylesheet file.
Media queries: in web development, queries function as a way to define media elements. They work similar to an if clause in some programming languages and when the page is faced with a certain parameter, it adapts to the screen’s dimensions. Depending on the screen size, the media query will allow the media elements to fit appropriately.
Fluid layouts: unlike in the past where web developers would need to fix the static value for all the HTML elements, fluid layouts provide them with the opportunity to give dynamic values. For example, the percentage of a viewport length could be set as the values and depend on the size of the screen; the varying container element sizes will adjust, growing or shrinking to fit the screen.
Flexbox layout: although fluid layout was flexible with its percentage-based system, flexbox layout takes a different approach; it acts as a flex container that enlarges items to occupy available space or reduces them in the case of overflow. This type of layout is a CSS module and was created to be a more efficient way to position various elements. Flex containers are complex, but they have very unique properties that give web developers more freedom with their cross-platform designs.
Responsive images: just like a fluid layout, responsive images use a dynamic unit to determine the length and width of the picture and by inserting the HTML <srcset> attribute in your img tags, you can scale the different versions of the images for the devices.
Speed: an important part of a responsive web design page is the speed with which a page loads and web developers must remember that your style should never hinder or delay the first render of the page. There are several ways to make your page faster like optimizing images, placing more efficient CSS layouts, and implementing caching, but it’s up to the individual web developer to create their own creative ways to streamline the process.
These parts of the responsive web design are important building blocks and putting them into the web page is a complex task; however, CSS grid layouts organize the data more concisely and simplify the entire process.
CSS Grid Layouts
Grids are great ways to organize information in general and in terms of CSS grids, they aid web developers in creating a two-dimensional layout system and organizing the information into rows and columns; they are used instead of CSS flexbox that handles either rows or columns, but not simultaneously. Let’s take a look at the details of the grid to better understand its intricacies.
Grid terminology
The following grid terms are used to describe the different parts of a grid:
Grid container: an element that is configured to appear as a grid layout and is considered to be the container for all grid items.
Grid item: directly contained in the grid container, the grid item also receives the same grid property configurations as the container.
Grid line: these lines serve the function of dividing up the rows and columns and determine the overall structure of the grid. For ease of use, the grid lines are given both positive (1 to n) and negative (-1 to -n) values.
Grid cell: a singular unit in the grid, which is bounded by four grid lines and you position your content within it.
Grid track: these are consecutive grid cells that can be either horizontal or vertical and is essentially the space between two grid lines.
Grid area: when you think of area, you think of shapes and this one is a rectangle made up of four grid lines and several grid cells. They can take up several rows and columns.
Grid properties
There are a wide variety of grid properties that impact the grid container and they include:
Display: this defines the grid container’s display and has two options: inline-grid or grid.
grid-template-columns/grid-template-rows: this property sets the amount of columns and rows in a grid and has an automatic sizing feature that is determined by the content.
grid-column-gap/grid-row-gap: this one creates the gaps between columns and rows its size.
Align-items: it defines grid item placement on the block or column line and offers choices such as start, end, center, stretch, or baseline.
Justify-items: it sets grid item placement on the inline or row line and offers choices such as start, end, center, stretch, or baseline.
Fractional unit (fr): in a grid layout, this can set your units as occupying a fraction of free space in the grid container; it can make your responsive designs much more flexible.
Knowing all of this information about grids, a web developer can use SASS, a CSS preprocessor, to further enhance their pages and facilitate their work.
Modern Web Development using SASS
Although CSS is a step up from HTML, web developers have enhanced CSS with CSS preprocessors such as SASS that build on and simplify the process for creating rich web pages. Some of the benefits of using SASS include:
Variables: thanks to variables, you can store a value or a set of them and use them throughout SASS files over and over again. This feature is extremely useful and is much more simple than CSS writing which normally requires web developers to write the same code repeatedly. They can compile their SCSS files and SASS will have the variables ready to substitute with the stored value.
Nesting: syntax can be difficult when coding with CSS, but with nested syntax on SASS, you can target elements much more neatly. Nested syntax is code within other code that carries out a broader function, so in this case, by leveraging CSS selectors, you are able to nest your HTML elements. As a result, your syntax is more natural, easier to read, and over a longer period of time more sustainable.
Mixins: similar to functions, mixins return a value or a set of them and take parameters while also implementing default values. Because of this feature, web developers can rewrite repeated blocks of code in their stylesheet and once you define the mixin, you can place it anywhere on the page.
Documentation: since SASS is so popular, there is a lot of documentation online that can help you learn and master it in no time; the best places to find tutorials and resources is on their official or community page. These will come in handy for troubleshooting any issues too.
Importing: big projects can be hard to keep organized and under control; however, thanks to the import rule, you can import smaller SASS files into a main one and as a result, manage all of your code more easily.
Compatibility: SASS is very widely used by frontend developers, so many frontend frameworks became compatible with SASS to make everything easier for their clients. Having mastery over frameworks like Bootstrap and Foundation alongside SASS, you can easily modify the framework of the page by personalizing its SASS code and it only requires you to adjust some variables’ values.
Responsive web design is complex, but thanks to tools like SASS, web developers can rest assured that they can maintain their web pages consistently across several platforms and devices. It’s crucial for users to switch devices and be met with the same page and branding since this develops rapport and trust with the site. Web developers have to learn a lot to make attractive, functional, and intuitive designs and as technology shifts and evolves, they will need to stay up to date with the most innovative tools. If you like learning new methodologies and tools like SASS and designing web pages, look no further than Ironhack’s Web Development Course.
