CSS – Richard Callaby

With today’s technology accessing the World Wide Web has become commonplace. You can access the Web on virtually any device these days. As such, you should design your website or app based on that fact.

There are several modern ways to handle multiple screen sizes using CSS:

CSS Media Queries: Media Queries are the most widely used method for responsive web design. They allow you to apply different styles to different screen sizes using conditions based on screen size, device orientation, and other features.
Flexbox Layout: Flexbox is a layout module in CSS that makes it easier to create flexible and responsive designs. With Flexbox, you can define the layout of your page using flexible containers and flexible items, which adjust to different screen sizes.
Grid Layout: Grid Layout is another layout module in CSS that provides a powerful way to create grid-based layouts. It allows you to define rows and columns and place elements within them, making it easier to create flexible and responsive designs.
Viewport Units: Viewport units are a set of units in CSS that are based on the size of the viewport. They can be used to set the size of elements relative to the viewport, allowing you to create responsive designs that adapt to different screen sizes.
CSS Frameworks: There are many CSS frameworks available that provide pre-written CSS and JavaScript for responsive web design. Some popular CSS frameworks include Bootstrap, Foundation, and Materialize.

Ultimately, the best way to handle multiple screen sizes will depend on your specific needs and the design of your website. It is common to use a combination of these techniques to achieve the desired result.

There is a growing movement in the web development community to return to the basics of building websites using just HTML, CSS, and JavaScript. This approach often referred to as “vanilla” web development, is seen as an alternative to using frameworks such as React, Vue, and Angular.

One of the main arguments for using vanilla web development is that it allows for greater flexibility and control over the final product. Frameworks can be restrictive in terms of the design and layout of a website while using just HTML, CSS, and JavaScript allows for complete freedom in how the website is built. Additionally, using vanilla web development allows developers to have a deeper understanding of how the website is functioning and how it is interacting with the browser, which can be beneficial for troubleshooting and debugging.

Another argument for using vanilla web development is that it can be more performant than using frameworks. Frameworks often add an additional layer of abstraction between the developer and the browser, which can lead to slower load times and increased memory usage. By using just HTML, CSS, and JavaScript, the browser can render the website more efficiently and quickly.

There are also benefits to using vanilla web development in terms of maintainability and scalability. Frameworks are constantly evolving and updating, which can make it difficult to keep up with the latest changes. With vanilla web development, the codebase is simpler and more straightforward, making it easier to maintain and update over time. Additionally, since the codebase is not tied to a specific framework, it can be more easily scaled and adapted to new technologies in the future.

However, it’s important to note that using frameworks can be beneficial in certain situations, such as when building complex, large-scale applications. Frameworks like React and Vue provide a set of tools and best practices that can make it easier to manage and organize large codebases. They also often provide additional features such as state management and built-in performance optimization.

In conclusion, there are valid arguments for using vanilla web development instead of frameworks when building websites. Vanilla web development allows for greater flexibility and control, can be more performant, and is generally easier to maintain and scale. However, it’s important to evaluate the specific needs of a project and weigh the pros and cons of each approach before making a decision.

Tag: CSS

How to handle responsive web design and multiple screen sizes.

Going Back to the Basics? An argument against using Web Frameworks.