I know bootstrap, semanticUI, foundation, etc.
My new project is a part of an old website. and we want to start implementing the new features with a normal css framework.
So, how do to implement a partial view?
lets say a with a framework css without rebuilding all the website from scratch ?
<body> <!-- regular old website css -->
<div class="old"></div>
<div class="everything-in-here-using-css-framework"></div>
</body>
is that possible? which framework support this ?
i don't fully understand but i think you can follow these steps:
make sure there are no matching conflicting class names with your framework (in foundation for example: columns, small-12, etc...)
include the framework's CSS file (you can link to a cdn just for testing)
start writing some new html elements and see how it goes.
if crashes occure (probably they will) start to change the old elements name - for instace add "old-" to every class you have.
another approach could be to move the existing project to SASS, then wrap the old CSS in a container like this
.old {
header { ... }
div { ... }
}
and put all the framework styles in something like this:
.new {
...
}
I think we'd be more helpful if you'll give more details.
Related
I got some problems implementing typeahead.js
Current setup:
I use Bootstrap v.3.3.7
I implemented jQuery 3.2
I downloaded the typeahead.bundle.min.js v.0.11.1 from Github
I added the JS file to my project and linked it on the
I implemented the typeahead stuff as described in their docs here
I added (an empty CSS) class named .typeahead to init the JS stuff
NOTE: All the typeahead stuff (live-search) works great, but typeahead destroys my css.
-
My working Pug/Jade searchbar:
.flipkart-navbar-search.smallsearch.col-xs-12.qSearchBar(style="margin-left:30px;margin-top:15px;")
.row
input.flipkart-navbar-input.col-xs-11(type='text' id="searchInput" placeholder='Übungen suchen...' autofocus)
button.flipkart-navbar-button.col-xs-1
svg(width='15px' height='15px' fill="white")
path(d='.....')
Result:
-
The code, when I add the .typeahead class to let it init typeahead (also gave it some random other names, the classname is not relevant):
.flipkart-navbar-search.smallsearch.col-xs-12.qSearchBar(style="margin-left:30px;margin-top:15px;")
.row
input.flipkart-navbar-input.col-xs-11(type='text' id="searchInput" placeholder='Übungen suchen...' autofocus).typeahead
button.flipkart-navbar-button.col-xs-1
svg(width='15px' height='15px' fill="white")
path(d='.....')
Results in:
-
Why is that? I mean of course typeahead brings its own classes like tt-hint e.g. to display the results - but these aren't any problem. Why does typeahead actually make my searchbar look like this.
This happens because like most JS/jQuery plugins, typeahead.js also modifies the DOM structure of the elements that it works on.
So, the updated DOM after initialisation of typeahead would not be the same as what you wrote in your html or jade. Your existing CSS rules may or may not apply to this new DOM structure as intended now.
Solution
You need to update your CSS rules, so they target the updated DOM after initialisation of typeahead.js.
To view the updated DOM, you can use inspect element feature of browsers or developer tools etc to view the DOM structure in real time.
Say I have the following component in my web app:
class About extends React.Component {
render() {
return (
<div className="about">
/* place html here. */
</div>
)
}
}
I'm currently practicing my understanding of raw html/css. So ideally, I want to be able to write up this about section somewhere else. E.G., an about.html and an about.css, an about.html with some inline css, or a <style> tag. Or most ideally, lower down in the same file that defines this component.
The idea is I want to separate my practicing of hmtl/css from the React specific / JSX code.
Is this possible? and if so what is the least friction route assuming that this is not a very mission critical project and I'm fine with taking a less secure or more hacky approach?
If you want, you can declare a variable elsewhere or write a different component separate from this block and bring it in. But at the end of the day, you're still going to be writing JSX. You can still use .css to style your JSX the same as you would html, there's really no difference.
I have written my own table module. Calling it in HTML code looks like this:
<my-table [data]="variableWithArr"></my-table>
Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:
for(let record of variableWithArr) {
record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}
Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:
<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>
How to fix it?
This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.
tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.
By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!
So should be something like this:
<td [innerHTML]="record"></td>
I'm working with bootstrap, and trying to get the right classes on various elements for appropriate layout on various devices. It seems for many, I want something like control-label col-md-2. So I can go through a couple dozen elements, and change them all, but then - what if I realize I really want col-md-9? I then have to go through each element and change the classes! So what I'm trying to do is:
<label class="label-class"/>
with
.label-class {
control-label col-md-9
}
Is this possible? Every answer I've found online about combining classes relates to a different type of question. Alternately, if I'm going about this all wrong, I'm willing to learn a better way to test various layouts :)
Edit:
After some more searching, I found Can a CSS class inherit one or more other classes? - seems like maybe the answer is 'not without additional utilities' sadly.
You can achieve it, but not with CSS. You could use LESS files, and with the proper medium to parse from LESS to CSS file (and "casually" Bootstrap core is written in LESS, ;D). The specification you're looking for is: http://lesscss.org/features/#mixins-parametric-feature
Bootstrap allows you download the LESS files of its code to modifications, and then, you may use a JS compiler as said in lesscss.org/usage/#using-less-in-the-browser
If you're using PHP, there are some libraries to compile it before send it to the browser, the latest is going well with Bootstrap 3.0 and that I'm using is: http://leafo.net/lessphp/
Hope this helps, XD
If you don't want to use .less and a compiler, you could use jQuery to add classes onready:
$(document).ready(function() {
$('.label-class').addClass('control-label col-md-9');
})
You can make a whole set of these in an easy to edit function mixing up bootstrap classes(btn-1 & btn-2) add custom classes (btn-3) and even inline css (btn-4 - but don't overdo this one - it gets messy fast).
$(document).ready(function() {
$('.btn-1').addClass('btn btn-danger btn-xl');
$('.btn-2').addClass('btn btn-warning btn-xl');
$('.btn-3').addClass('btn btn-success btn-sm custom-class-1 custom-class-2');
$('.btn-4').addClass('btn btn-warning btn-xl').css('text-decoration','underline');
#Chococroc is right. Here are simple steps:
Step1: Write style.less
.label-class {
.control-label;
.col-md-9;
}
Step2: Add less.js
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="script/less-1.3.3.min.js"></script>
Remember, js will call after including the less in page.
More information about less rules are available at: http://lesscss.org/
I have a page (http://www.gardensandhomesdirect.co.uk/newhomepage)
I want to make the center column (#content-column) 930px for this page only, which will eventually become the homepage.
The CMS used is NetSuite, and is notoriously difficult to work with.
What is the best way to do this? Is it possible with just CSS/HTML commands or JavaScript?
Since it's a CMS you probably cannot add markup easily so I'm thinking some jQuery would be a simple solution here...
$(function () {
var path = location.pathname.substring(1);
if (path) {
var regex = new RegExp('newhomepage$', 'gi');
if (regex.test(path)) $('#content-column').addClass('yourClass');
}
});
This should add "yourClass" to the element just on that page.
Then you can add to your external CSS...
.yourClass {
width: 930px !important;
}
I feel your pain
I have used Netsuite extensively and found )after many hours of hair pulling and expletives) that the best solution (for us) has been to create the home page and any unique landing pages as Hard coded Hosted pages (hosted on Netsuite) and reserve Netsuite's CMS system for item pages where you need the add to cart functionality.
Take it from me in the long run it'll save you hours of frustration :-)
Of course you can use Netsuite tags all over the place as long as you host the pages in your "site" folder
I have no experience with Netsuite so please take this as is..
I would try to add a custom style tag to the document like this:
<style>
#content-column{
width:930px !important;
}
</style>
If you only have access to the HTML of that page, then put an inline style attribute in the center column's HTML. Example:
<div id="content-column" style="width: 930px;">