Opting for a CSS framework instead of building custom CSS from scratch

In my quest to achieve the best CSS practices on my website, I initially relied on my own custom CSS. However, I then discovered the option of using CSS frameworks like Bootstrap or Foundation Zurb. While I believed that using a framework alone would meet all my styling needs, I soon realized that I still needed to add custom CSS to achieve the exact look I desired.

I see the benefits of using a CSS framework, such as being served over CDN for improved bandwidth and load speed. However, I'm left wondering if it's possible to solely rely on a CSS framework without any additional custom styling.

Furthermore, I'm curious about the effectiveness of creating custom CSS and using @import to incorporate a CSS framework within the custom file. Is this considered a good practice?

Could someone offer insight into the most efficient method for serving a CSS file with or without a CSS framework on my website?

Answer №1

If you're content with the appearance of a basic framework and don't require any custom CSS, there's no need to write your own. Alternatively, if you find a theme that suits your needs within these frameworks, you can easily implement it.

Another option is to @import a framework into your custom CSS. This is particularly useful with frameworks like less that offer variables for use in your own stylesheets.

Before diving into optimization, make sure that CSS is the root of any performance issues you may be experiencing. Without proper measurements, it's premature to start tweaking. Remember, there's a trade-off between perfect design and speedy loading times.

Answer №2

Opting for a CSS framework can greatly benefit your website. Choosing between Bootstrap or Foundation can offer a wide range of functionalities and animation effects for your site. These frameworks can also speed up the development process by providing pre-written code snippets. Additionally, by utilizing Less/Sass, you can easily customize the styling of your website using variables without having to include additional custom CSS files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The elastic image slideshow maintains the original size of the images and does not resize them

When utilizing the elastic image slider, I encounter a similar issue as described at Elastic Image Slideshow Not Resizing Properly. In the downloaded example, resizing the window works correctly. However, when trying to integrate the plugin with Twitter B ...

javascript jquery twitter-bootstrap slider

How can I turn off the animation for a q-select (quasar select input)?

I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of c ...

javascript css vue.js quasar-framework

Attempting to align input fields and spans side by side

Is there a way to properly align multiple inputs next to each other with dots in between, resembling an IPv4 address? Currently, the span appears to float in the center. How can this be resolved? It's worth noting that all elements in the image have b ...

css

Off-center rotation of an element - seeking solution [closed

This question has been closed. It requires additional details for debugging. Answer submissions are currently not accepted. ...

css css-transforms

Is the misalignment due to a floating point error?

Attempted to create a 3-column layout without responsiveness, but encountered an odd alignment issue. http://jsfiddle.net/z5mgqk6s/ #DIV_1 { box-sizing: border-box; color: rgb(255, 255, 255); height: 83.2px; text-align: center; widt ...

html css

Utilizing a lone div for clearing a float

For a long time, my go-to method for clearing floats has been using <div style="clear:both;"></div>. However, I recently began wondering if in HTML as XML, could I simply use <div style="clear:both;" /> since they essentially serve the sa ...

html css xml

The height of the Material UI dropdown is displaying in an improper manner

I'm currently experimenting with the Material UI dropdown on my website, utilizing the react-select library. However, I've encountered an issue where the UI gets compromised when using an option that exceeds the width of the dropdown. If anybody ...

css reactjs user-interface material-ui react-select

The Gulp task is failing to generate the CSS file

Greetings! I have a task set up in my gulpfile.js as shown below: const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('sass', function(){ return gulp.src('sass/*.scss') .pipe(sass()) ...

css sass gulp

displaying the information when we mouse over a specific row in the table

I need to display a pop-up with data from a table row, similar to the image at this URL for CS WHOLESALE GROCERS. I've implemented the following AngularJS code in my controller: app.directive('tooltip', function(){ return { res ...

html css twitter-bootstrap

Text fields do not show a cursor icon

On the website http://www.legrandclub.net, there are two text fields. Everything works fine in all web browsers except for Internet Explorer. When I click on one of the text fields, the cursor is not displayed, although it is possible to write text. What c ...

html css internet-explorer cursor

Position div elements randomly on the webpage when it first loads

I am trying to achieve a set of divs that will appear randomly on the page when it loads. Currently, I have the divs moving around the viewport in a random manner, but they all seem to load in the top left corner. This is the method I am currently using: ...

javascript jquery css position positioning

Troubleshooting ng-bind-html issue with displaying images loaded using CSS within HTML content

I followed the instructions provided in a related post on the same topic. I used 'ngSanitize' and formatted the HTML content using 'sce.trustAsHtml()', and it rendered correctly when the HTML contained both text and images. However, I e ...

javascript css angularjs ng-bind-html

Using a dynamic image source in an Ionic 3 background

I am using ngFor to display a list of posts, each of which should have a unique background image. The getBackgroundStyle function is responsible for extracting the URL of the image from the post array. <div class="singlePost" *ngFor="let post of da ...

javascript css angular ionic2 ionic3

Creating a key-shaped design with CSS: A step-by-step guide

Looking to create a unique shape within an HTML div? By utilizing custom CSS in an HTML table, I can design a layout where one column features a rounded avatar while the other displays a rectangular box. However, I am struggling to make the circle overlap ...

css css-shapes

Setting the margin to 0 auto to create a CSS Grid layout featuring an Image taking up the entire right side

I’ve been grappling with finding a consistent method to ensure uniform white space for all containers like this: https://i.stack.imgur.com/wtk0G.png Important: The grey rectangle signifies an image. My goal is for it to extend to the viewport's en ...

css grid css-grid

Set boundaries for the width and height of an image in the input field

Looking to restrict the size of an image in an input field using HTML, CSS, and JavaScript/jQuery. Goal is to maintain a perfect square aspect ratio for profile photo uploads (for example, 200x200 or 300x300). ...

javascript jquery html css

Is there a way to evenly space out the buttons in the Nav element with more room in between each one?

I need the buttons to be evenly spaced with more room between them. And, of course, they need to be responsive in the end. I attempted to use Bootstrap's "d-flex" class to arrange the buttons, but it didn't work as expected. If you review my Boo ...

javascript html css bootstrap-5

Using the <li dir="..."> tag can cause list indicators to break

Is there a method to utilize dir tags for <li> elements without disrupting the list indicators? Logically, they should all align on the same side and RTL <li> elements in an otherwise LTR document should either be left-aligned if it's only ...

html css html-lists direction

Can you explain why this unexpected bootstrap positioning is happening?

On my website, I have two large buttons (btn-lg) - one is placed at the top of the page with a hidden form beneath it (initially set to display: none), and the other button is below that with another hidden form. When clicked, the buttons reveal their resp ...

css twitter-bootstrap

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascript css

CSSer Q&A