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 6 years ago.
Improve this question
I have basic understanding of CSS,HTML and better of scripting languages Javascript,PHP... I am trying to dive into Bootstrap framework.
Documentation great, any problems without creating pages, everything works pretty well.
But I really hate doing something without understanding how does this work under the hood internally.
I understand that CSS3 is used with browser specific features, but I cannot leave this as it is, I want to get better understanding of bootstrap.
And how can I implement the same without using bootstrap.css.
I know the best way is just to read bootstrap.css but maybe someone has link to article or any other resource explaining how all this stuff works and how this is achieved and I can implement without bootstrap.
Thanks.
The best way is still reading the bootstrap.css file. You don't have to read it top to bottom. Pick up a sample web page made in bootstrap. See which classes are used where. Bootstrap classes are very intuitive. Most probable you'll see classes like, .row, .col-sm-4, navbar, .container, .container-fluid etc. The next step is search a particular class in bottstrap.css. E.g. searching .col- you'll see that there are 12 different classes starting from .col-sm-1 to .col-sm-12 after the media query for <= 768px. Then for other screen size you'll see other classes like .col-xs-1 to .col-xs-12 for screen sizes >= 768px and so on. They simply give 100% width to .coll-*-12 and 50% width to col-*-6 etc. You'll see clearfix classes etc. Then it will click. Whenever you'll see a new class used in page it's name would be self explaining you could foreguess what that class would do and how would that be defined in the framework.
That is the strategy I am using to learn Bootstrap. Although I feel that most of the times we need only rudimentary classes of bootstrap for responsiveness. Simple things can be done manually with custom css, like styling buttons, font-sizes etc.
Finally I'd suggest you the following article for undertanding how the .row and .col work. What the 15px padding and -15px margin doing in these things.
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
P.S: If you know how to use developer tools then looking through the DOM is actually a far better approach. You can see the css applied by each class and can also edit it to see how it makes difference.
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 10 months ago.
Improve this question
I've started to look into modern popular css frameworks such as tailwind. The "paradigm" in these frameworks is writing all the css in the html essentially applying classes as properties. E.g. If I wanted a title to be have bold red text, I could write:
<h1 class="font-bold text-red-400">Title</h1>
But while this may make it easier to write CSS in the short term, it seems like a really awful strategy of going about writing CSS in the long term. What if I have 20 different titles and I decided that I wanted to make them blue instead of red? Then I will have to edit the html 20 times! If I instead just used the classic approach and wrote:
<h1 class="title">Title</h1>
...
<style>
.title{
font-weight: 700;
color: rgb(248 113 113);
}
</style>
I would only have to update the css once to make all the changes. Although it's a bit more verbose, this surely scales much better. In fact, if I remember correctly, wasn't inline css discouraged not too long ago? Wasn't this why elements like <center> were starting to be phased out? And tailwind is used on large websites---so there must be a reason why people prefer this method. Does it in some way scale in a way I am not understanding?
The only true benefit I can really see are offering an out of the box responsive grid, but everything else seems much more efficient to do the traditional way.
The main pro that people have for using something like tailwind is the utility class usage explains more about what has been done to an element, then a random class name could. This makes it easier to onboard new employees because they can just get a quick grasp of the utility classes, and then while looking through the HTML understand what all is being done to something, and make changes to specific items without worrying about changing something else unintended. The cons usually are what you're saying, it makes it really hard to make style changes to many things, makes HTML code look gross, and requires an extra layer of learning all of the utility classes.
In the end I've found that most people just use tailwind as a quick way to get something rolling, and build a prototype, but once something has become a larger project it's time to shift over to something better. Overall I've just found a pretty large hatred for tailwind across the internet.
This article by the creator of TailwindCSS talks about the cons of semantic CSS classes. One argument is that semantic classes are a lot harder to maintain that it seems to be and using utility classes such as in TailwindCSS is easier to maintain than it seems.
And as for the specific points you mentioned, Tailwind aims to take best advantage of the reusability of components in modern frameworks such as React and Vue, so you don't end up changing the css of 20 different titles, but just one title component that gets reused 20 times.
A difference between this approach and inline css is that using utility css classes means you have a pre-defined design system with consistent differences between classes, no magic numbers and so on.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am making a website in WordPress using a theme called Hueman. I want my whole site in fullscreen and get rid of the borders on the side (I'll show in a picture).
Can't find where to edit this.
I need to remove the borders 1 and 2 and make it fullscreen and responsive on other browsers/devices.
You can achieve this by adding this as custom css (tested and confirmed just now on latest heuman version)
.wrapper,
.container,
.container-inner {
max-width: 100% !important;
width: 100% !important;
}
Note:
Don't make changes to original theme files, preferably make a child theme or else use custom css option
As told in the comments, there is a function in most themes (mostly non-free themes) to edit the appearance without changing any code. Often themes install this tweak-UI in the controll panel on the left, using it's own name, adding sth like "options" (e.g. "[myThemeName] options"). Be sure to check that before you change anything in the css-files.
If there isn't any options-menu you should check the structure of the php-file you want to load. Mostly you'll find sth like a "container"-div, which should be one of the first div-instances. Take the id/class of that div and add a rule to the css file, making its width to 100%. Before you add a new rule first check if there is already a rule declaring sth for this div.
Hope that helped you!
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 6 years ago.
Improve this question
I'm a very newbie to the world of UI developing. Right now I'm using HTML and CSS to develop the layout. I use Google Chrome (because it is a very good browser, and from my point of view it is the best right there) to debug my code, but I just downloaded Firefox to see how my design will look like (I was thinking pretty much nothing will change) only to be staggered when I found that my design looks terrible and all what I went through was not compatible with Firefox.
I need someone with an expertise in that field to tell me how to properly perceive such incompatibility (Some professional techniques ) between browsers and what should I do now for my current design and for the future when developing other sites?
PS
the question might not have some genuine English as of my background, but I assure to you that I'm not demanding rather than asking politely, that's how it sounds in my region. Thank you
Updated
Since the browsers are all developed by mainly different people, there's always the possibility of running into compatibility issues.
There's two steps I can think of when it comes to preventing this kind of issues:
Use a CSS reseter. What that means is a stylesheet containing a set of CSS for bringing all items to the same starter value (i.e. chrome has a 30px padding in list items, firefox has 35px but the css resetter tells both of them to have 30px padding - Just an example). For more info about CSS resets, have a look at this question: CSS reset - What exactly does it do?
Prefix your CSS correctly. Browsers implement properties differently, so while -webkit-transition:0.2s; worked in an early version of chrome, firefox had its -moz-transition:0.2s implementation only, until it became a standard that transition:0.2s should be the accepted syntax. There's lots of tools that can help with that, like Autoprefixer, or pleeease.io
Regarding Mobile responsiveness, the key is to avoid using many fixed width elements (i.e. 1024px for the main container) or having media queries and adapting the fixed sizes to certain display sizes using media queries.
The internet's knowledgebase can help you really understand more about this, but if you just want to try it out, you can view some popular media queries on this SO question: Media Queries: How to target desktop, tablet and mobile?
you will have to learn as you go, start with the simple things & make sure you have a good foundation. There are a lot advanced CSS3 animations, transitions & transformations as CSS3 is becoming more & more powerful. Check at "Can I Use" to see which browsers support your CSS. Responsive design is based on media queries (checking screen size) & using percent rather then px for example so the design can change depending on the device. Also MDN is a great tools for reference which also notes browser compatibility.
a good practice is to set padding margin to 0 and using box-sizing on first lines of your stylesheet to reset browser layout like this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
this will help you control your site layout a bit better
The second part of your question:
Write this code to make your website compatible in the head part
Modify the "1.0" part accordingly.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
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 7 years ago.
Improve this question
I've read a lot about this thing. Most of users suggest media queries, but I would like to know is there any specific 100% working way that allows your site to look great(elements doesn't lose they positions) even on another resolutions/browsers with just html/css. If not, what to do then?(get back to media queries?)
I don't know much about css/html, but when I tried to open my page with another pc or phone, it looked awful - (page which i designed for my PC's resolution).
I also tried 'em', '%', 'min-width' and 'min-height' but didn't go so good.
Sorry because I ask this, even there is probably an solution out there. I just wanted clear and straight answer so I don't lose my track and get confused even more.
Thanks
Media queries are the best thing to use when it comes to fluid web design. Think of media queries as custom presets you can create for each or a range of screen sizes. It is the best way to inject fluid design into your website.
The easiest way is going to be using bootstrap(http://getbootstrap.com/). This is some free open source css code that simplifies a lot of things, including what you're trying to do
EDIT: As others have said, media queries are the most common and potentially best way. Bootstrap is just a simple way of getting your site to look good on most screen sizes.
Responsive Web Design revolves around Media Queries. It's the ability to define certain resolutions to force the page to display in a specific way for that resolution. This is how a single web page can be rendered to look native to a phone, tablet, and/or PC without having to create 3 different web pages/applications.
Ideally, you wouldn't want to write this yourself. I'd recommend one of the following libraries, then build on these libraries to fit your need:
Material Design (Google Design)
Twitter Bootstrap
Foundation
Now, if you don't want to use a library or media queries, maybe this example will help. I don't recommend not using a library, nor not using media queries though.
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 7 years ago.
Improve this question
I need to code a layout (http://lancebitner.com/Story%20580_WAGE_Yes.pdf) using Bootstrap and I am not sure if it is possible. I have limited experience with Bootstrap, but more experience with HTML and CSS. I am not sure it is possible as I have not been able to find any references for this layout. Can anyone point me in the right direction? Each page has different features and I am hoping to produce them each with Bootstrap.
Has anyone seen a site similar to this mockup, with the layout and features, that uses Bootstrap?
Any design can be done using bootstrap, its about how are you going to manipulate or edit the existing code, but for me the best part of bootstrap is the grid system, which will allow you to have a better responsive design.
probably not exactly . bootstrap is actually a grid system with a collection of markup and css rules that will make it look different a bit ( but a lot better ).
That means that some elements will look different ( buttons, form elements etc ) if you will use the default rules - But you can always override them .. but then again - why use bootstrap :-)
as a direct answer - For layout by itself ( ignoring the design ) - yes, you can.
bootstrap will also give you the advantage of device / browser compatibility that is hard to achieve coding from 0 in HTML these days .
I suggest you go to the examples page where you can see some layouts to start from - combining these will allow you to achieve the layout you need . Also pass all the elements and components ( form, table, buttons etc) that are showcased on the official page. all the elements you need are there ( and more )
In order to understand bootstrap the best way iss just to implement it .
Good day,
Yes, it's possible and judging with the pdf, you can use some free bootstrap templates here, just tweak it
https://bootswatch.com/,
http://designmodo.github.io/Flat-UI/
Cheers :)
I did some research and you guys were right, Bootstrap can do it; it just takes some custom CSS and JS. I found a Bootstrap layout with some of the features I was looking for; single column layout with a drop down menu: http://alijafarian.com/bootstrap-multi-column-dropdown-menu/ . Also, for the two column page I found this layout: http://startbootstrap.com/template-overviews/2-col-portfolio/ . These to layout will help tremendously. With some adjustments I am on my way!
http://lancebitner.com/Capture2.PNG