Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like to create a text like that:
My question is, how can I create it using CSS?
The closest solution I've found was unicode with circles:
①②③
Start by simply creating something like the HTML and CSS below:
HTML
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
CSS
li {
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
border: solid 1px #888;
line-height: 25px;
}
li a {
display: block;
}
See example here
To add the numbers with CSS before/after selectors-See this example.
In my opinion using a span is better than using a custom font because of two reasons
Support across all browsers - Many browsers don't support custom font
It is one extra resource download (font file) for the browser so it will affect performance and contribute to the overall page load time.
Of course you can always style each letter differently by assigning classes individually and applying some specificity but that could be more work than it's worth and very hard to maintain. I would recommend lettering.js and you can find it in Github for free download.
here are some links to get you started.
Ahandling Web Typograhy
Lettering.js
lettering.js download on GitHub
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I did some research and couldn't definitively find the answer to whether its best practice to use a class selector or tag selector for a nested element. Say I have the HTML:
<ul>
<li class="list-item-content" >
<img src="/images/flags/fr.png" class="country-flag">
</li>
</ul>
I could write :
.list-item-content img{
vertical-align: middle;
}
Or
.list-item-content .country-flag{
vertical-align: middle;
}
Which is best practice? Since the browser matches rules right to left, I would assume the second way is better as with the first way the browser with first match ALL images, then check the parents....
For more specific css you have to use both like following :-
.list-item-content img.country-flag{
vertical-align: middle;
}
It will define more clear nesting structure.
Personally, I think using two classes in the rule like $('.class1 .class2') matches more efficiently and is better practice. And maybe rarely need 3 classes.
In case you are very sure a class is unique, then $('.class1') maybe enough.
It depends of the complexity of your project and preference of your team.
In term of performance, selecting nesting items with something like this
.list-item-content .country-flag{}
which translage to
select .country-flag elements descendant of .list-item-content element
could have a performance penalty on large project (DOM) or in device with limited capabilities (like smart tvs or old mobile devices).
In order to mitigate this risk you can try to use a name convention which will help you to prevent selecting nesting element in an expensive way.
One of the methodology is called BEM.
Briefly the convention is as follow:
.block represents the higher level of an abstraction or component.
.block__element represents a descendent of .block that helps form .block as a whole.
.block--modifier represents a different state or version of .block.
So you HTML could be rewritten like this:
<div class="componenet">
<ul>
<li class="componenet__list" >
<img src="/images/flags/fr.png" class="componenet__list-flag">
</li>
</ul>
</div>
in this case you can select directing your class
.componenet__list-flag {}
More info here:
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
Most of the time you will not trying to match all img therefore 2nd convention is prefered
.list-item-content .country-flag{
vertical-align: middle;
}
This is another good practice by Harsh Sanghani as well.
.list-item-content img.country-flag{
vertical-align: middle;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Let's say for example I am using some sort of frontend framework to design a website such as Foundation or Bootstrap.
I want to customize certain parts of the design in order to give it a unique feel, one that is different from the regular frontend look of it. What I have been doing is including the CSS for the framework then right after include another CSS, in which I write custom styles for the same classes that are used within the framework so they look like my unique look.
Is this the best way to go about customizing some sort of frontend framework like this, and if not, what would the cons be? Or is there a better way?
I realize one more request for a style page but other than that I can really only think that the browser might need to do a little more work when rendering the page. I do this so I don't have to go in and find every single element and class that I want changed within the framework's CSS.
I would never modify the original framework. Good practice is to include the modified classes in a separate style sheet as you have mentioned.
The advantages is you have never modified the original which could introduce bugs and to convert back to the default frameworks style will be as easy as removing your added styles.
If you can, I would modify the original css to your own design. This way your not making the user download one css file that just over rights the other css file. Also, I think it would make debugging easier as you only have to look in one file rather than two.
That is the best way also you could also add classes of your own and style them if you don't want to override the css framwork classes
I've been doing this with some elements in Bootstrap by adding !important tags in my main style.css file. There's no downside to doing this that I'm aware of.
.result-header .nav, .result-header .nav-bar {
position: absolute !important;
bottom: 4px !important;
margin: 0px !important;
}
.result-header .nav a, .result-header .nav-bar a {
padding: 1px 8px !important;
font-size: 14px !important;
border-radius: 4px !important;
}
Not every css element will need the !important, but it doesn't hurt to add it for each one. Just make sure you hierarchy your css (.result-header .nav-bar) if you only want to change the styling for a certain section.
If you're planning on changing the core foundation of the themes style (.nav-bar), you could edit the original file (making sure to backup anything you change), but I'd probably be best to create a whole separate stylesheet with only the theme changes and include it after the theme's original CSS:
.nav, .nav-bar {
position: absolute;
margin: 0px;
}
.nav a, .nav-bar a {
padding: 1px 8px;
border-radius: 4px;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
In the code below, we have for the section class="body" and a different class for each of ol, li. h2 , footer and div. What is the use of mentioning class="body" in the section when we don't apply it anywhere? In case we give a css for the "body", how will it be reflected in the code?
http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
If you read the article that you posted a link to... you should find the following...
LIMITING OUR BLOCKS
Some of you might have noticed how I added the class="body" attribute to the major sections of the layout in the markup. This is because we want the body of my website to be for a certain width (800px), and I've never been a fan of the big wrapping <div> to do that. So we'll use the basic block centering technique using margins for this. I'm also adding a couple of generic classes to this section that might be used for a post side content.
Layout
.body {clear: both; margin: 0 auto; width: 800px;}
img.right >figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; >margin: 0 0 2em 2em;}
...end quote...
In general terms, if you don't reference a class name in css or JavaScript then there is not much of a purpose in including it in your html.
If you add a css rule like the following:
.body {*css rules*}
...then wherever you have class="body" those rules will be applied to it.
Hope that helps
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Starting points:
Using bootstrap-sass (compass)
have the following html-markup (can't change it)
<div class="some">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
Is possible style the above (using the sass-bootstrap) as navbar without the "brand-logo" and without changing the html - e.g. semantically?
If you want only style, just use the wanted styles like:
.some {
#extend .navbar;
#extend .navbar-inverse;
}
.some {
ul {
#extend .nav;
#extend .navbar-nav;
#extend .navbar-right;
> li a.active {
&,
&:hover,
&:focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
}
}
E.g. the above will style your div/ul to get an right aligned inverse navbar - all styling is like in the bootstrap.
I not tested the javascript - it will probably fail, because it will search for the navbar - but the above for the simple styling works.
For the li > a.active part: i just copied it directly from the bootstrap-sass, it is needed because the bootstrap uses the active for the li element and not for the a element, so you need exactly style the a.active.
Also, it didn't collapses into the button, but only changes its layout to vertical list.
The "brand" will be automatically excluded, because it isn't in the markup.
I think we would need to see more of the code but if memory serves you are using the standard Twitter Bootstrap menu. If so you 'could' style this using the class and display none the Brand-logo that is in the code. If you can remove the brand logo from the HTML it would be easier