Zurb Foundation is great, and everything but semantic grid works just fine.
I have zurb-foundation gem installed ( the latest public release );
Copy-paste markup example and Scss Example of semantical grid from Zurb official site to index.html and app.scss and it works incorrectly: page is not responsive on "medium landscape" and lower formats, and when I resize my page - scrollbar is appears.
I found the same question on https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Yjh_9f21foQ and this page - http://szabinho.com/zurb/ is a good illustration what i'm talking about.
Can everyone show me the practical example of semantical grid by Zurb. It is very powerful and cool framework, and one thing stopped me from using - this annoying trouble.
Hope you help me. Thanks!
I had a similar issue, when using Sass and the mixins to compile my semantic grid.
I noticed that .row had a minimum width set to it:
.row {
width: 960px;
max-width: 100%;
min-width: 768px;
margin: 0 auto;
}
So this would mean that all rows would be at least 768px wide. You can override this setting in app.css (or scss is you are using SASS) like this:
.row {
min-width: 0!important;
}
I also noticed that this problem only occured when using SASS mixins like #include outerRow() and innerRow() when I went back to using <div class="row"><div class="twelve columns"> I didn't get this error.
Related
I'm new here and just started learning CSS. This is my first (question)post and maybe the format of my (question)post might not be appropriate.In that case I humbley ask your forgiveness. I'm not very successful in applying/editting css for my site.
I'm trying to center (image)content in the #media only screen and (max-width: 420px)viewport. Searched,found and tried a few solutions for this issue as mentioned in this forum but to no avail. One of the problems is that my wordpress 6.x theme has a load of different style sheets and i have no clue in which order they operate.
This is what i found browsing the style sheets; Beneath each code is the name of the css source file it came from. Can someone please point out which file i should edit and what code i should alter or apply?
If needed i can give access to my site (which is local only atm) or post screenshots!
*source: responsive.min.css :
#media only screen and (max-width:420px){body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,body.boxed.has_general_padding .wrapper .wrapper_inner,body.boxed footer,body.boxed .header_inner,body.boxed .full_width .parallax_content,body.boxed .carousel-inner,body.boxed .content_wrapper{width:320px}.header_bottom,footer .container_inner,nav.content_menu{padding:0 15px}.side_menu .close_side_menu_holder{right:12px}.pp_content{height:250px!important}.pp_hoverContainer{height:200px!important}nav.content_menu .nav_select_menu{border:0}
*source: responsive.css
#media only screen and (max-width: 420px){
body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,
body.boxed.has_general_padding .wrapper .wrapper_inner,
body.boxed footer,
body.boxed .header_inner,
body.boxed .full_width .parallax_content,
body.boxed .carousel-inner,
body.boxed .content_wrapper{
width: 320px;
}
.header_bottom,
footer .container_inner,
nav.content_menu{
padding: 0 15px;
}
.side_menu .close_side_menu_holder{
right: 12px;
}
.pp_content {
height: 250px !important;
}
.pp_hoverContainer{
height: 200px !important;
}
nav.content_menu .nav_select_menu{
border: none;
}
}
The first file (responsive.min.css) is the minified version of the second file (responsive.css), that means that the minified version has no unuseful character like spaces, tabulations...
The minified version of assets like css, js and sometimes directly html page is used to avoid loading unuseful character and to make download faster. So your theme is probably using the minified version.
I really suggest you edit responsive.css and then, thanks to lots of tools you find on the Internet, create the minified version and replace the existing one.
To center the content you have 2 ways:
Setting a fixed width for your content and then setting a margin: auto; property;
Setting the container of your content to display:flex and then setting your content to justify-content: center;
You can check if certain input fields are not filled using the isset() function in PHP: For example:
if (isset($_POST['sku']) {
//exists
}
While to check if the product already exists you have to check if it exists in database so you must necessarily make a query.
Does anyone know what CSS class controls the width of the content area of the _Layout.cshtml and how to modify it (make it wider)?
I know it says
class="container body-content"
but I can't see how to modify it. I read it's better to modify the Site.css to override the bootstrap.css instead of modifying it directly.
Thanks.
I discovered that the default bootstrap.css is using the #media rule so it is doing different things at different resolutions which is why I was having a hard time tracking what was going on. So in my Site.css I override the behavior with my own settings like:
#media (min-width: 1920px) {
.container {
max-width: 1840px;
height: 800px;
}
and now it is the width I want.
Can anyone tell me why in the world Initializr's bootstrap html template has a single style for body in a element in the head of the page? It's right after the bootstrap.css file.
body {
padding-top: 50px;
padding-bottom: 20px;
}
My question is: isn't it a little odd to throw a one-off style directly in the markup and not just include it in the bootstrap.css file? Is there some specific reason anyone knows of as to why it was done this way? CSS belongs in CSS files, no?
Taking a quick look I would assume because it relates to that page specifically.
What if on another page you didn't want the navigation bar? You then have to override the style implemented in the .css file manually to correct the padding. Seeing as it's only one statement, I'd say it's fair to include it at the top of the page rather than putting it in it's own .css file.
Would you really want to obscure a framework .CSS file by including potentially page-specific code (that would muddy the framework)?
Edit: To elaborate - if you have a rigorous structure across dozens of pages, each with consistent style, it would only make sense to centralise this content into a .css file, however from an industry perspective I would more-than-likely still not put it into a framework .css file (think about future implementations, upgrading the framework, versioning etc etc).
I saw this and just about eliminated my Initializr foundation because:
A) The Initializr index.html rendered differently from the same page on getbootstrap.com and I could not figure out why
B) It was not at all obvious why this style was inline inside the <head> section since there was no comment.
Thankfully I did not delete the Initializr files. It turns out getbootstrap.com includes these same styles (but via a very small stylesheet named theme.css). The values are a bit different than the ones you mentioned, but same idea.
The theme I was referencing included this theme.css:
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
.theme-showcase .navbar .container {
width: auto;
}
So, long story short- Initializr did the right thing here by removing the extra include in my opinion... HOWEVER, a <!-- Comment --> explaining what those styles are should be there. There are comments on most sections, yet none for this snippet.
Anyways, I am keeping my beautiful Initializr Bootstrap code base, and figuring out what pages need what values of what snippets lol.
I'm working on a new web app and I'd like to create my GUI mockups in Illustrator then implement them in HTML5 and CSS3 using Twitter Bootstrap. I know how to use the CSS classes to create my pages but I'd like to know the process of customizing Twitter Bootstrap to match my mockups as much as possible. I'm talking about colors, typography, margins, padding, borders, button styles and so on. I'd like to create completely different themes for this and every future project I'll be working on.
I'm a programmer but I love GUI design too so I'd like to know how professional designers make all the pieces fit in.
Thanks in advance.
In order to get the most out of Bootstrap (especially the new "mobile first" features) I recommend using your Illustrator file as a jumping off point, rather than a spec.
I agree with the other commenter who suggested leaving the Bootstrap file in place and writing a second file with selective overrides. This is much easier with Bootstrap 3 since the flat design means less to clobber with your own declarations.
I always start with laying out a static version of the pages using plain Bootstrap then methodically cherry picking styles using the inspector (e.g. body backgrounds, typography, colors) in priority order as they stand out to me visually. I usually wind up with something that is close, but slightly different (often better), than the original design.
Good luck! If you don't fight it too hard, Bootstrap offers a lot out of the box.
I'm pretty new to Bootstrap but the general consensus seems to be to leave the actual Bootstrap.css intact and create different CSS files to override Bootstrap. For example in this snippet (SCSS by the way) I commented a section as "General" and placed some default overrides for my site. Most notably would be the restyled input boxes from rounded to square.
/********
GENERAL
*********/
html, body {
height: 100%;
}
.wrap {
position: relative;
overflow: hidden;
min-height: 100%;
}
body {
a {
color: #FF4329;
&:hover {
text-decoration: none;
}
}
input[type="text"], .btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
}
Also note that you can customize the files you download from Bootstrap so if you plan on using on the the grid system then that's all you need to download.
If you're planning to use the grid system of Bootstrap, there're plugins for Photoshop and Illustrator that create guidelines for you (you can even specify the padding, number of columns and margin).
Bootstrap is based on CSS. When you design something in Illustrator, you'll have to export assets like images but it's important to make use of CSS also for the most things you can. Remember, it's faster to apply a CSS background-color instead of using an image for that purpose as background-image.
I make my scratches on paper and pass right away to html. With chrome developer tools you can easily change the css styles applied, apply new rules, etc
I am using twitter bootstrap for layout and css. But I like the foundation top bar navigation over what bootstrap provides. I tried to use the top bar code inside my html (built with bootstrap) and it messes up the layout. That is not surprising because both of them rely extensively on class named "row" and they have different properties.
One of the options I could think off is to override the row class some how in my style sheet but that would be too much of a work and doesn't seem right.
Other option might be using iframe.
Is there any other way this issue can be solved?
Ideally, you only need to use the top-bar CSS and JS code of Foundation, since that is the only component you mean to use. Here is the SCSS file (with dependancies on the variables declared in _settings.scss. Or you can use the generated CSS code.
If you still need to use .row, just copy the .row styling and name it different. I.e:
/* The Grid ---------------------- */
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
Finally, dont't forget to include the jquery.foundation.topbar.js file and calling
$(document).foundationTopBar();
Old question but thought I'll share the latest if someone is looking for a seamless solution: Web Components
It's a bit of a more complex subject but will allow you to create widgets within completely isolated Shadow DOM's without overriding a thing. Read more about it
here and here. Then you'll be able to do something like this:
<template id="templateContent">
<style> #import "css/generalStyle.css"; </style>
</template>
Taken from this answer
Using an iframe for this is a bad idea. If you like the style for the Foundation top bar, just copy those styles into a custom class in your stylesheet.
Please note that you may have to override some of Bootstrap's default styles for the top bar to get it right.