Jump to content

Things to read about css frameworks

pwired

By pwired,
in Dev Talk

 Share

Recommended Posts

OrganizedFellow Hero Member

OrganizedFellow

Posted
Posted

I've been using Susy for some small personal projects and once you get the hang of it every other framework feels like a bloat.

Their adagium is: Your markup. Your design. Our math. Sound familiair?

hhmm, sounds intriguing.

Susy > SASS/SCSS > Ruby, right?

I just checked, and I DO have Ruby 2.0.0.p0 installed locally :) I guess I'll be learning something NEW this weekend!

  • Like 2
Link to comment
Share on other sites
Roope Sr. Member

Roope

Posted
Posted

I've also been looking to Susy direction but I like to do my preprocessing with php so that it runs on every server. If I need to quickly change some styles on live site I wan't to do it hassle-free.

With LESS I use Leafos lessphp - he also has nice SCSS php compiler but it doesn't handle SASS syntax. Leafos lessphp is connected to my assets compiler class that generates minimized js/css files on the fly so it also handles preprocessing while doing it's job.

How do you guys work with preprocessors? And does anyone have recomendations for solid php SASS parser?

Link to comment
Share on other sites
arjen Hero Member

arjen

Posted
Posted

I only use the sass preprocessor while developing on my local machine. I deploy the generated css to the live site. I might be wrong, but this is best practice I believe. I haven't got time but you can search Google for sass workflows.

  • Like 1
Link to comment
Share on other sites
OrganizedFellow Hero Member

OrganizedFellow

Posted
Posted

I only use the sass preprocessor while developing on my local machine. I deploy the generated css to the live site. I might be wrong, but this is best practice I believe. I haven't got time but you can search Google for sass workflows.

I actually came across these yesterday:

http://www.codeschool.com/courses/assembling-sass

http://mashable.com/2013/06/11/sass-compass-tools/

Link to comment
Share on other sites
pwired Hero Member

pwired

Posted
  • Author
Posted

At manfred62

Imho too much px values inside. Also the width's are preset?  (w320, w640...)

Quote from the site http://gridiculo.us/index.html

Ability to not be locked into always having to start with 1200px, so I created some stops along the way. You can set your site to max out at 960px, 640px, 320px or even stretch it out to full width. You can even space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size.

If I open the gridiculous.css file I see % and em's and only see px for max-width

.w320{max-width:320px}
.w640{max-width:640px}
.w960{max-width:960px}

In my basic understanding I still think this could be a jackpot css. Just go to the bottom of the website and see where gridiculous is based upon. This must be something more than the average css framework. But I need your people's pro coding experience to help me if this is really a good one or that I am only in a wishfull state of thinking to have found something special.


 

Link to comment
Share on other sites
Roope Sr. Member

Roope

Posted
Posted

To me, grid has to be cofigurable - otherwise it's probably too limited for everyday use. When I can adjust number of columns, gutters and paddings, I know I can use my grid basicly on every project, no matter who designs it.

  • Like 1
Link to comment
Share on other sites
MatthewSchenker Hero Member

MatthewSchenker

Posted
Posted

Greetings,

Well, thanks to this discussion, I think my decision-making is moving along! I am liking Kube's approach more and more. I plan to use it on my next ProcessWire project.

Another view, and I would be very interested in everyone's opinion... I still like to create and use my own CSS structures. It's interesting to me how development/design has changed in the time I have been doing it. Not long ago (or so it seems to me), the attitude was, "Learn to do it yourself." Today, we have a legitimate attitude of, "Use pre-made code or structures." I understand and see the benefits to this, but I think we should use frameworks like Kube and Foundation, but make sure to also stay fully informed about what all those elements are doing. Otherwise, we run the risk of becoming overly reliant on a few sources for our needs, and perhaps creativity is harmed. I'm not 100% sure about all this -- and I am going to dive into Kube -- but these thoughts keep going through my mind. Again, I wonder what other people here think.

On a related front, I came across this odd link today: http://www.starbucks.com/static/reference/styleguide/

Thanks,

Matthew

  • Like 2
Link to comment
Share on other sites
totoff Sr. Member

totoff

Posted
Posted

Hi all,

I've just released the site profile i mentioned first some days ago here. More info in this thread: http://processwire.com/talk/topic/3832-release-unsemantic-site-profile/

but I think we should use frameworks like Kube and Foundation, but make sure to also stay fully informed about what all those elements are doing.

I completely agree. My approach is to use just a simple grid system (in the moment Unsemantic) and no pre-defined element styling whatsoever. If I need let's say styling for a form i pick it from elsewhere (for example Kube or Skeleton) and incorporate it into my css. Thus, I'm having control about nearly everything and just need to familiarize myself with the anatomy of the grid.

  • Like 1
Link to comment
Share on other sites
Manfred62 Sr. Member

Manfred62

Posted
Posted

At manfred62

Imho too much px values inside. Also the width's are preset?  (w320, w640...)

.......

If I open the gridiculous.css file I see % and em's and only see px for max-width

.....

In my basic understanding I still think this could be a jackpot css. Just go to the bottom of the website and see where gridiculous is based upon. This must be something more than the average css framework. But I need your people's pro coding experience to help me if this is really a good one or that I am only in a wishfull state of thinking to have found something special.

there are some more padding and margin in px. So I skipped this grid.

Because of jackpot.css: the code of html5boilerplate and normalize is used by a lot of grids/frameworks. Also you can pick your needed extras from this resources to complete your own work. Best will be, if you try to build a site with gridiculo. Then you see, if it's ok for you. There are so many grids/frameworks to satisfy nearly everyones need.

description of my experience (RWD beginner) in short words:

looking for a simple grid (no Bootstrap, Foundation,etc!). Then study the code of some (no px, only em+%). I'm a little bit oldstyle and like to work from desktop to mobile instead of mobile-first. Descision to try Kube at first. Took a simple static ready-designed site (from my demos and test resources) to make it responsive. Work my way through the code. I'm surprised how easy and fast this was finished. I could keep my style and design and make it responsive anyway. Little bit customizing, had to build a responsive navigation. Also important: at the end I changed the px in media-queries to em (to get full text-zoom and site-zoom).

@media only screen and (min-width: 480px) and (max-width: 767px)
@media only screen and (min-width: 30em) and (max-width: 47.9375em)

After that, I tried it with another site. Same experience. The sites are also running in IE8. Yesterday I used the respond.js (which mentioned some posts above) with the demo site. Now IE8 is also getting responsive. Nice to see.

Maybe when have more time, I will try this new discovered PocketGrid This is very minimalistic, only 2 classes. But seems to be very flexible. We will see...

I completely agree. My approach is to use just a simple grid system (in the moment Unsemantic) and no pre-defined element styling whatsoever. If I need let's say styling for a form i pick it from elsewhere (for example Kube or Skeleton) and incorporate it into my css. Thus, I'm having control about nearly everything and just need to familiarize myself with the anatomy of the grid.

yes!!

  • Like 3
Link to comment
Share on other sites
Roope Sr. Member

Roope

Posted
Posted

Maybe when have more time, I will try this new discovered PocketGrid This is very minimalistic, only 2 classes. But seems to be very flexible. We will see...

Interesting grids - calculate your own widths.. It's like you would get gun and hunting cap from meat store.

Link to comment
Share on other sites
  • 4 months later...
Manfred62 Sr. Member

Manfred62

Posted
Posted
Maybe when have more time, I will try this new discovered PocketGrid This is very minimalistic, only 2 classes. But seems to be very flexible. We will see...

Last week I had time and worked with PocketGrid. As example I took the same demo-page on which I tested Kube.

At first I worked from desktop to mobile (like I did with Kube). Rebuilding the site with PocketGrid was fun and no problem.

Next challenge: building it mobile-first with PocketGrid. Puuh, was hard at the beginning. You had to think completely different (css). Was my first real 'mobile-first' doing. But at the end I got it.

Result: less clean html, removing one unnecessary breakpoint, clean css.

On the other side: IE8 needs a extra css or some js (because mobile-first).

In short words: PocketGrid is supercool...

Also I like the clean logical html. All the responsive magic is done in the css. No need for cryptic classnames.

<div class="navigation block-group">...</div> <!-- PocketGrid -->
<div class="footer block">...</div>

<div class="small-2 large-4 columns">...</div> <!-- Foundation -->
<div class="col-xs-6 col-md-4">...</div> <!-- Bootstrap -->

Using percent, em, px... whatever you like. PocketGrid is absolutely flexible.

  • Like 3
Link to comment
Share on other sites
OrganizedFellow Hero Member

OrganizedFellow

Posted
Posted

Maybe when have more time, I will try this new discovered PocketGrid This is very minimalistic, only 2 classes. But seems to be very flexible. We will see...

yes!!

In short words: PocketGrid is supercool...

Also I like the clean logical html. All the responsive magic is done in the css. No need for cryptic classnames.

<div class="navigation block-group">...</div> <!-- PocketGrid -->
<div class="footer block">...</div>

<div class="small-2 large-4 columns">...</div> <!-- Foundation -->
<div class="col-xs-6 col-md-4">...</div> <!-- Bootstrap -->

Using percent, em, px... whatever you like. PocketGrid is absolutely flexible.

I agree.

I was/am a die-hard user and supporter of Foundation, but gotta admit, it is totally overkill for simple sites.

After looking at the CSS in PocketGrid, it really is flexible.

Yall seen this? http://arnaudleray.github.io/pocketgrid/examples/nested-grids-responsive.html

Link to comment
Share on other sites
  • 1 year later...
Christophe Hero Member

Christophe

Posted
Posted

Hi,

Has someone already used Semantic UI (http://semantic-ui.com/) and/or Kraken (https://cferdinandi.github.io/kraken/index.html), or Kraken-Sass (http://jwebcat.github.io/kraken-sass/index.html)?

They seem very interesting.

[ List of some other grid systems: http://www.cssauthor.com/grid-systems/ ]

Edit: I've already used HTML KickStart and a Pure.css layout for some websites.

I want to redesign my website. I was about to use UIkit (or Pure, or PocketGrid). There are so many choices...

Link to comment
Share on other sites
dragan Hero Member

dragan

Posted
Posted

Sounds good from a first glance. We've started to establish Susy as the main (only) CSS-framework recently for new projects in our frontend boilerplate, but looking at the "Better than X" comparison table, we might reconsider our choice...

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...