What is Reddit's opinion of
Skeleton?
From 3.5 billion Reddit comments
43 reviews of this app found across Reddit:
Never mind the negativity, also the quality might not be perfect with all the content but it's better than nothing. I like it.
I don't know what stack the site is build on, but it might help to use a css framework to sort out the awkward layout (look at bootstrap or I prefer to use skeleton http://www.getskeleton.com/ uses grids and is responsive.
Smaller than 960: Smaller than the standard base grid
Tablet Portrait: Between 768px and 959px
All Mobile Sizes: Less than 767px
Just Mobile Landscape: Between 480px and 767px
Just Mobile Portrait: Less than 479px
I created a theme based on Skeleton (http://www.getskeleton.com) that has a lot of my favorite functions ready and primed to go. It's SUPER bare bones so I can make it look however I want. I set that up as a parent theme, then create a child theme for the client to use.
really it's a little too bare bones for me. If I want something really bare, I will go to initalizr and get the HTML5 boilerplate; it also offers a version of BP with Boostrap that I use.
Another good lightweight framework is Skeleton: http://www.getskeleton.com/
check out the skeleton boilerplate, it's a good tool to just throw into your site.
You just have to call out to the CSS, for instance have: <div class="one-third column"> and then skeleton will tell it to go from a one third column into a full width column when the site is shrunk. (look at the grid a little bit down the page and re-size your browser to see what I mean)
It can get as complex as you want it to be, for instance, I have it so the search bar changes to specific widths depending on the size of the screen, and then once it gets to the mobile view, I tell it to hide the search bar at the top, and unhide one that it styled differently and in a different spot.
It's done with CSS3 @media queries. I did a little blog post on it that you can check out if you're curious: Why Responsive Design is Important
I've used both Twitter Bootstrap because I enjoy working with .less more than plain old CSS and Skeleton before but I still find that it takes me longer to build and test a responsive design than a normal one.
Of course I can just say to the client 'it will take longer' but I was wondering if anyone had any interesting or clever ways of accurately pricing this type of work.
For example. How do you deal with nested navigation? How much longer (from your experience) does this add onto a job? That type of thing.
You may want to check out Skeleton. It's an HTML5/CSS framework that is responsive to mobile users. (Basically, it uses @media requests to test for screen size and then adjusts the display according to screen size.) I used it for a personal site recently, and I fell in love with how responsive it is!
This has been possible for a while now and any developer worth their salt knows about responsive design. Resize this, see how the layout changes depending on your browser's resolution.
It's also the basic principle behind Google's app guidelines, and the reason why "tablet optimised apps" are a load of horseshit. But this is what happens when an army of devs only learn to code according to Apple's shitty take on pixel-perfect UI philosophy.
You might find Skeleton worth a look - its a lightweight set of CSS (and allied Javascript) that implements a grid system you can use.
Once you know a little CSS you can have a poke around in Skeleton's innards and get a feel for how they put it together.
Skeleton is a bit more lightweight and accessible than Twitter Bootstrap
I've been using 960 for awhile, but been considering trying one of the newer responsive-based grids for a couple of small projects I've got coming up. Part of me sometimes feel it's too good to be true -- design once, tweak some stuff, and it works for almost every viewport? Yeah right!
I've been considering adding a 12xx wide version to a gaming site I've been working on, since 960 seems a bit small for what it's aimed at (gamers, one could assume, will have widescreens at least 12xx wide, sometimes larger).
Yay responsive. I've been working my way down this list, checking things out, see what peaks my interest (1140 grid for instance), etc...
Another vote for Skeleton, it's pretty awesome. I don't much care for twitter's bootstrap though, part of me feels it's too bloated.
I find using CSS media queries to be quite helpful when designing a responsive site from scratch. As soon as the screen resizes to a specified width, your HTML elements will respect the CSS values for that width condition. Below is a basic raw CSS structure for desktop, tablet, phone-portrait, phone-landscape orientations that I modified from http://www.getskeleton.com/. Hope this helps.
/* #Base 970 Grid ------------------------------------------------------------- */ .mystyle{
}
/* #Tablet (Portrait) Design for a width of 768px ----------------------------- */
@media only screen and (min-width: 768px) and (max-width: 959px) { .mystyle{
} }
/* #Mobile (Portrait) Design for a width of 320px ----------------------------- */
@media only screen and (max-width: 767px) { .mystyle{
} }
/* #Mobile (Landscape) Design for a width of 480px ---------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) { .mystyle{
} }
My favourite is Skeleton. I find with most other frameworks that I spend more time removing the pre-made styles than I do writing the styles I actually want. Skeleton provides exactly what I need and nothing I don't.
You're welcome. I didn't use a grid in this case - I just drew a few guidelines on a photoshop layer to convey the general idea. But I have used 960, blueprint, etc., and I can recommend them. I saw this one the other day which looks pretty nice:
Haven't tried it out yet, but it looks pretty solid.
Drupal with themekey will let you use a different theme by browser, so you can target mobile clients for a specific theme.
For that theme, you can either just use CSS/HTML targeted for a mobile browser or use something like Sencha Touch or jQuery Mobile. Personally, I"m against the latter. They're great for making a sort of javascript frontend for a web app, but in my opinion they kind of suck for just making a mobile version of a general website.
I've also been using Skeleton lately for more themes (drupal and otherwise). It scales down nicely although you really have to take care in your custom theming (for example, setting explicit widths tends to break collapsing to one column for mobile browsers) but if done right you end up with a nice site that can scale down cleanly to tablet and mobile versions. The latest site I did has mostly pages with 3 columns across, and it scales down to two columns for tablets and one column for mobile browsers.
If you're interested I can share my skeleton drupal theme (needs some cleanup, I plan to eventually polish it up and release it).
I like using Gumby, its an awesome framework that does some neat stuff that Bootstrap and Foundation cannot complish. I use that as a base then work in my own custom CSS to make it look nice (when I'm using a framework).
I also love using http://www.getskeleton.com/.
In my opinion Bootstrap and Foundation shouldn't be used together. I personally like Flat websites so I prefer Foundation over Bootstrap, but since Bootstrap is really really easy to use I use that on websites that have a tight schedule.
The footer#site-footer is overlapping on top of everything. shampine's solution does work, but it's not the definitive solution. The real problem is that the #container and #content divs have zero height, because their contents are floated to the left. There needs to be a clearfix surrounding them.
It looks like the skeleton framework is being used here. Check out their code examples for the grid to see how to do it properly. Looks like your div with ID "container" needs to have the CLASS "container" instead.
Coyier covers this nicely: http://css-tricks.com/dont-overthink-it-grids/
Personally, I learned how to make my own grids by studying Skeleton. It's a bit dated now but the code is easy to understand.
People mentioned Foundation and Bootstrap...while those are decent frameworks, they are also bloated and way too much for most needs. Foundation doesn't even work on IE7...that's pretty lame IMO. Check out this:
It's lightweight and has the adaptive grid built right in. Also keep in mind that responsive design tends to be fluid width while "adaptive design" has set break points using Media Queries. There are arguments on both sides for which is better, but it really depends on the site.
I've been using _s, but real life happened and pulled me away from web design and such but now that I'm back (so to say) I've been looking into skeleton as a base theme -- I want to do a completely responsive theme for my mother but I want to stop wasting time reinventing the wheel.
So far it's ok, but I've not gotten really into it yet.
Like I said I used (and love) _s, but now that I'm getting more into responsive design I like the idea of using a base theme that already supports that.
Use percentages religiously. You could also check out adaptive frameworks like Skeleton.
If you're looking for a full page background image, check out this article.
First off, Stackoverflow about tables. Read the question and the top answer, it may be that for your purpose tables will suffice.
If you just want a layout that helps you make columns then any of the "grid" layout CSS sheets or generators available will make that process trivial when you are starting out. here and here should give you an idea of what is available.
As for "creating CSS styles" I am not quite sure what you mean. Are you simply unfamiliar with the syntax and method involved with styling a page or are you hoping to just use a tool that will auto-magically make your site have a certain overarching theme a lá Wordpress themes?
You can't go wrong with 960, but you could also look at responsive webdesign which allows you to use multiple sizes based on the device or size of the browser width.
http://www.getskeleton.com/ is a good place to start. Good luck!
What's the most adequate to use if I want to dock a menu header when the top of my window reaches it just like the one in skeleton's site does?
If I were to use methods, how do I trigger the function? I need to be watching the distance to top all the time, but I don't know how to keep track of that with Vuejs.
I'm a big fan of Skeleton http://www.getskeleton.com
It's basically a grid and some low hanging fruit like typography, buttons, and forms. At about 400 lines of code, its a lot easier to customize than bootstrap.
That being said, I'm not afraid to use straight up bootstrap if it fits the needs of the project. I don't think most end users know what bootstrap is, and wouldn't care even if they did.
Usually I would agree but skeleton is really minimal and just breaks thinks into columns. After using it I was able to understand what to focus on if not using it and how to break down my design for html/css. Skeleton is not bootstrap. Check it out. Http://www.getskeleton.com
This is why you should use a framework so you don't need to worry about it. I recently used Skeleton for a recent project and I could build my site around it every easily.
Look up "media queries" as others said.
Personally, if I were you I would just get a CSS boilerplate which handles annoying things like screen sizes for you. I recommend Skeleton.
Bootstrap is nice if a tad clunky. I have tried Foundation. I prefer Skeleton; a very responsive 960. Very clean, snappy and mobile friendly. It's also very easy to design.
And once you learn one- you pretty much can use them all. Like driving a car.
I've used Foundation for a handful of projects. I prefer it to twitter bootstrap, but it's really just a personal preference. I've also used skeletion for really small projects.
stop what you're doing and start using a responsive framework, something like skeleton. that way you don't have to waste your time coding the responsive element and can spend all your time on design
Bootstrap can be overly cumbersome if you are looking for a simple framework to get the ball rolling.
http://www.getskeleton.com/ - I like this framework when I need to get up and going quickly as it contains mostly just the bare minimums for a responsive site, unlike all of the extra fluff that gets added with bootstrap.
Personally, I think bootstrap has caused a lot of designers / developers to become extremely lazy with their skills. If you must use a framework, use one that meets the minimum requirements, not one with all the extra fluff as well.
Perhaps a logo optimization. I don't want it to take more real estate that required to read it prominently. I'm using larger than I'd like to on the future site. I also wonder if we should treat the iTunes artwork and site logo differently at all, perhaps just in orientation...
For responsive site, I'd be down to build smart so it's not a hassle to convert anything. I've been recommended this: http://www.getskeleton.com/ thoughts?
Do you think the current blurb about what the show is is the best possible description?
960gs is a fixed width framework. There are frameworks that do grid systems in an adaptive way like Skeleton, and Bootstrap. 960gs was awesome when everyone was on <2560px width displays and smartphones were somewhat of a rarity. But now it's simply outdated and outperformed by more efficient frameworks with cleaner markup.
The left hand side of the page is chopped off for me: http://i.imgur.com/ZyJQZ.png
Perhaps your UI logic assumes a bigger screensize. I see a lot of sites doing this (designing their UI for big monitors); even Facebook does it. Personally, wrt CSS frameworks, I like skeleton way better than bootstrap.
I just worked on a site (http://www.ironcycles.com) and I used the Skeleton framework (http://www.getskeleton.com/). If you already use a 16 col grid then you should be able to just plop this in and get going! It is not 'new fangled' and shouldn't really scare your boss too much. It would probably be good to just not tell him :)
The only divs and classes I had to add were "four columns" or "sixteen columns" etc, for the container divs... other than that, it was all business as usual. Keep in mind I made a custom Wordpress theme for this site so there are a lot more classes added in.
I hear what you are saying when it comes to div-itis and class-itis but SOMETIMES (much to the chagrin of our freelance careers) you just gotta get it done when your working the 9-5. <shrug>
As far as I know, there is no standardized term for that. I also used the term "skeleton" in the past though. Unfortunately, there is a name collision with the Skeleton framework.
Do you mean a basic css reset?
Skeleton is pretty basic, it's made from a guy who works at Twitter, and I assumed helped with Twitter Bootstrap:
Normalize CSS is a good one:
http://necolas.github.com/normalize.css/
This is the grand-daddy of CSS resets, the one that started it all:
http://meyerweb.com/eric/tools/css/reset/
EDIT:
Your username looks like it says whore ads whore ads, not who reads who reads.
It works well, but it's still a bit buggy with how many elements Bootstrap tries to introduce.
If you want a more barebones grid, check out http://www.getskeleton.com. It uses essentially the same code for the responsive grid.
We use it on my companies website, http://www.moduscreate.com
I recommend the 1140 grid system. I find 960 too small for most modern screen resolutions and the 1140 grid system is pretty simple to make optimal for multiple browser widths anyway.
It seems to work well on most browsers; although, Opera has slight alignment issues which I found to be the same with 960 and Skeleton as well - plus you won't really notice it unless you're using lots of different column sizes with distinct borders.
I like Skeleton which someone else has recommended but it didn't support Windows Phone 7 at the time (pre mango) which made me wonder how many other devices it didn't work on.
>But starting with tools like Skeleton or Bootstrap that let me create an elegant, minimal grid template from scratch in a few minutes is generally what I want.
Actually that's exactly what I was trying to get at. I've been looking at skeleton too, but wanted to make sure I covered everything before deciding on a template.
Let me summarize:
Is that about right?
Edit: forgot to mention that I'm experienced in PHP, but wanted to have the option to branch out to Python or Ruby. I just need a good boilerplate to help get me started.
I saw on Reddit a few weeks ago a site that automatically reflowed depending on the window size to handle cases just like this. I can't remember what it was called but you can probably find it. There are also these toolkits that may help: