Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Grid System for CMS (full-width)

Featured Replies

Hello,


I would like design new CMS and it should have full-width, responsive layout. I would like to ask which grid system is recommended in this case? My goal is create some guide lines in Photoshop which guarantee easy way to code my layout for developer. For basic websites I'm using Bootstrap 3.


Maybe it should be use Bootstrap 3 too, but I can't imagine, how to transform the grid optimized for full-width. I don't want increase width of 12 culumns to double-sized width or something like that.


I really appreciate every answer on my question.


Thanks in advance, Marek.

Edited by xmalik2

Bootstrap 3 comes with a grid system allready, it has 12 columns by default.

 

By the way a CMS doesn't have a grid or any kind of layout, a CMS manages content on the back-end, it has no concern over what you CSS is doing.

I use a grid called Jeet.gs. You can dynamically add in columns depending on how many you need, and it calculates everything for you. For example:

.column {
   include: col(6/12);
}

It makes it easy to swap columns in and out depending on your media queries. You need to use Sass though, as it's basically just a couple of Mixins and no actual classes.

 

To use full width, you can just amend the settings file with a maximum width and it will use it by default. If you want 100% width then you just add that in, but I would set a px or em max-width on percentage widths also, as they can make content awkwardly spaced on large monitors.

  • Author

Bootstrap 3 comes with a grid system allready, it has 12 columns by default.

 

By the way a CMS doesn't have a grid or any kind of layout, a CMS manages content on the back-end, it has no concern over what you CSS is doing.

 

Probably we don't understand each other.

 

My problem is: I want to design layout for visual administration of CMS. It has be full-width and responsive. I prepare the design and I give source files to developer. I allways stick the guide lines that provide some king of framework, like Bootstrap 3. In case Bootstrap 3 I don't want resize the width of 12 cols, because I think it's not too ergonomic.

 

I would like to know, if somebody knows the framework or Grid System which is recommended for designing admin systems of CMS, CRM and other web based Apps which are responsive and full-width designed.

 

I want help to developer which will programming the design to the finish solution by using standardized framework or grid system which I can stick with to make my design easy way to code.

  • Author

I use a grid called Jeet.gs. You can dynamically add in columns depending on how many you need, and it calculates everything for you. For example:

.column {
   include: col(6/12);
}

It makes it easy to swap columns in and out depending on your media queries. You need to use Sass though, as it's basically just a couple of Mixins and no actual classes.

 

To use full width, you can just amend the settings file with a maximum width and it will use it by default. If you want 100% width then you just add that in, but I would set a px or em max-width on percentage widths also, as they can make content awkwardly spaced on large monitors.

 

Thank you, It's look very interesting. I'm gonna try this, but I still hope I can get some alternatives :)).

 

Probably we don't understand each other.

 

My problem is: I want to design layout for visual administration of CMS. It has be full-width and responsive. I prepare the design and I give source files to developer. I allways stick the guide lines that provide some king of framework, like Bootstrap 3. In case Bootstrap 3 I don't want resize the width of 12 cols, because I think it's not too ergonomic.

 

I would like to know, if somebody knows the framework or Grid System which is recommended for designing admin systems of CMS, CRM and other web based Apps which are responsive and full-width designed.

 

I want help to developer which will programming the design to the finish solution by using standardized framework or grid system which I can stick with to make my design easy way to code.

 

In that case any of the popular grid systems would work, including the one Jack has mentioned. If it is a Bootsrap project though you might as well use the grid that it shops with. it's good but a little heavy.

My grid system is very similar but allows you to opt into the parts you intend to use, I like the versatility of the Bootstrap grid.

Edited by rbrtsmith

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.