Enhance Your Website with H5BP and the 1140 Grid System

I'm currently in the process of fusing together the 1140px Grid System (http://cssgrid.net/) with HTML5 Boilerplate (http://html5boilerplate.com/), aiming to create a hybrid that captures the strengths of both for my personal project framework.

Since I lack knowledge in JavaScript, I am curious if the version of Modernizr script integrated into HTML5 Boilerplate performs the same function as the script utilized by the 1140px Grid System to enable media queries on unsupported browsers. Do I need to include both scripts or is one sufficient?

If you'd like more information, check out these resources:

http://code.google.com/p/css3-mediaqueries-js/ http://modernizr.com/download/

Any suggestions? I've tried to navigate through the modernizr documentation, but it's proving to be a bit too complex for me.

Appreciate any help provided.

cssgridhtml5boilerplate

Answer №1

If you're not familiar with JavaScript, it's best to avoid Modernizr (and start learning JavaScript as soon as possible). CSS3-mediaquery-js is a simpler option, requiring only the addition of media queries to your CSS files without any JS involvement. If you decide to go with HTML5 BP, I suggest disregarding 1140 and opting for Twitter Bootstrap

Update: Respond.js could serve as an alternative to CSS3-mediaqueries-js. Once again, the latter may be the simplest to use.

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

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue. Here is the layout of the page: <nav> navbar </nav> <div> car ...

htmlcssbootstrap-5

Modify the button's text with jQuery after it has been clicked

I've been struggling to update the text of a button after it's clicked, and I'm encountering an issue where it works in one part of my code but not in another. Could someone please guide me on what might be missing in my code? The first bl ...

javascriptjqueryhtmlcss

Enhancing Animation Speed with jQuery

I've provided the code snippet at this link: http://jsfiddle.net/LnWRL/4/: Here is the HTML: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <div id="wrap_demo"> <div id="demo"></di ...

javascriptjqueryhtmlcss

Resizing a floated div causes the image to break out

My webpage has a container div with two floated left divs inside, positioned side by side. The right div contains a YouTube video and an image. However, when I resize the page, the video and picture flow out of the containing floated div instead of dropp ...

htmlcss

Styling Input elements with a unified border in Bootstrap

[Issue Resolved] I have been working on setting a single border between multiple inputs inside a form-group in Bootstrap. Currently, the border is only visible when the input is not focused and it is the last one. However, my expectation is for the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What could be the reason for the text covering the image on the larger breakpoint?

I am having an issue with this code where the Lorem Ipsum text is not staying centered at all times. Instead, it overlaps the image when I reach the large breakpoint. Can you please explain why this is happening and suggest a solution? Here is the curren ...

htmlcssbootstrap-4

Achieving functionality with dropdown menus in jQuery

I am facing an issue with a dropdown menu that works perfectly in jsFiddle during testing, but does not function as expected when I run it on my testing server. jsFiddle: http://jsfiddle.net/cyberjo50/39bu8/2/ HTML <!doctype html> <html> < ...

javascriptjqueryhtmlcss

Looking to slide a form on top of an image carousel in Bootstrap - any tips?

How can I move this form over the "carousel"? <html> <head> <title>test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http ...

htmlcssformsbootstrap-4

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

css

Ways to customize CSS heart icon to place within an image

My latest project involves CSS artistry with a heart shape. However, I am looking to take it a step further by incorporating a dynamic image inside of it. Here is the current code snippet: .heart { position: relative; width: 100px; height: 90px; f ...

csscss-shapes

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

csstypescriptangularcomponentsrelative-path

When hovering over a tooltip, I noticed the script embedded within the HTML code

Upon the initial page load, I encounter an issue with the tooltip when I hover over the '?' glyphicon symbol. However, after logging into the website and once the page has fully loaded, I am able to see the entire title script written inside the ...

cssangularjshtmlangular-ui-bootstrap

Unavailability of certain CSS rules

I have integrated a Bootstrap jumbotron as the header for my webpage and have my own custom layout.css file. However, not all the styling rules defined for the .jumbotron class seem to be working. Despite setting margin-bottom: 0px;, it does not reflect in ...

htmlcssbootstrap-4

CSS nested selector, target only the second level elements and disregard the first and any levels beyond the third

I have a complex structure with nested divs and classes. The hierarchy is as follows: row-container, row, row-content, col, and col-inner. Objective: I aim to target only the "col" class on the second level of the "box" class, while disregarding the f ...

htmlcss

Ways to incorporate line spacing using CSS

Is there a way to adjust the spacing between the drop down boxes in the sidebar so that they align neatly with the questions in my section? select { font-family: 'Courier New', monospace; color: black; font-weight: bold; font-size: 3 ...

htmlcssinline

Angular 4 application fails to occupy the entire screen height

Here is how my app.component looks: <div class="wrapper"> <app-header></app-header> <router-outlet></router-outlet> <footer> <section class="page group"> {{ 'COMPANY.address' | translate ...

htmlcssangularfooter

Safari causing placeholders to be sliced

I'm having trouble creating attractive placeholders in Safari. This is how it currently appears. Codepen: https://codepen.io/anon/pen/RLWrrK https://i.sstatic.net/aChBs.png .form-control { height: 45px; padding: 15px; font-size: 16px; col ...

htmlcsstwitter-bootstrap

What is the process for calculating and determining the exact area the div should be released?

I am currently developing a drag-and-drop application using only Javascript. I have successfully implemented the dragging functionality, allowing elements to be moved randomly within the page. However, I now face the challenge of creating a drop zone with ...

javascripthtmlcssdrag-and-drop

Customize the dimensions of the bootstrap dropdown menu

I have a dropdown feature on my bootstrap second textbox with a lot of content. The issue is that the dropdown overflows and leaks into the textbox located on the left below it. How can I resize it properly to fit within the confines of the drooping textbo ...

javascripthtmljquerycssbootstrap-5

Selection box and interactive buttons similar to those found in Gmail

Looking to achieve these effects for <option> and <button> using CSS and JavaScript. Any suggestions on how to do this? ...

javascripthtmlcss