I find myself typing the class names in JSX then typing the same class names as selectors in CSS/SCSS quite frequently.
Is there any simple way to not do these twice because it seems like something almost every react developer has to do but I cannot find any tools regarding this by searching.
To clarify is there any tool to generate this sass template or a plain CSS one:
.chatContainer {
.chat {
.chatHeader {
}
.chatBody {
}
.chatFooter {
.messageInput {
}
}
}
}
from this:
<div className="chatContainer">
<div className="chat">
<div className="chatHeader"></div>
<div className="chatBody"></div>
<div className="chatFooter">
<div className="messageInput">
</div>
</div>
</div>
</div>
supporting BEM style class names would be a nice addition too
I use Hygen for code scaffolding, especially when working with react to create my components, modules, services, etc. I hope this helps you.
Related
I'm using the following HTML code:
<div class="p-col-fixed" style="width:150px">First line:</div>
For column alignment, I have to use width:150px in many places on the same HTML page.
How can I use a #define? In CSS?
I think you are comparing the scripting language with one of the programming languages that use the #define directive.
In CSS, we have class selector for that (in case you need to use that property on multiple places in the HTML.Class selectors are defined by placing a (.) dot before the name of the class selector and are used by specifing them as a value to the class attribute.
E.g.
CSS
.cust-width
{
width:150px;
}
HTML
<div class="p-col-fixed cust-width">First line:</div>
Another feature is the "id" which is used to further refine the selection and add additional properties to the selected class.IDs are generally used in cases when the change is required in fewer classes/tags.IDs are defined using (#) before the name of ID selector in CSS
E.g.
CSS
#cust-width
{
width:150px;
}
HTML
<div class="p-col-fixed" id="cust-width">First line:</div>
For your use-case, classes are ideal.Provided that change is required in multiple parts of the HTML.
Html:
<div class="p-col-fixed define">First line:</div>
css:
.define
{
width:150px;
}
Why go in all that trouble? Simple solution is to create a CSS class and use it anywhere you need in your html file.
CSS
.width-150 {
width: 150px;
}
HTML
<div class="p-col-fixed width-150">First line: </div>
You can create a class in css and then add it in the div.
css file:
.width150 {
width:150px;
}
Then, in your html file add the class
<div class="p-col-fixed width150 " >First line:</div>
Use class if you want to add style to multiple elements.
Use id if you want to style only one element.
The best approach would be to add a class to the element first
Example : custom-width
HTML:
<div class="p-col-fixed custom-width">First line:</div>
CSS :
.custom-width
{
width:150px;
}
Your help would be immensely appreciated and thank you in advance to the audience.
I am having a small problem of CSS and .tpl files. I am currently building a site for a client using weebly cms. Which is great. However they are now using 'less' instead of normal css. This means they have partials and variables included now. Which I am unfamiliar with. I simply want to align some text to 'center' which is always a straight forward process in traditional CSS. In this case. the div class for the text in question lies within the .tpl file in 'partials' There is no class associated with the text in the normal CSS file.
I'd like to know if I could add the class within the normal CSS from the .tpl file. I have tried using the same class name from the .tpl within CSS using id tags and class tags i.e # and .
However with no success. Im sure it is relatively straight forward but I cannot get my little head around it.
Any help would be superb, Happy new year all!
Thank you
This is the .tpl code in question, as you can see the class names are simple.
wsite-com-product-price
wsite-com-price
wsite-come-catergory-product-price
<div class="wsite-com-product-price {{price_class}}">
<div class="wsite-com-price {{!
}}{{^is_featured}}wsite-com-category-product-price{{/is_featured}} {{!
}}{{#is_featured}}wsite-com-category-product-featured-price{{/is_featured}}">
{{{price_html}}}
</div>
The CSS relating is this: the first line is my attempt at making this work:
.wsite-com-price .wsite-com-product-price .wsite-com-category-product-price {
text-align: center;
}
I simply would just like to align the price to center:
The following is the HTML from view source on the page, (how i found the class names, but they are in .tpl file not the css!)
<div class="wsite-com-category-product-name wsite-com-link-text">
Merola Choker 1
</div>
</a>
<div class="wsite-com-product-price ">
<div class="wsite-com-price wsite-com-category-product-price ">
£125.00 - £165.00
</div>
<div class="wsite-com-sale-price wsite-com-category-product-price ">
£125.00 - £165.00
</div>
</div>
</div>
</div>
<div class="wsite-com-category-product wsite-com-column " data-id="5">
<div class="wsite-com-category-product-wrap ">
THANK YOU SO MUCH FOR ANYONE INTERESTED!
CORRECT ANSWERS SCREENSHOTS BELOW>>> THANKS!!!!
Try to use:
.wsite-com-category-product-price {text-align: center;}
As combinations of other classes might not always work.
Or:
.wsite-com-price, .wsite-com-product-price, .wsite-com-category-product-price {text-align: center}
To cover all price related classes.
.wsite-com-price .wsite-com-product-price .wsite-com-category-product-price {
text-align: center;
}
Here .wsite-com-price is expected to be parent class, which is not there in your tpl. (or did i missout).
.wsite-com-product-price, .wsite-com-category-product-price {
text-align: center;
}
Try this if, this works, they you missed the parent class.
Here is my setup:
File Relationships
home.php <---styles---- _layout.scss
|
imports
|
v
animation.html <---styles---- _animation.scss
home.php - the file used to outline the "layout" HTML for the homepage:
<div id="animation">
<div class="site-container">
<div class="animation-container">
<?php include 'animation.html'; ?>
</div>
</div>
</div>
_layout.scss - the files used to style the non-imported contents of home.php:
#animation {
//styles <div id="animation">
}
.site-container {margin: 0 auto; max-width: 980px;}
.animation-container {
//styles <div class="animation-container">
}
animation.html - contains the html for the "module" called "animation" imported above
<div class="animation-wrap">
<div class="example-selector"></div>
//more html for animation module
</div>
_animation.scss - styles the html in animation.html
Question:
How should I be encapsulating the selectors in _animation.scss?
Possibilities
1.) I could nest all selectors in _animation.scss like so:
.animation-wrap {
.example-selector {
}
//all other selectors are nested here using SASS, thus they will not affect
//elements outside of the animation-wrap
}
2.) I could namespace almost all selectors in _animation.scss by adding the prefix "animation-" (and in the corresponding html)
.animation-wrap {}
.animation-example-selector {}
3.) Could use child selectors to reduce cascading, but I doubt that's best and it has poor IE support
4.) Subclassing? But, I think that is more relevant to moving the module elsewhere, not encapsulating it to make sure it doesnt leak into other module/layout code
Sorry for the long-winded question, it was awkward to put into words. Any additional advise or knowledge of best practice is greatly appreciated
Sorry for the poor question. This is a better worded question for a similar problem.
I decided to use SASS 3.3's brand new '&' flexibility to namespace the selectors in _animation.scss like so
.module-animation {
&-animation-wrap {
}
}
This keeps the html clean, encapsulates the module, and doesn't clutter the css with long prefixes.
Okay, bear with me because I'm new to WEB development.
I have an MVC 4.0 Web API application using Razor and Entity Framework 5 (C#).
One of my links takes me to a page which displays data from the EF.
I added an HTML button to this page called "Export to Excel."
I want to center this button on the screen, above the report results.
What is the correct approach for this and how do I do it? I need to understand the PROPER architecture for files and code.
Do I use CSS? If so, where do I store the file in the solution? How do I use it on my page?
Do I do something specific to Razor?
Should I simply use HTML tags like
Again, all I want to do is center a button on the web page.
Can someone help me with a step by step process to do this correctly?
I'm just having a hard time figuring out where to put code and files (basically how to structure the application properly).
You can use CSS.
.centerAlign {
text-align: center;
}
In your view you can then apply the centerAlign class to the button:
<button class='centerAlign' />
You can also make a custom HTML Helper that will automatically apply the class for you.
namespace YourApplication.Helpers
{
public static class ButtonExtensions
{
public static string ButtonCenter(this HtmlHelper helper, string value)
{
return String.Format("<button class='centerAlign'> {0} </button>", value);
}
}
}
Then in your view you could do:
#Html.ButtonCenter("Click me");
I know there is an answer, but this is a really common way to center objects margin: 0 auto. Since the answer by itself doesn't really explain, I'll provide some detail.
When you build your View it is marked as a .cshtml file. Your View will contain a series of HTML or Hyper Text Markup Language. What you are doing is utilizing a particular Element called a div. These are used to help build a structure or layout for your site.
<div id="Origin">
<div class="origin-container">
<div class="header-style">
<div id="Origin-Header">
<div class="header-container">
// Inside Header Elements
</div>
</div>
</div>
</div>
</div>
So essentially this is a Site Structure. You'll notice that I have a tendency to inner-wrap a lot of my Elements. That is because it makes it easier to customize and style my layout, making it more customizable.
If your thinking "How is it more customizable?" Your partially correct, this HTML is simply a structure- The customization will come from your Stylesheet, Cascading Stylesheet to be exact.
Your HTML will call this Stylesheet to help adapt your layout to give a consistent appearance. So if you'd like to center your header you would put in your stylesheet:
#Origin-Header {
margin: 0 auto;
}
What the command is stating is three things:
Margin: These are the page margins.
0: Is the pixel difference for Top and Bottom.
Auto: The left and right pixels.
So rather then a top, bottom, left, and right they are all merged together in the short-hand. You'll have a lot of additional control to your layout as well through your stylesheet. Bare in mind that this is manipulating those div tags. If your trying to align a particular object, it would work identical but rather then focus on the element- You would point it to your html object.
But I hope that helps.
I do not know if it is good practice, but the only way I have been able to center entire controls like a button in HTML was to do something like
.btn{
margin-left:auto;
margin-right:auto;
}
I have been able to center the control by setting the button's class to "btn" and using the above css. The text-align property has never really worked for me in HTML.
Try this:
[i guess is this what you are looking for]
check LIVE DEMO on jsfiddle
HTML
<section class="iHaveBorder">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmRed">
your report here...
</div>
<center>
<button>DoIt</button>
</center>
</section>
<h1>::::::OR:::::</h1>
<section class="iHaveBorder">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmBlue">your report here...</div>
<div style="text-align: center;" >
<button>DoIt</button>
</div>
</section>
<h1>::::::OR relative:::::</h1>
<section class="iHaveBorder iFeetIn">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmGreen">your report here...</div>
<div class="iWant2BeCenter">
<button>DoIt</button>
</div>
</section>
CSS:
.myWorderfullDiv{
height: 80px; width: 200px;
}
.iAmBlue{background-color: blue}
.iAmRed{background-color: red}
.iAmGreen{background-color: green}
.iHaveBorder{border:2px black solid;}
.iFeetIn{display: inline-block;}
.iWant2BeCenter{text-align: center;}
check LIVE DEMO on jsfiddle
is there any efficient way to scan the id & class name in css file? there are many css file in my web app and now i have to add some more css file. I often get stuck to define the ID & Class name which is already defined in another css file and it causes problem during testing.
I am really tired of keep changing the id & class name. can some one give me any tips to sort it out.
#Edit : suppose there are two css files in a web app old_1.css & old_2.css
old_1.css #id_1 {width:100%;height:100%; .... }
#id_2 { width:50%; height:50%; .... }
old_2.css #id_3 {width:70%;height:70%; .... }
#id_4 { width:30%; height:30%; .... }
Now i am creating a new css file new_1.css and by mistake i wrote the simmilar id of old css file. this is where i get stuck and i want to avoid to rewrite the same ID.
new_1.css #id_1 {width:80%;height:80%; .... } // this id is already declared in old css file
Rather than ensuring each CSS class name is unique, ensure that the CSS styles cannot clash by including parent elements in your CSS. This is better for structure:
HTML:
<div class="section1">
<div class="inner_div">
</div>
</div>
<div class="section2">
<div class="inner_div">
</div>
</div>
CSS:
.section1 {
}
.section1 .inner_div {
color:red;
}
.section2 {
}
.section2 .inner_div {
color:blue;
}
This will ensure that only div's with inner_div class will be given the style color:red where they are contained in a div with the class section1. Likewise, only div's with inner_div will be styled color:blue where they are contained in a div with the class section2.
Using this format should prevent you from ever having duplicate class names as you can define as far as you like, for example if I was applying a style to a span tag displaying the date for a news article I'd use:
.main_container .news .article .details span.date {}
This is a lot easier to read, and a lot less likely to be duplicated than:
.news_article_date {}
Otherwise, like #Ant has stated, use a good HTML editor software and do a Find on the classes and IDs used.
If refactoring the old CSS files are beyond the current scope of your work, you can simply override the old styles by making your selectors more specific. A good tutorial on CSS specificity is given here