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 9 years ago.
Improve this question
I would like to create a responsive layout using html5 and css3. After reading a bit on the internet I got really confused as where to start. From what I've read there are frameworks that help develop responsive layouts:
Foundation
Twitter Bootstrap
This is where the confustion starts:
What is the benefit of using these frameworks?
Where can I find tutorials that would teach me to go from PSD => HTML5 Responsive layout => and I guess then use the framework.
Do I need to use these frameworks?
These frameworks have lots of classes generated to set up a grid system really quickly and easily. For example, Bootstrap has a bunch of classes that help set up a fluid grid with each <div> or container having a fluid width that could be different compared to its adjacent container.
To go from a PSD to a responsive layout to using a framework is tricky, and a lot of people like to work from mobile layouts and create PSD's for those smaller devices to help them figure out what is the most important content and put that in the top of the page for mobile and more towards the center or with more emphasis on desktop. To move to a responsive layout, it's really all about creating a PSD for pretty much every breakpoint you plan to have, that way you know where everything should go and it makes it a lot easier. Using the responsive layout framework is pretty much a part of the layout design process, because you use the framework for its abilities, so it's important to know what the framework can and can't do that way you don't design something that is impossible.
These frameworks just create lots of nice features that make responsive development a lot easier and simpler for beginners, you may want to just make a sample site with the framework, and then after you could move on to doing it yourself because lots of times you may not use everything the framework offers and taking it out and overriding its classes is a pain. Frameworks get you started and learning and you decide if you are comfortable using them.
Happy coding!
Some of the work is done for you already. (If they do things in a way you don't want, then that isn't a benefit, of course).
Questions asking for tutorial recommendations are off-topic for Stackoverflow
No.
Related
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
Here's the link to the page I made: https://thawing-savannah-89995.herokuapp.com/
This is my first webpage I've made without help using only a PSD.
Here's a SS of the area I'm having issues with and keeps breaking when I shrink the browser size. This layout was very difficult for me to think through and I don't think it should've been. How can I better design the html and CSS for that part?
I don't have enough rep at the time of this post to comment. Sorry, I would if I could.
I suggest using a thing in css called flexbox. It takes a little extra work instead of Bootstrap or 960 or something, but in combination with percentage units, and even maybe vh/vw if you want to be new age.
This guide explains it better than I could ever hope to; basically, it's a dynamic alignment system. Centering is made trivial, compared to the alternatives. Keep in mind, you might need some #media breakpoints, mostly to change the flex-direction.
It has recently gained almost (sorry IE) universal browser support. If you do care about IE, use a shim like flexibility.
If you do want to use bootstrap-like grid systems, there are better alternatives, if you want to look into them. Personally not a fan of bootstrap (anymore...) but whatever floats your boat I suppose.
The best lesson I learned with creating Responsive sites is to design how you want this to look on a mobile device and work your way up to the Desktop.
I can suggest that you use Twitter Bootstap or Foundation as well as downloading responsive templates. Read as many articles you can find about different techniques that you can find to help you best understand the concept of how do to this.
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
So I'm requesting a solution to markup practices. I am working on an administrator back end design, now I am looking to not necessarily work with responsive design but have completely different behaviour.
Would it be better to use an entirely different site?
Should I include both desktop and mobile HTML and hide/show accordingly with media queries?
What is generally the best way to setup for this and what method to approach as I need the designs to be different in terms of HTML and CSS but I want to have good standards of practice.
As I understand it, you are looking for the best mobile optimization methods. There are a number of solutions to this problem. Peronally, most of what I design isn't meant to be used on mobile devices because of the nature of it, but I try and follow these habits:
1:Use percentages/ems for measurements (height, width, margin). These are adjustable, and will render at least decently on a mobile device. Build a website using only px measurements, and you're screwed.
2:make sure your code is compatible with chrome, firefox, and safari. these are the most common mobile browsers.
ALSO
Having separate sites is acceptable, but i wouldn't recommend it, because any updates you do to one site, you have to do to the other, which could get tedious. As I understand it, it would be better to use media queries(from what I know, there are multiple CSS and/or javascript libraries/frameworks for this) and based on whether it's a mobile device, apply different stylings.
It might be just me but if you're going to write a website, do it properly ONCE. There's a fundamental programming rule Don't Repeat Yourself (DRY) which I like to live by. The best way to achieve this is using media queries and percentage values. Media queries allow you to have completely different styles based on device size and moving forward with web design, something definitely worth investing your time in.
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 am currently new to HTML and CSS. I completed codecademy's HTMl/CSS course yesterday and started working on something which doesnt really have a use but it will touch on everything and I will finish it as I learn more including PHP. I am using bootstrap right now and it honestly feels like I am cheating. I have tried to do everything myself but it basically gives you a navbar which I wont just steal and use, I will try to make my own later on. This is my current site: http://i.imgur.com/nM3wzWv.png
What should I be using? Should I cut out bootstrap and try to do everything with my own CSS?
I mean I did use my own CSS for the positioning but it doesnt seem like much. What do professionals use? Thanks.
Professionals mainly use Bootstrap or Foundation (since these are the most popular frameworks). If you're completely new, it's probably not a bad idea to code some websites from scratch to improve and probably even perfect your basic HTML/CSS skills and once you're comfortable I highly recommend using a framework. As for Bootstrap you can check out the documentation. It is very detailed and once you've figured out the basics, you're way faster than coding everything from scratch.
Generally speaking a professional application parts from a CSS framework of choise and goes arround to customizing it as needed for the application. Of course in order to learn you should neglect those when just starting in order to learn more.
professionaly speaking you use as much "premade" code as possible. That is the reason for the grat ammount of frameworks in any language.
is like asking is it okay to use JQuery it feels like cheating normally I would write like 20 lines of code but using JQuery it became a one liner.
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 9 years ago.
Improve this question
I'm about to embark on a very large front end build project, and probably reusing the same grid for many sites. The back-end developers in my team are raving and raving about Bootstrap and how we should be using it.
I've started using it and it's very good, but our grid has become more complex than the Bootstrap one. So I've drilled into the LESS files and added some of my own rules and modified the responsive grid. I also might need to change and add the media queries in there.
So my question is, considering that I'm having to change and customize Bootstrap quite a bit, would it be best practice to do this or create my grid/framework from scratch?
I would suggest that you use bootstrap and apply customizations per you needs. In our case, we provide a couple of additional .less files, and #import them in bootstrap.less. We use one for variables, imported right below variables.less and one for classes, imported at the end of the boostrap.less list. This way, you ensure that you can override both variables and classes, and include your own, while at the same time you remain compatible with future bootstrap updates
first check how many things you have to build in twitter bootstrap to match it with your framework. i think twitter bootstrap comes with responsive grids so you don't have to work with lots of stuff + Less is there to customize the way you want. check http://twitter.github.com/bootstrap/less.html
if the no. of functionality's are too much then think in terms of project budget and in future how twitter bootstrap can be useful. it will answer everything i guess :)
Have a look with jqgrid http://www.trirand.com/blog/jqgrid/jqgrid.html, It can be customised to a great extent..with little tweak we can integrate that with BootStrap
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
What are some very simple CSS frameworks / design packages?
I don't need the added complexity of a combined HTML, CSS, and JS framework.
I will be creating only a few general page layouts for this site.
I'm building the site on TinyMVC.
I want very minimalistic design (mostly black text on a white background).
I'm planning only one and two column layouts.
I need tables, forms, lists, and other "basic elements" (use your best judgement).
**I wouldn't mind CSS3 with HTML5 in mind.
EDIT#1:
I need a grid system.
I need a CSS reset.
I made my last website with compass and 960 grid system. I was very happy with the speed and results. With compass you have a reset and much more. (a lot of css3 mixins like border radius and gradients etc)
Check it out:
http://960.gs/
http://compass-style.org/
an intro into compass
http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/
here are some nice 960 grid sketches to help you designing your webpage in the 960 grid system
https://github.com/nathansmith/960-Grid-System/raw/master/sketch_sheets/960_sketch.pdf
Variable Grid System might be for you. I used it for some of my projects and it works. Not sure if I'm so much a grid system user, though. It usually gives you much more flexibility than you'll need/use. The cost of that is unnecessary CSS code size.
I tried 960 Grid and Blueprint.
Both were great and both were very similar to each other.
I chose Blueprint because it satisfied my requirements the best and gave the simplest and cleanest appearance out of the box, with settings that I'ev barely had to touch for my site.
960 Grid would probably appeal to many people also.
They are both so easy to test, that I suggest trying both, and choosing the one after playing with them for 15 minutes each.
You might want to check out Cascade Framework Light. It's only 2Kb large, has excellent browser support and should have enough features to fit your needs.