Jump to content
Sign in to follow this  
AnthonyBrown

Systems for responsive design

Recommended Posts

Hello, I know there are grid systems out there like Bootstrap, 960px-grid, etc.. but I don't know which to choose for a given project or why. Is there a grid system that is really common that I should just devote all my energy into learning? Or should I learn multiple systems because different systems might confer different benefits depending on the project?

 

Also, does anyone have any good resources/tutorials for learning how to approach wireframing/design with these grid systems?

 

Thanks!

 

Share this post


Link to post
Share on other sites

Once you have got the hang of one css grid learning another will be easy, a ten minute job, but bootstrap has loads of other stuff in it which takes a while to get familiar with, it isn't just a grid. I used to like skeleton, it was just resets, some basic typography and a button or two plus an easy grid but it might be old hat now, You need to get some boilerplate from somewhere, you can't be writing everything from scratch.

Share this post


Link to post
Share on other sites

I suggest you learn Bootstrap. It is not necessary but desirable. Bootstrap 4 is almost rock solid. Once you learn Bootstrap, it really easy to learn other systems. Plus, Bootstrap is built in scss and several components. You can customize it or trim it down, it is up to you. It is simply amazing. In fact, the Gzipped version of bootstrap is less than 50k - which in today's time is a breeze and a half.

 

If your are puritan and need to build for future, you will have to get your hands on CSS grids. They are the future.

 

Sent from my Moto G (5) using Tapatalk

Share this post


Link to post
Share on other sites

The framework I have built uses a grid. Bootstraps grid falls apart when you have items that tile and are not the same hight... not great for dynamic data.

On it's own Nebula is around 6kb which can be made much smaller if you really care about file size.

https://nebulaui.github.io/nebula/api/objects/grid

 

 

CSS grid is a long way off being used in production lots of browsers that are still in heavy use do not have it implemented. give it a few years and it will be the go-to tool for layout.

Also while grids work in most cases for responsive layout - what if you want to mix both fixed-width and fluid content side by side?
The flag object here accomplishes that https://nebulaui.github.io/nebula/api/objects/flag

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By Lyndsey
      Hi guys,
       
      I thought it would be cool to start a topic for people to share sites they find useful for their design/development processes. Here is a list of sites I find useful and/or use regularly:
       
      General Stuff:
      http://jsfiddle.net/ - Useful for JavaScript troubleshooting. Test your code and just play around with HTML/CSS and JavaScript. If you're looking for help with a piece of code, save your Fiddle and send it to someone else who can take a look at it You can also save revisions of your Fiddle to track your progress. http://pastebin.com/ - Useful for sharing code online. Useful for when you run in to a bit of trouble with some server-side code. Instead of pasting masses of lines inside a topic, paste your code in to pastebin and get someone to have a look at it for you http://jsonlint.com/ - JSON Validator http://paletton.com/ - Color Scheme Designer. See what colours complement each other etc. Useful stuff. http://www.lipsum.com/ - Lorem Ipsum - Useful for inserting dummy text in to your web pages. http://net.tutsplus.com/category/tutorials/php/ - PHP tutorials, quizzes etc. They also do the same for JavaScript, HTML, CSS, WordPress, ASP.NET to name a few. Really good site.  
      Javascript:
      You Don't Know JavaScript - https://github.com/getify/You-Dont-Know-JS JavaScript scene https://medium.com/javascript-scene Webpack Asset bundler https://webpack.js.org/ Jest, Automated tests for JavaScript https://facebook.github.io/jest/  
      CSS:
      http://css3generator.com/ - Generate CSS3. Box Shadow, Border Radius etc. http://border-radius.com/ - Generate border radius quickly! http://www.javascripter.net/faq/hextorgb.htm - HEX to RGB conversion. http://meyerweb.com/eric/tools/css/reset/ - CSS Reset Stylesheet. Resolve browser inconsistencies such as varying margins/padding. http://www.cssplay.co.uk - Lots of experiments with CSS, menus and layouts. CSS Wizardry: https://csswizardry.com/ Sass Guidelines https://sass-guidelin.es/  
      Responsive Design:
      http://www.getskeleton.com/ - Responsive Grid. Nebula - a framework built by WDF member, rbrtsmith: https://nebulaui.github.io/nebula/  
      Server-Side Coding:
      http://net.tutsplus.com/tutorials/php/php-database-access-are-you-doing-it-correctly/ - How to connect to a database using PDO http://www.php.net/manual/en/index.php - PHP manual for everything PHP!  
      Form Validation (Client-Side):
      https://jqueryvalidation.org/ - (My preferred method) Simple to use. Include the necessary jQuery and Validation.js files. Simple usage example, call the function using $('#myForm').validate(); and add a class="required" to fields you want to validate Also allows you to create custom messages and make the validation more advanced! I hope these are useful! If anyone has any others to share, please do
       
      Lyndsey.
    • By DigitalWorkshop
      We've (finally) finished the overhaul of our website to make it all responsive and to showcase the responsive content skills of the new versions of our software.
       
      I'd welcome any feedback, specifically on the pages showcasing the responsive content examples as they are mostly our existing examples just set to be resizable (except the interactive video stuff).
       
      http://www.digitalworkshop.com/showcase/showcase-publications.shtml
       
      http://www.digitalworkshop.com/products/info/animation.shtml
       
      We haven't yet done any which switch content but it's probably only the quizzes which would need it because of the amount of text in them.
       
      (If anyone is interested enough to want a copy of either Opus Pro or Creator at a silly discount send me a message here and I'll give you a code).
       
      Cheers,
       
      Paul
    • By Spyros
      Hello My Fellow Web Designers!
       
      Your feedback has been so helpful in the past, I'd like to ask for your thoughts on another of our custom Wordpress theme designs for our clients. The website in question is here: Mykonos Panormos Villas | Sea view, luxury villas.
       
      As you can gather, the villas are at the luxury end of the scale. I'd love to know if you think this custom responsive design fits with the brand identity of the property.
       
      Thank you so much in advance for your time, I look forward to your feedback!
       
      Cheers!
    • By Spyros
      Hello fellow Web Designers!
      I hope this post finds you all well. If possible, I wanted to ask for some feedback on a custom Wordpress design we produced for one of our luxury boutique hotel clients. The client (and website) in question is Kivotos Mykonos Hotel | Mykonos Luxury Boutique Hotel. I would be interested to hear your thoughts on this custom design (it's fully responsive too), and particularly how it ties in with the hotel's status and brand identity. Thank you in advance for your time, your feedback is most welcome. Cheers!
    • By x2interactive
      Hi Everyone!
       
      We just wanted to introduce ourselves now that we've joined the forum - we're x2interactive - a web agency based in Greece! We specialise as a Hotel Web Agency, serving a wide range of clients based mainly in Greece but also abroad. We're looking forward to participating in the forum and admiring some of the great work on the web today. Cheers!
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,712
    • Most Online
      4,970

    Newest Member
    adabo
    Joined
  • Forum Statistics

    • Total Topics
      65,781
    • Total Posts
      454,596
×