Should you choose a pre-built CSS framework or create your own from scratch?

Have you come across a framework that meets your project needs with just a few tweaks, or have you forged your own path along the way? What advice do you have for someone facing this decision and focusing on priorities like:

Implementing a CSS reset
Refining typography and establishing a baseline grid
Using semantic classes
Ensuring accessibility
Including various "Helper" classes such as .demphasized, .errormsg, .readmore, etc.
Utilizing a grid system, unless it interferes with #3 above

Less important considerations: - Support for fluid/elastic layouts - Using type in ems/%s

Appreciate any insights you can offer. Thank you!

Answer №1

You won't find a one-size-fits-all framework, but there are options like Blueprint that can provide a solid starting point for your project.

Answer №2

I've made some great progress using the following resources:

960 Grid for layouts

Blueprint

The jQuery UI CSS Framework

YAML

Answer №3

The Elastic CSS framework offers a wide range of features to customize your design, from centering elements to supporting adaptive layouts. While it may not include baseline support just yet, you can easily integrate it with baseline.css for added functionality. With user-friendly class names and the ability to combine classes, Elastic makes styling your website a breeze.

In addition to its many helper classes, Elastic is designed to work seamlessly with your existing styles without interfering with absolute positioning. Best of all, it's free and compatible with all major browsers. Whether you prefer fixed, fluid, or elastic layouts, Elastic has you covered with unlimited nesting capabilities for advanced designs.

Answer №4

If you're looking for a straightforward HTML framework, check out Siimpler. It features a pre-made file and folder setup which can be easily customized to meet your specific requirements. Additionally, users have the option to select between CSS reset and Normalize.css for their projects.

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

Python Selenium: Cannot Click on Element - Button Tag Not Located

TL,DR: My Selenium Python script seems to be having trouble "clicking" on the necessary buttons. Context: Hello. I am working on automating the process of logging into a website, navigating through dropdown menus, and downloading a spreadsheet. Despite ...

javascript python html selenium iframe

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascript html css

Engage the PROTRACTOR refresh function

I'm just getting started with automation and Protractor. I successfully automated the login page, but now I'm facing a challenge with accessing a menu that I need in order to navigate to a different page. Within the menu, there is an href="#/dom ...

javascript css angularjs protractor

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

javascript php html google-analytics

Missing dots on owl carousel

Currently, I am working on a project that involves using the owlcarousel library in javascript. Everything was running smoothly until I encountered an issue. Although I have set the dots to true in the code, they are not appearing on the carousel. Below i ...

javascript css owl-carousel

`CSS Toggle Smooth Transition Effect`

I am working on creating 2 CSS toggle buttons that currently have a fade in and out effect when clicked. I would like them to have a sliding animation from right to left instead. Below is the HTML, CSS, and a link to a fiddle containing my code. Thank yo ...

html css animation toggle slide

"Encountering an issue when trying to choose a value from a select list using jQuery and the

What am I missing here or what is the correct approach to solve this? Take a look at the following code snippet: code snippet $(document).ready(function() { $(".metric_div").hide(); $("#solid_radio").click(function() { $("#solid").show(); ...

javascript jquery html

The erratic nature of Tailwind actions

Currently, I am immersed in a Livewire project and attempting to implement some Tailwind theme configurations. However, the process does not appear to be coherent whatsoever. Here is an excerpt of my Tailwind configuration: theme: { extend: { f ...

css laravel tailwind-css laravel-blade laravel-livewire

Discovering the window scroll unit when clicking, as a page smoothly transitions to the top for a specified target position

Is there a way to achieve parallax scrolling on window scroll and navigation click simultaneously? When navigating and animating the page to the top to show the target, I also want to get the window scroll unit. How can I obtain the window scroll unit on ...

javascript jquery html css

Tips for applying/styling "All Items Center" and "Space Between Items" in CSS and ReactJS

justify-content: space-evenly; seems to be working correctly, but the desired output is not achieved I am aiming for something like this: https://i.stack.imgur.com/iQoWK.png However, this is what I currently have: https://i.stack.imgur.com/1PxGR.png ...

css reactjs flexbox jsx

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...

javascript html css angularjs

What causes the unset width or height to impact object-fit, and is there a workaround for this issue?

Query Beginnings Encountering unexpected behavior while using the value unset with the rule object-fit led me to question if there might be a rationale or workaround for this peculiar issue. Demonstration .block { &__img { width: 100%; hei ...

css sass

Tips for aligning text alongside ons-select elements

I am working with the following HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://u ...

html onsen-ui

Top strategies for avoiding element tampering

What is the best solution for handling element manipulation, such as on Chrome? I have a button that can be hidden or disabled. By using Chrome's elements, it is possible to change it from hidden/disabled to visible/enabled, triggering my click functi ...

javascript jquery html dom

Jquery spinner overlay for enhanced loading experience

Currently, I am incorporating jQuery/Ajax in my project and wanted to include a spinner when an ajax request is made. The specific scenario involves two tabs on the UI: Home and Activities. When the user clicks on the Activities tab, an ajax request is sen ...

javascript jquery ajax html

Use regular expressions to automatically generate HTML attributes in your styling

My ionic/angular app generates a custom tag element with a unique _ngcontent attribute on each refresh, like so: <tag _ngcontent-hgr-c2>...</tag> (1st refresh) <tag _ngcontent-agj-c7>...</tag> (2nd refresh) <tag _ngcontent-cfx-c5 ...

html css css-selectors

Stop vertical scrolling in a designated div container

I am dealing with a div that is overflowing, but the horizontal scroll bar is not visible. How can I prevent actual scrolling on the div when the user attempts to scroll using the mouse or arrow keys? Below is the code for this div and a snapshot <!- ...

html css

Creating a user-friendly HTML form to convert multiple objects into JSON format

Edited content: $.fn.serializeObject = function() { var obj = {}; var arr = this.serializeArray(); $.each(arr, function() { var value = this.value || ''; if (/^\d+$/.test(value)) value = +value; if (obj[this.name] !== u ...

javascript jquery html json forms

Creating dual modes (night/day) for your AngularJS application

Currently, I am in the process of developing a project with Angularjs and facing an obstacle with animations. My goal is to implement a feature in my application that allows it to display in two different modes - night mode and day mode. I have come ac ...

javascript css angularjs sass angular-ui-router

What are the steps to modify the text color in WKWebView?

I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...

html css ios swift wkwebview

CSSer Q&A