I have a bit of an unusual question, but I'm stuck and thought someone here may know. I basically want to create a membership overview/comparison as included and was wondering how one would build it most efficiently/best, especialyl the part highlighted in red.
Would you tackle it with CSS and build each single element? Or would you rather do it in photoshop and include such pictures via code e.g. as background image?
Given that it's still code related (i.e. is it possible / efficient to build this with CSS), I hope the question is valid and someone could shed some light onto this! (I dont expect any code solution at all, just would like to understand if CSS/SVG coding is the most efficient way).
Thanks a lot for any help!!
You could create a single SVG element and just reuse it across the three different columns, changing the fill (orange/gray/blue).
The best you can do is to use bootstrap to reach this:
<div class="container">
<div class="col-sm-3">
<!-- Column one, detail list -->
</div>
<div class="col-sm-3">
<!-- Column two, first membership option -->
</div>
<div class="col-sm-3">
<!-- Column third, second membership option -->
</div>
<div class="col-sm-3">
<!-- Column four, third membership option -->
</div>
</div>
you'll get a responsive well designed behaviour:
https://jsfiddle.net/zzhs5w6n/2/
The part that you marked in red are only images.
You can find some for free googling a bit, or you can design yourself using photoshop, illustrator, or even gimp or microsoft paint if you want.
Then, in the example, you must add responsiveness to this images, check the next complete fiddle:
https://jsfiddle.net/zzhs5w6n/10/
Then, you can add more bootstrap css or your main css to adapt it to whatever you want/need.
Hope it helps
Related
I've downloaded a ready-made HTML5 website template from w3layouts.com that is under CC3.0 license. Because the used scripts like Bootstrap etc. are all old version I'm updating these and the source code to function. But I'm on a issue that I can't get resolved. I'm new in Bootstrap and it's my first time I'm working with it. I'm tired of coding my own designs. :)
The original/old template is using Bootstrap v3.3.4 and I using now 4.0.0-beta.
As you could see here in the original the "My Services" section is all in shape. But in my updated version the columns wont wrap. I've already tried a lot of things and Googled a lot but found no solution.
Here are the source codes:
HTML: https:// pastebin.com/NJYmqAk2
CSS: https:// pastebin.com/AdYUTtFe
(Sorry I had to modify the pastebin links 'cuz I'm not high reputated atm. :))
It seems that the version of Bootstrap you're using, is not dividing the columns width in %, and also they are not floating left.
In your HTML, there's a big problem with the row wrapped around each column.
<div class="row"> <!-- This wraps the column and defeats its purpose -->
<div class="col-xs-4 wthree_about_right_grid_left">
<div class="hvr-rectangle-in">
<i class="glyphicon glyphicon-pencil"></i>
</div>
</div>
</div>
Start by deleting the row, and then you're going to want to make the colums float left and determine it's width in %.
Like this:
By doing so, you can get it to act like on your template, and ultimately solve your initial problem.
You would benefit far more from using the version of bootstrap that is compatible with your template.
I'm looking to do something where the layout caps out around 1000px (1080 / 1170 / whatever), and center the main content, sort of like the stackoverflow design (as an example, this is a super common thing). Is there a supported way to do this in clarity, or should I hack around with the menu / sidenav, etc to accomplish it?
This happens to be an open issue/request on our end that we will be looking to incorporate. In the meantime, the best thing is writing custom CSS to manage your needs for this case. You might want comment there about your specific needs so that they are heard.
Hope this helps.
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10"></div>
<div class="col-xs-1"></div>
</div>
Use the rows, to mimic columns.
I have a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap. Is it even possible to transform Bootstrap into 15 cols layout? I havent seen such an example online. I'm not a huge fan of Bootstrap for small projects. It is a trend I honestly don't understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not.
But, this is it.
If it would be possible to code a 15 cols layout, could you give me a hint on how to begin? And how long would it take to perform such an adaptation?
You can customize and download your own Bootstrap components by going to:
http://getbootstrap.com/customize/
and navigating down towards the "grid-columns"
Set your preferred number of columns and scroll to the bottom to click "Compile and Download".
I would generally recommend going with an even number of columns over odd however for easier math.
If you can run a customized version of Bootstrap, xengravity's answer is the way to go.
However, if you're using vanilla bootstrap (perhaps from a CDN or legacy code) you could create the desired effect with a little CSS tweaking and some nested rows/columns.
Start with a 3 column layout of col-xs-4, then fill those with a row and 5 col-xs-* (I chose 3 as it was close) and tweak the width with some CSS. For example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-3 fixed">1</div>
<div class="col-xs-3 fixed">2</div>
<div class="col-xs-3 fixed">3</div>
<div class="col-xs-3 fixed">4</div>
<div class="col-xs-3 fixed">5</div>
</div>
</div>
. . .
</div>
</div>
and the CSS:
.col-xs-3.fixed {
width:20%;
}
For an interactive example, see this fiddle.
A cleaner way to go would be to include the CSS/LESS from the col-xs-3 and just make a fixed-col or similar class.
Update
The funkiness with the columns wrapping/spacing as mentioned in the comments is due to the columns' default padding making it too large for the row and wrapping. As seen in this updated fiddle removing the padding for the .fixed columns fixes it. This may not be desirable, and as such tweaks will need to be made for your specific application.
Since I couldn't find anything on yui3 documentation, I kindly ask your opinion on below. What is the best practice and why?
<div class="yui3-u-1-3" id="logo">
... content
</div>
or
<div class="yui3-u-1-3">
<div id="logo">
..... content
</div>
</div>
Regards,
Castle
I consider best practice to use ID's on the purely layout specific HTML.
eg.
#outer-container
#wrapper
#sidebar
Having said that if there is any chance, even a remote one that you may have multiple instances of these in your page, then play safe and use classes.
There are some performance benefits (although it's almost negligible now, with faster browser rendering engines and speeds):
ID selectors are slightly faster in your CSS
ID selectors are more efficient as hooks using JS
Read this great section from Jonathan Snook's SMACSS e-book: https://smacss.com/book/type-layout
I would rather use CLASS over ID until something explicit, have been using yui3 grid since last 2 years for now. so far going great..
<div class="yui3-u-1-3 logo">
content
</div>
or
<div class="yui3-u-1-3">
<h5 class="logo">logo goes here</h5>
</div>
This is NOT a question about how to create columns in css - so please dont give me any css for doing that. I've just excluded it here for readability.
I have created two columns in css and I want to place items in them based upon some css class. I think this is possible but I'm not sure how.
<DIV id="col1">
<!-- I want to display everything with 'women' here -->
</DIV>
<DIV id="col2">
<!-- I want to display everything with 'men' here -->
</DIV>
<!-- this content is dynamically generated in a loop (PHP/ASP.NET)-->
<DIV id="products">
<DIV class="women">
Women's product 1
</DIV>
<DIV class="men">
Men's product 1
</DIV>
<DIV class="men">
Men's product 2
</DIV>
</DIV>
Edit: Just to be sure I don't want to duplicate the product list into col1 and col2. i want to move them. I only want once visible copy of each item.
So I have two columns - or areas on the page - whatever - doesn't matter for this.
I want to use css to take everything under .products.women and put it in column 1.
I want to use css to take everything under .products.men and put it in column 2.
How can I do this. These kinds of things are about my limit to css, but I know theres some cleverness I can use.
Currently I'm rendering into the columns in two separate for loops. I want to get away from this for two reasons :
I dont want to maintain 2 identical for loops - nor move that logic elsewhere
I want to make an 'iphone' friendly version and i figure this will make that easier.
You can't do precisely what you're asking for with CSS. But you can do .women { float: left } .men { float: right}, which may be just about as good.
This is kind of a band-aid on your fundamental problem, though, which is failure to separate your presentation logic from your control logic. Instead of having two identical for loops in your presentation logic, you should have one for loop outside of it that builds two arrays, then your presentation logic should use each the way that would actually be beneficial to it.
CSS it's a language used to describe the presentation of the (existing) content. You are
asking for programaticaly DUPLICATE or COPY some of that content.
You can either use ASP/PHP whatever languaje of choice to generate multiple copies of that content, or use javascript to copy-move-change it.
Actually javascript seems to fit your scenario.
EDIT: you have a similar previous question here: using css to duplicate html elements
Interestingly (but, at this point, completely uselessly), this is not only possible in the current draft of the CSS3 Advanced Layout Module (aka Template Layout), but the spec contains an example showing how to do exactly that (last example in section 3.4). So if you can stand to wait a fifteen years or so...