So I am using the Evil Icons in my Front End web development.
Although they have their preset size, I would want to use custom.
However, after reading the site documentation on styling I still do not understand how to change it :(
Can anyone help me with that?
I observed their css for m, l, s classes. and this is what i found.
.icon--l {
width: 100px;
height: 100px;
}
As per my understanding you can create your custom class and apply it to icon. see below code
.icon--custom-size {
width: 200px;
height: 200px;
}
Just change the height width and create new custom class.
Create a custom size
.icon--sm {
width: 30px;
height: 30px;
}
Use the custom size by setting the data size property in your custom size.
<span class='c-social-nav__icon__content' data-icon='ei-sc-github' data-size='sm'></span>
Related
I am looking for an advice. I have to draw a wind turbine generator. I'm guessing its possible with html, css or canvas but maybe it would take ages.
I have in mind to do it with just images, have the main image for the generator and then have other images over the main one. I think it's the easiest solution to achieve it.
It has to have responsive as well.
The small pieces change the color depending on the data. So I am thinking to replace the images depending on it.
Any recommendation?.
Thanks in advance.
You could skin this cat in several ways, but if you're sure that these are all the components you need (and you won't need to keep expanding it), I agree that canvas is overkill.
Probably all you need is some markup like this:
<div id="turbine">
<div id="injector"></div>
<div id="motor"></div>
<div id="block"></div>
<div id="battery"></div>
</div>
And some CSS that looks something like this:
#turbine {
background: url("turbine-main.png");
position: relative;
}
#injector {
background: url("injector-green.png");
position: absolute;
left: 160px;
top: 130px;
width: 40px;
height: 30px;
}
#injector.failing {
background: url("injector-red.png");
}
#motor {
background: url("motor-green.png");
position: absolute;
left: 220px;
top: 140px;
}
#motor.failing {
background: url("motor-red.png");
}
Rinse and repeat for each part (adjusting image names, coordinates, and size as necessary, so that your pieces fit nicely over the main image). Add and remove the failing class from your individual pieces to toggle the red/green for each part, probably using javascript. (Or just do it in the HTML, if this is a statically rendered page.)
If you should be able to click these engine parts and jump to additional information, replace my <div>'s with <a>'s.
If I have an exemplary div:
#div {
max-height: 100px;
height: auto
}
vs.
#div {
height: auto;
max-height: 100px;
}
Does it make an difference in an output file?
Order does matter in some cases. For instance, when using vendor-prefixed versions together with W3 compliant properties.
-webkit-transform: ;
transform ;
vs.
transform: ;
-webkit-transform: ;
The browser will use the last property. So always use the W3C compliant property last if it's available!
in your scenario no. But others yes. For example:
.add-margin {
margin: 0;
margin-left: 5px /** element will have 5px on left margin **/
}
vs
.add-margin {
margin-left: 5px;
margin: 0 /** element will have no margins **/
}
as a general rule of thumb, I place all my properties alphabetically unless a special case is needed - this ensures overrides get added correctly (as in case of my first example of code)
As per your scenario properties order not matter.
Most of the developers has no specific plan when it comes to ordering CSS. But I personally suggest a method based on how much impact they have on the selected elements or other elements around them.
Layout Properties (position, float, clear, display)
Box Model Properties (width, height, margin, padding)
Visual Properties (color,background,border,box-shadow)
Typography Properties (font-size,font-family,text-align,text-transform)
Misc Properties (cursor,overflow,z-index)
I came to read this during my research on some css coding standards. You could read more here
No, Properties order does not matter until and unless you are not modifying the same property and you want to switch between the available two or many.
Example:
#div{
color: red;
height: auto;
max-height: 20px;
}
#div{
color: blue;
}
So, in this case, the colour properties are replaced by the last one and the colour will be blue but for the height and max-height the same properties which are assigned in the first place will be reflected and until and unless they are not overwritten.
I'm trying to create an HTML scheduling app that sizes the created tables to fit the the screen while maintaining its same size ratio. It looks fine when I have it fullscreen: . But when I resize the window or someone with a different screen resolution runs it, the positioning of the tables messes up like so: .
I was wondering if there was something I could do in my CSS or JavaScript files that would ensure that the ratio and relative positioning of each table remained the same no matter what screen size or resolution it is ran on. I'll include a JSFiddle for further understanding here:
CSS for Tables and Positioning:
/* To control the style of the overall table class */
table {
border: 0.0625em solid black;
text-align: center;
table-layout: fixed;
}
th, td {
border: 0.0625em solid black;
width: 8.75em;
height: 2.1875em;
}
/* Settings for Days row */
.tableDays {
width: 8.75em;
}
/* Settings for Employee column */
.tableEmployees {
line-height: 2.1875em;
}
/* Settings for Tasks table */
.tableTasks {
width:100%;
margin-top:0.3125em;
empty-cells: show;
height:62.5em;
line-height: 2.1875em;
width: 6.25em;
}
.empTaskCont {
height: 31.25em;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
padding-bottom: 1.875em;
}
#table-wrapper-days {
position: relative;
width: 66.5em;
margin-left: 15.8125em;
/*float:right;*/
}
#table-scroll-days {
height: auto;
overflow-x: hidden;
}
#table-wrapper-employees {
position: relative;
float:left;
width:18%;
margin-top:0.5em;
}
#table-scroll-employees {
width: auto;
overflow-y: hidden;
max-height: 31.25em;
}
#table-wrapper-tasks {
position: relative;
width:81%;
float:right;
}
#table-scroll-tasks {
overflow-x: scroll;
overflow-y: scroll;
max-height: 32.625em;
}
.employee-mod-btn{
float:left;
}
JSFiddle: https://jsfiddle.net/hs5sz8kb/#&togetherjs=x3LUnVhmMp
I'm still very new to HTML, CSS, and JavaScript so any additional advice on my code is greatly appreciated. Thank you for your time!
Reviewing the content of your fiddle, the issue is less related to CSS, and more related to your HTML layout. The first problem is that you are building multiple tables when they should just be 1 table. Your top "row" should be part of the table with all the content, instead of a separate table. Your left column is also a separate table. Combine them all into 1 table and that will help a lot.
I hate to redirect your efforts toward a total rewrite because you are learning HTML and CSS, but you may find that a very effective way to implement "responsive" design is with a helper library. I would suggest considering the use of Bootstrap, although there are many others. Bootstrap adds a lot of "helper classes" that will take some of the effort of achieving what you are trying to achieve out of the equation. Consider tables for example, what I think you might be looking for is "breakpoint specific" tables.
https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific
Another option is to have always responsive tables, where as the screen resizes you will get a horizontal scrolling frame.
There are a lot of options to choose from, so try it out. You can easily add the Bootstrap library to your JS Fiddle in the "resources" section.
Additionally, you might consider storing your data as JSON or in a database. As you progress with this project, you may find Datatables to be a very useful javascript library. It allows you to work with the raw data and build the tables more dynamically.
https://datatables.net/
Instead of using custom css to style your tables which could take some time for it to be looking good at all screen widths, consider using bootstrap which is a responsive framework for html, css etc. It will be worth while you reading about bootstrap as they provide responsive tables that will help you based on the screen size of the monitor or other device. Check out this link that will help you with building the html structure and adding bootstrap to your workflow. All you will have to do is modify the table to suit your needs.
References:
https://getbootstrap.com/
https://getbootstrap.com/docs/4.0/content/tables/
I am using two separate CSS files with media queries to achieve different styles based on the screen size of the viewer. I have the following lines in my desktop css file:
Desktop CSS:
.labelContainer .labelText.labelText_xl {
width: 155px;
}
.labelContainer .labelText.labelText_big {
width: 135px;
}
.labelContainer .labelText.labelText_med {
width: 105px;
}
What I am trying to achieve, that when the Mobile css version kicks in, indifferent of the labelText_size class the labelText should take up all the width it can. If I copy the above three rules, and change the width to 100% in each of them, this works just as intended. But if I try to do the following
.labelContainer .labelText {
width: 100%;
height: 32px;
}
only the height gets changed, and the width stays the same.
I presume this is because the more exact the rule, the higher priority it has, but isn't there a way to tell CSS, that no matter what other classes the DOM element has, apply the desired rule?
Because if I define like 20 different size styles for my labels, I would now have to define the same 20 different size styles in my mobile css too, instead of using a single rule, that overwrites the rest.
EDIT: I know I can achieve the desired result with marking the rule as important, but I would rather not do that, because I don't think that setting something as important is a good practice in css.
You can achieve this by using attribute selectors:
.labelContainer .labelText[class*="labelText_"] {
width: 100%;
height: 32px;
}
You could add any class only for mobile devices on <html> or <body> and use it in your mobile CSS version. For example:
.mobile .labelContainer .labelText {
width: 100%;
height: 32px;
}
Forgive me if I've worded the question wrongly. I'll try to explain my question briefly and accurately. First of all I am using an online website builder for my website called PortfolioBox.
What I am trying to do is clip an image within a container without the image automatically re-sizing itself to fit to the width of the container. The code I used is simple:
HTML:
<div id="imageContainer">
<img src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>
CSS:
#imageContainer {
background-color: #333;
width: 350px;
height: 200px;
border-radius: 5px;
overflow: hidden;
}
The following code should result in something that looks like this:
http://www.kirupa.com/html5/examples/clipping_content.htm
However, if you check the result of the same code on my website you will see that the image being clipped is shrinking to fit the width of the container:
http://roryhammoud.com/test-new
Because I am using a webhost/builder, the pages come prebuilt with CSS code. There must be something in the preloaded CSS that is causing this. I however don't have access to that CSS code.
The Question
So my question is, is there anything that I can do to override this issue?? I do have the ability to add CSS code to pages, so I am hoping I can override it somehow. I would greatly appreciate any help..
Here is the page on JSFIDDLE http://jsfiddle.net/0e5nda2b/ (Please note I cannot remove CSS code, I can only ADD)
Thank you in advance.
You have a CSS rule in your file that sets the max-width to 100%. Remove it.
.textContent object, .textContent embed, .textContent video, .textContent img, .textContent table {
max-width: 100%;
width: auto;
}
If you can't simply remove that rule, create your own that sets the max-width to initial and make your rule more specific, or use !important (not recommended). For example, #imageContainer img {max-width:initial;}
Because you are not able to modify the existing CSS, you must override it.
You need to be more specific with your selectors to target the element in question like so:
#imageContainer img {
max-width: inherit;
}