I am starting with Materialize and I wonder how to know every element we can set a class attribute for example?
<div class = " A LOT OF ELEMENTS ">
On their website, they just provide a few examples and we do not have the scope of all the possibilities.
Also, I found this website but they only provide information about what is possible without detailing how to do it... And it is frustrating!
For example, I have two cards and would like to reduce the space between them, I cannot find the information anywhere.
Thank you,
Olivia
If you want to see absolutely all the options you must see the definition of the classes in the file materialize.css. If you want to reduce the space between some element you must use the box model (CSS).
Related
I am trying to set the position of a font awesome icon in an input field at run time. To do this I had hoped to have the style compute at run time as I've done with other style sheet elements. However, I am banging my head up against the wall with this one. I did not include a jfiddle because my problem is trying to make the element dynamic and I don't believe I can do that in a fiddle.
This code works. The dollar sign appears at the right side of the input box:
<div class="col-md-6 form-control-static">
<div class="input-icon right">
<i class="fa fa-dollar"></i>
<input>
Notice that I used "right" to get the icon on the right. What I want to do is replace this element with a generic element and set that value dynamically in computed css.
So what I really want to say is this:
<div class="input-icon currencyPlacement">
And then in the computed style sheet somehow resolve "currencyPlacement" to be "left" or "right" based on conditions that I will compute.
<style>
.currencyPlacement { ????? }
</style>
I realize that I could set this using javascript and I could also have this compute at the field level. I thought there might be a better way to effectively alias the element. Sorry for the long-winded description and thank you very much in advance.
You said that you generate the whole thing by code. So presumeably your code "knows" the currency and its placement. It seems much more straightforward to me to use your initial approach. Or perhaps instead of "right" or "currencyPlacement" assign a style that corresponds to the currency, like
.currUSD, .currEUR, .currATS { css to place it right }
.currXYZ { css to place it left }
And in case you set the currency on the same page, there will be no way around some JS to assign the proper class to that input-field.
Update: wrt to your comment: since you insert a FA-Tag related to USD, I assume you know what the currency will be when you build the page. So if you have that knowledge, can't you then make sure the controls appear in the appropriate order, as in this example? I think that would make it much easier - otherwise I would only know how to do with JS, but I see no solution with CSS alone, I'm afraid.
I'm working on integrating the Gridiculous grid with the Genesis Framework. Genesis already has some nice responsiveness built in, but I'd like to be able to quickly adjust my layout and get the nice fluidity that Gridiculous offers.
To do that, I'd like to be able to add custom classes to the major layout elements such as content, and sidebar. So, I'd like to be able to add a CSS class of .c3, .c8 etc to specific HTML elements. I need to be able to take
<div class="primary-sidebar">
and make it so that it's
<div class="primary-sidebar c3">
Am I barking up the wrong tree here? What path would be best to take to add specific classes like this to different elements? Body classes and post classes won't really work for this.
If I understand your question, I think you're definitely on the right track. You will have to write those multiple classes, of course, on your own so that the applied properties can take place. I would say start with whatever the Gridiculous supplies you in the CSS, and then add any additional styling in your own stylesheet.
In short, you would have to include the primary-sidebar c3 class in some stylesheet, but you can just copy the primary-sidebar properties given, and add your own customization to them. Hope that helps!
I understand the concept of one id in an html page. As a noob, i was just wondering if you can use the same id once for different html pages. Will that be consider sloppy?
For instance, <div id="1"></div> (used only once)in index.html and used <div id="1"></div> again in product.html. Is that consider bad?
I tried to do a search but found no answers.
Thank you!
!edit! Thank you for the answer guys. Appreciated!
An id should only be used once on a single document. It is used for elements that only should appear once on the page anyway (think of a "top navigation bar"). Classes are used for elements that can appear more than once (think of a "particularly styled table", a "repeatable block of information" or things that share particular charasteristics such as "on this browser width this block spans 6 columns" in for example bootstrap). It is perfectly normal to use the same id on different pages. Usually you'll make a skeleton/template for your layout, where each element will be styled the same on each page that uses this template. It is then helpful to have the same id for the same element across different pages. (or: It would be considered sloppy to change the layout of the page on every page, using different id's for each element, as it would be hard or impossible to maintain your pages.)
It's fine to do that, but you would want to name your ids something better than "1". Something more descriptive, like <div id="main-part"></div> would be better.
I see this being done on websites (ex: http://www.abookapart.com/):
.left {
float: left;
}
<div class="col two left" />
Is the above good practice? I thought it was generally frowned upon to create classes that describe style. If I wanted the above div to float right at a later date I would have to go into the markup and change left to right. No better then adding a style attribute to the element it would seem.
You're right. Most developers avoid class names like "left" or "blue" for that exact reason. Other than the class name, I don't see anything wrong. I would include that float in the "col" class and then just override it with "right" later on if need be.
I've seen it become useful where multiple people are editors for a single website, and you don't give them all full html access.
By setting up classes of styles that they're allowed to use, you can allow them a certain amount of style control without giving them the power to mess everything up.
It's really down to personal/team choice.
I've always preferred this technique as I favor convention over style, I like my concerns separated and I dislike ambiguity.
if I see a div like this:
<div class="clearfix left bordered">
...
</div>
I like the fact that its intent is clearly emphasized and won't make me have to dive into the CSS file to find out what it means.
But based on your example above, if you did go down the more declarative route:
<div class="importantTextDiv">
...
</div>
On the one hand, you have to investigate the CSS file to determine its properties (or run it and inspect the element in your Firebug equivalent) but should you choose to change it, you don't need to make a source change, or change whats emitted from your server side language.
To me, both situations are a pain, but in my experience, changing a div between float:left and float:right is the kind of thing you'd have got finalised before a final deployment anyway.
My answer ? there's no technical reason to prefer one path over another, choose which one feels more comfortable!
I generally use a manual process:
Look at the page, figure out the semantic elements, and build the HTML
Slice up the images I think I'll need
Start writing CSS
Tweak and repeat different steps as necessary
Got a better approach, or a tool?
I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:
The page title is a top level heading
Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.
The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.
Section headers are h2, sections within those sections are h3s etc. Stack them up.
Use blockquotes and quotes where possible. Don't just surround it with ".
Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.
<label> your form elements.
Use <acronym>s and <abbr>s where possible, but only in the first instance.
The easiest: always, always give your images some alternate text.
There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.
That's just a few pointers, I'm sure I could think of more.
Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).
Well, when I build a website I tend to try and forget about the design completely while writing the HTML. I do this so I won't end up with any design-specific markup and so I can focus on the semantic meaning of the elements.
Some pointers how to markup things:
menu - use the UL (unordered list) element, since that's exactly what a menu is. an unordered list of choices. example:
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
</ul>
if you'd like an horizontal menu you could do this:
#menu li {
display: block;
float: left;
}
Logo - use a H1 (heading) element for the logo instead of an image.Example:
<div id="header">
<h1>My website</h1>
</div>
And the CSS (same technique can be applied to the menu above if you would like a menu with graphical items):
#header h1 {
display: block;
text-indent: -9999em;
width: 200px;
height: 100px;
background: transparent url(images/logo.png) no-repeat;
}
IDs and classes - use IDs to identify elements that you only have one instance of. Use class for identifying elements that you got several instances of.
Use a textual browser (for instance, lynx). If it makes sense to navigate in this way, you've done good when it comes to accessibility.
I hope this helps :)
I essentially do the same thing Jon does, but here are a few other ideas:
Use Guides in Photoshop (and lock to them). Figure out all of your dimensions for each box/ region ahead of time.
Collect all of your dimensions and color hex values into an info file (I use a txt file) that you can easily reference. This will reduce your alt-tab tax and selecting colors in Photoshop multiple times.
After all my Guides are in place, I slice out the entire website into my images folder, starting with photos and grouped elements, and ending with the various background tiles/images, should they exist. (Tip: Use ctrl-click on the layer preview to select that layer's content).
Notes on using Photoshop:
Use Guides or the Grid.
Use the Notes feature for any pertinent information
Always use Layer Groups for similar elements. We need to be able to turn entire regions off in one click. Put all 'header' content in one Layer Group.
Always name your layers.
You can put each page template in one PSD file and use nested Layer Groups to organize them. This way we don't have to setup all of our guides and notes for each page template on a site.
No shortcuts :) but everybody works slightly differently.
This tutorial that popped up in my feedreader yesterday shows the process from start to finish and might help people who have never done it before but as you are an old hand it's just about streamlining your own methods.
EDIT:
The listapart link certainly is more automated for 'flat' designs where both imageready and fireworks have had pretty good support from day one and it's got better and more semantic with every release but if you have a more complex design it's the twiddly bits that make the design what it is and these have to be done by hand.
I just thought it was worth pointing out that in addition to the excellent advice you've had so far I'd recommend getting a printed version of the design, using a red pen to mark up all the block elements on the design you think you can spot and sitting down with the designer for half an hour and talking through how they envisioned their design working for the use cases that don't fit the static design.
What happens when more text is put in the navigation?
Is this width fixed or fluid?
Is this content pane to the right fixed height or fluid? If it's fluid why did you put a background on it that can't be repeated?
You have a border extending down the page that breaks two otherwise connected elements. Visually it makes sense, but semantically I not can't just use an li to house both those elements. What do you think is more important?
It'll also help you spot potential problems that you might otherwise not have realised were going to be issues until your elbow deep in css.
Not only does it make your job easier after a few times doing it your designer will get a much stronger sense of what is involved in marking up their work - some designers have real trouble comprehending why something they think looks visually very simple will take a few days of css tweaking to make work.
Some of the designers i know, usually uses Illustrator to make the design elements.
This page shows how to do it a little more automated.
Also, get to know the "Layer Comps" feature. I use this for changing button states.
Create layer comps for normal, hover, and active.
In each of these, set up the effects/color overlays and visible layers which belong with that state.
Save for web: go to a different folder for each state, unless it's easier to rename each slice (otherwise your hover button slices will overwrite your regular slices).