I am trying to prefix bootstrap classes like (card, row, bt-button...) to (my-card,my-row,my-button...). The problem is, I am only allowed to use a plain html/css file.
instead of this
<div class="row"> ... </div>
to this
<div class ="my-row">...</div>
I did some research, but mostly I need npm install or using scss, but not inside html file. Does anyone know a solution for this problem?
Related
I have a simple HTML site. The main element is a grid of images. They're all classed with their row and column. There are 5 columns, A-E.
<div class="grid">
<div class="box 1 a"><img src="./assets/Account-Attempt-4-1.gif"></div>
...
</div>
I would like to specify a batch of images (preferably in Windows Explorer) and have them formatted like the child elements of my grid.
Is there something out there that will do this that I'm just bad at Googling for? I'm on Windows 10.
My first thought would be to create a macro in a code editor, like Sublime Text. The macro would incorporate some method of auto incrementing the numbers at the ends of the file names (probably with the use of a plugin), but this is based off of the assumption that all of the images in the folder follow the same naming convention (e.g. image-1.jpg, image-2.jpg, image-3.jpg).
I think that a better option for you would be to do something like this answer that I found. With a little bit of tweaking, this method should be able to take all of the images inside of a defined directory and return an html file with formatted lines of code.
Best of luck to you!
I have come across this bootstrap theme and just wondering what tools are they using to simplify / shorten the class selector name?
Instead of something like:
<div class="row">
<div class="col-md-6"></div>
</div>
It's using:
<div class="qx">
<div class="qv"></div>
</div>
Thank you
Google's Closure Stylesheets can rename your class names. It work
in conjunction with Closure Template for the HTML and Closure
Compiler for the JavaScript.
Closure Stylesheets makes it possible to rename CSS class names in the generated stylesheet, which helps reduce the size of the CSS that
is sent down to your users. Of course, this is not particularly useful
unless the class names are renamed consistently in the HTML and
JavaScript files that use the CSS. Fortunately, you can use the
Closure Compiler to update the class names in your JavaScript and
Closure Templates to update the class names in your HTML.
SOURCE: HTML/CSS Obfuscation Compiling
I'm importing rss items where in description there is a lot of html code (links, paragraphs, etc...). When I'm viewing it in component's view like:
{{rss.description}}
the output in site is like:
Something <p>Long text</p>
How can I quickly and easy parse it to html? I don't want to cross it with jQuery. Thank you
Not sure if I understand your question correctly, but this might be what you want
<div [innerHTML]="rss.description"></div>
See also In RC.1 some styles can't be added using binding syntax for how to allow "unsafe" HTML.
<div class="innerhtml-class" [innerHTML]="variable.innerHtml"></div>
To add styles:
Component selector is: app-my-component
Add a class to the element hosting the innerHtml content in app-my-component template:
Add to the global styles file located in angular project src folder:
app-my-component {
.innerhtml-class {
declaration goes here
}
}
I have web application which uses Foundation.
I am not good at foundation and i have to develop few pages where i want to use Bootstrap but i dont want to mix with other company css.
SO i was looking if i can wrap all bootsrap inside some class like bootstrap. so that if i want to use bootsrap . i can use like
<div class="bootstrap"> <table class="table">
</div>
I don't know sass and all that.
is it possible to download some bootstrap css from online with some pre defined prefix
If you don't use SASS or LESS, you can use http://www.css-prefix.com/
Make a short prefix (my recommendation)
If you use a space, then it will be a parent class.
Paste in the compiled version of the CSS file
Click the run button
Result snippet:
.tb.col-xs-1, .tb.col-sm-1, .tb.col-md-1, ...
Indeed you could use namespaces, see: How to namespace Twitter Bootstrap so styles don't conflict, http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors and
In the case you need Bootstrap's CSS for tables only, you can compile the following Less / SASS code, after downloading the source code at http://getbootstrap.com/getting-started/#download:
**less / SASS **
.bootstrap {
#import "variables";
#import "mixins/table-row";
#import "tables";
}
As you see you can use the same code for Less and SASS, notice that the order of the imports does matter when compiling the SASS version.
update
The accepted solution only prefix classes (or selector having a class). In the case that you want to use Bootstrap's CSS to style your HTML tables. Your prefixed don't have bootstrap's styles for the table, th and caption selectors.
Even when you have never used Less / CSS before you can do the prefixing with Less (or SASS) easily leveraging an online compiler. A list of online Less compilers can be found at: http://lesscss.org/usage/#online-less-compilers. Also codepen has an online LESS and SASS compiler.
The only thing you have to know is what files to import. Bootstrap's Less files are well organized. You should always import variables.less and mixins.less. The mixins.less imports all other mixins. Mixins do not output, so importing all of them will slow down the compilation, but do not appear in the compiled CSS code.
In the case you want a prefixed version of the table CSS you can run the following code in one of the online compilers:
.bootstrap {
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/variables.less");
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/mixins.less");
#import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/tables.less");
}
An demo can be found at: http://codepen.io/bassjobsen/pen/PwPNBP
It sounds like you want to namespace Bootstrap, which is pretty easy to do using SASS (which Foundation uses, I believe). So in your SASS file (should have a .scss extension) you can import Bootstrap within a class name like this:
.bootstrap {
#import 'bootstrap';
}
And then you can reference Bootstrap in your HTML like this:
<body class="bootstrap">
<div class="col-xs-12 col-sm-6">
<table class="table"></table>
</div>
</body>
You can download SASS version of Bootstrap here: https://github.com/twbs/bootstrap-sass. Drop that SCSS file into the same directory as your main SCSS file and then you can import.
Imo the answers to this question are problematic. If you introduce a generic class to namespace everything, such as this...
.bootstrap {
#import 'bootstrap';
}
You are effectively increasing the CSS specificity.
What you really need is a tool that migrates Bootstrap to change the class names themselves.
For example,
E.g.
<div class="alert">
<div class="something alert">
<div class="something alert alert-danger">
Should become
<div class="bs-alert">
<div class="something bs-alert">
<div class="something bs-alert bs-alert-danger">
It should leave "something" alone because this class does not occur in Bootstrap.
To my knowledge such a tool does not exist (open source).
#Wolfr's answer has described the problem pretty well - in 2019 http://www.css-prefix.com/ doesn't work anymore, and all the other solutions that are in google top10 only increase css specificity by wrapping all bootstrap classes with the parent class.
That approach isn't bullet-proof:
e.g. if you make
.custom_namespace .col-3 {
width: 25%;
}
this won't protect you from someone using !important to bootstrap class for whatever reason some would do it.
.col-3 {
width: 99% !important;
}
Instead, there is actually one work I found through npm, where developer has indeed implemented that custom prefix AND even made it work with bootstrap's JS file. But it's only for Bootstrap 3: https://www.npmjs.com/package/bootstrap-sass-namespace
This will generate all bootstrap classes in form of e.g. .custom_prefix_col-3 {}
One more option if you need truly namespaced Bootstrap 4 css:
In my case I needed Bootstrap 4, so I opened bootstrap css file, ran search and replace in Sublime Text with Regular Expression, using this value for search:
\.(?<TAG>[a-z]{1,3}) - this captures all the beginnings of the classes by using period and first one to three letter characters as opposed to just searching for period (.) and risking to mess up float values for CSS properties.
and for replace I used .the_prefix_I_need\1
This allowed me to produce truly isolated bootstrap 4 css file that for sure won't be messed up if someone somewhere at the websites where my app is included will decide to redefine some bootstrap classes with !important.
I just finished creating a site with a few HTML pages and a CSS style sheet. Near the end of the project I decided I would like to change some of the class names.
Example:
In my CSS I have .classname and in my HTML I have quite a few tags linked to that css class using
class="classname"
I would like to change .classname to .class-name in my CSS Style Sheet, however, if I do this I would have to go through thousands of lines of code in my html pages to find and change all the class names from class="classname" to class="class-name"
is there a program that can be used that allows you to change a class name in the css and it will go through all html pages and change it there as well?
I use dreamweaver. Is there a way to do this in dreamweaver?
Note: I have tried using the find and replace options in dreamweaver however this does not fully work.
I'm not able to search "class="classname"" and replace it with "class="class-name" because some tags use "class="example someclass classname test""
I'm not able to search "classname" and replace with "class-name" because "classname" can be found in between <p></p> as content and I do not want it to change here.
Thank you!
I am not familiar with DreamWeaver options, but if you have a preferred advanced text editor (I use NPP) you can use regex.
I would try an expression such as (?<=class="[^"]*)(classname)(?=[^"]*")
And replace that