Upgrade the old website by incorporating some components of the Framework CSS

Question

Upgrade the old website by incorporating some components of the Framework CSS

Having experience with bootstrap, semanticUI, foundation, and other frameworks, my new project involves adding features to an existing website without rebuilding it entirely.

I am looking to implement a partial view using a framework's CSS. How can I achieve this without starting from scratch? For example, is it possible to use a CSS framework for specific elements within the site?

<body> <!-- regular old website css -->
  <div class="old"></div>
  <div class="everything-in-here-using-css-framework"></div>
</body>

I want to know if this is feasible and which frameworks support this type of implementation.

html css twitter-bootstrap zurb-foundation semantic-ui

Answer 1

Answer №1

I'm a little confused, but here are some steps you can try:

Check for conflicting class names within your framework (such as columns, small-12, etc...)
Include the CSS file from the framework (you can use a CDN for testing purposes)
Create new HTML elements and observe how they behave
If issues arise (which they likely will), try renaming old elements by adding "old-" to each class

Another option could be transitioning the project to SASS, wrapping the old CSS in a container like this:

.old {
    header { ... }
    div { ... }
}

Then, place all framework styles in something similar to this:

.new {
     ...
}

Providing more details would allow us to offer better assistance.

Answer 2

I'm a little confused, but here are some steps you can try:

Check for conflicting class names within your framework (such as columns, small-12, etc...)
Include the CSS file from the framework (you can use a CDN for testing purposes)
Create new HTML elements and observe how they behave
If issues arise (which they likely will), try renaming old elements by adding "old-" to each class

Another option could be transitioning the project to SASS, wrapping the old CSS in a container like this:

.old {
    header { ... }
    div { ... }
}

Then, place all framework styles in something similar to this:

.new {
     ...
}

Providing more details would allow us to offer better assistance.

Upgrade the old website by incorporating some components of the Framework CSS

Answer №1

Similar questions

There seems to be a white space problem located beneath the header photo and the initial

The datetimepicker is not functioning properly

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Creating dynamic div elements using jQuery

Disappearances of sliding jQuery divs

align video element to the right within a container div

Guide to creating a List from a Table and its rows in Dart

Have I incorrectly implemented responsiveness on my website?

Establishing a Connection with Node/Express Routing via JavaScript

Display a picture retrieved from a POST request using Angular and a Spring Boot backend

Issues with Forms Affecting my Footer

What is the best way to create square editor tabs in Eclipse without using swt-border-radius?

Issues with hidden overflow and height attributes not functioning correctly in Internet Explorer 9 when using the DOCTYPE HTML standards mode

What is the best way to spin a div HTML layer?

Two liquid level divs within a container with a set height

I am looking for a way to distinguish between mandatory and non-mandatory input fields in React

Position a full-width image with an SVG mask to the right, outside of the container using Bootstrap

What is the process for integrating internal PHP code into this HTML form instead of relying on an external PHP file?

The page layout is completely messed up due to the floating right button

What are the steps for generating website endpoints using search query outcomes?