I'm going to be re-designing a website that currently uses Bootstrap.
I'm more of a fan of building my own layouts however as this site already uses Bootstrap, I'm unsure how to go about the re-design.
I've never used Bootstrap before (I know how it works from looking at the documentation and videos) but is it possible for me to have parts of a webpage use Bootstrap and other parts not?
For example, say there are 5 sections on a home page. The first section is a full screen hero etc.. then sections 3 and 5 break the grid. Could I use Bootstrap only for sections 2 and 4 but then do my own layout for sections 1, 3 and 5? I'm just curious as to whether or not it would cause problems doing this?
Another example is that we would want something like this on the site: https://codyhouse.co/demo/horizontal-timeline/index.html
I assume the best way to implement that would be outside of Bootstrap? So, this would be a section on a page where I don't use it?
I know we could scrap Bootstrap but not all pages on the site are being re-designed, so Bootstrap is already going to be in use. I'm trying to make parts of the site more interactive and "different", so using Bootstrap would be good for basic layout but I don't want to be fighting with it to achieve my goal.
Thanks!
you have two way to building your own layout
Overwrite the css of bootstap, create new css file and write your won styles into it and load embed it after bootstrap.min.css in you code.
Avoid use of bootstrap class, because bootstrap is working on classes so
avoid to use of bootstrap class.
Related
I want to make a snippet of javascript that my users can integrate in their website.The snippet would then load a series of elements such as divs, modals, toolstips.
A few years ago, I did this using an async javascript code that would load an iframe. Are there better ways to do this in 2019 than iframes?
Also, will my generic css iframe rules (i.e. a, div, common class names etc) interfer with the websites css? For example, can I use bootstrap or do I need to write custom css and be specific about targeting so I don't mess the other websites layout?
What else should I pay attention to?
I originally designed the whole website (single page) responsive, readapting simply using css and some inline classes from bootstrap 4.
Now i found myself in need of redesigning the whole desktop version (or let's say with a very different structure from how it currently looks on mobile).
So I'd like to keep the html i have and keep using it for mobile, and modify a copy of it and use it for desktop.
The easiest way i thought has been to keep a single index.html file as now, duplicate the whole index.html inner part (between the div with class="page", which basically comes right after body) and set one of them to class="page d-none d-lg-block" and the other one class="page d-block d-lg-none" , using bs4 classes to show/hide content based on screen size.
I have various inline js functions and other functions in js files which refer to ids, so my feel is that creates errors because js see same ids twice or some stuff appears as the page load (due to the bs4 inline class to show the content), but just to be sure does anyone know if this is a correct thing to do (also SEO wise)? Or will it mess with the javascript doing so?
Make an existing page to become responsive is not an easy thing, but its much more worth than using a workaround to hide in small and hide in large breakpoint.
The reason is because:
You will have redundant component, means your app size will be doubled after you make it responsive,
and if you use static content without database, you need to maintain the content in two place (small and large breakpoint).
Spend more time on learning grid layout, and implement it in the right way. It will become much more easier for you to maintain your web app in the future.
I am using one HTML file as the template for many pages and want to show different coloured buttons and links on some pages. I am trying to use CSS VARIABLES so that I can update them with javascript. But it all happens once the JS is loaded which causes a glitch.
Can anyone suggest a better solution or any alternative approach?
Project uses Jquery, Bootstrap and a Laravel backend.
I'm new to web and its developing.I have HTML code and JS & CSS codes snippets i want to grab all these into one HTML page to Attach custom HTML page to Joomla. Please find below the link I followed.please help me. I need to use this kind of slider
Click here to see i want to use CSS,JS,HTML code
Try this,
Instead of creating a custom HTML page for slider you can create a banner module,then assign it to a proper menu , this way has several advantages and you can use it on multiple Joomla sites and easy to manage etc.
In this method you can manage images from banner manager and links ,clicks,impressions etc. An example Joomla banner slider can be download form here. If you have some experience in Joomla then it is very easy to make your slider from the example.
If you still want to use custom html create an article then assigne it to a proper page like home. Then use some Sourcer kind of plugin for adding script inside article editor.
Hope it make sense..
Is there any JS library that can help load different html files based on the dimensions? I guess this would be a mixture of responsive and adaptive, not sure if that's kosher.
Basically I want the site to show a different top menu on a phone.
Instead of arguing with you about how you're approaching the problem, I'll say that yes, there are JS libraries that could help you out.
There's a good writeup about enquire.js at http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/. This one lets you set callbacks for breakpoints.
Another you might be interested in is breakpoints.js which, similarly, will let you write jQuery to be executed at certain breakpoints.
Is there a reason you'd want to avoid doing this with a purely responsive design? You could include both a phone navigation and desktop navigation, then hide/show via CSS based on browser dimensions.
I agree with #Kolink's comment..
But if you want to do this anyway I would suggest enquire.js.
You will be able to do something like this:
enquire
.register("screen and (max-width:50em)", function() {
// Load top menu content 1 via AJAX.
// Show content menu 1
})
.register("screen and (max-width:40em)", function() {
// Load top menu content 2 via AJAX.
// Show content menu 2
});
The ideal situation is to load just an HTML and change the CSS rules applied to it through responsive design.
If you want to have different HTML versions, then you should redirect to another URL if the request comes from a mobile browser. Look at the following link with different recipes depending on your platform:
http://detectmobilebrowsers.com/