What is Reddit's opinion of
Foundation?
From 3.5 billion Reddit comments
100 reviews of this app found across Reddit:
I'm pretty bad at designing as well, but I use a few things in most of my projects that help quite a bit.
Foundation is similar to Bootstrap but a lot more comes styled out of the box. It also has a more fluid grid. You can customize quite a bit even before you download. http://foundation.zurb.com/develop/download.html#customizeFoundation
I also frequently use font awesome icons, since I'm awful at graphics. http://fortawesome.github.io/Font-Awesome/icons/
And for color schemes I like using http://www.flatuicolors.com
At my company I created something similiar using TypeScript and React. Before we used this http://foundation.zurb.com/emails/email-templates.html. The problem with zurb is, that the created html was super large, because it inlined css-classes inefficiently and the table-system created massive overhead. The Marketing-Team uses Visual Studio Code to create the Newsletter which is really similiar to writing pseudo-HTML. It works really well, they never had a problem yet, the static-typing seems to really help them. I build a simple frontend for it, that uses hot-reloading and iframes to make writing the newsletter really fast with a quick feedback loop. I plan to open source it, but not yet.
Get yourself a front end framework. Follow some simple conventions and you can get yourself a damn fine looking UI. Since this is the .NET sub you could always try Metro UI. My personal favorite. The two other most popular are probably Bootstrap and Foundation.
My information could be dated but I believe Metro and Bootstrap are both in Nuget.
Man, those templates look like shit! Loads of errors from Angular, busted UI elements, scroll bar overflow bumping on side menu flyout... hope they get that cleaned up soon.
Definitely looking forward to what they come up with though, the web framework is nice.
Susy is an interesting grid system. Instead of using classes you define your own and use their robust mixins.
Foundation is a popular alternative to Bootstrap. I believe it is modular and you can include just the grid system without the whole framework.
They're just showing an example without thinking in terms of their "mobile first" mantra. (BTW, I'm a big fan of Foundation)
The ".col-sm-12 or small-12" are referred to as break points. If you don't care how your site looks on large screens, then you can design your entire site using small grid break points. However, your site will most likely be used on large screens as well, so you should probably have a layout for them also.
If all you cared about was mobile devices, your html would look like this;
<div class="row"> <div class="small-12 columns">Headline</div> <div class="small-12 columns">picture</div> </div> <div class="row"> <div class="small-12 columns">words</div> <div class="small-12 columns">another picture</div> </div>
And your content would be layed out like this.
| small-12 |
|---|
| headline |
| picture |
| words |
| another picture |
Which is fine, if all you care about is mobile users. However, if you want your content to look good on large screens, you would want your html to look like this;
<div class="row"> <div class="small-12 large-6 columns">Headline</div> <div class="small-12 large-6 columns">picture</div> </div> <div class="row"> <div class="small-12 large-6 columns">words</div> <div class="small-12 large-6 columns">another picture</div> </div>
Now your content would look like this on large screens;
| large-6 | columns |
|---|---|
| headline | picture |
| words | another picture |
And would do a better job of filling out the space for large devices.
If you expand and collapse this page, you will see the grid in action, foundation.zurb.com/
I hope that makes sense.
edit: spelling and trying to get the table layout to work
Honestly, I prefer Foundation by Zurb. This could be because I mostly build applications that need to feel like a web app; this could be because I'm a dev, not a great designer; YMMV. I should also note that I haven't used/looked at Bootstrap since v1 or 2, when Foundation was released. At the time, bootstrap just wasn't that solid.
I hear it's great these days. Using a framework for production is something I definitely recommend - you're more than welcome to build your own, but why reinvent the wheel at this stage in the game?
I might get flamed to hell for this... but start out with a framework like Bootstrap or Foundation and work on customizing it.
It will give you some basics and mobile functionality. Plus from the looks of this a maid site doesn't need to be on http://www.awwwards.com/
You might find Zurb's interchange javascript library interesting for what you are trying to accomplish. Done client side instead of server side, but it solves the problem you are looking at http://foundation.zurb.com/docs/components/interchange.html
So what you can do besides writing a bunch of additional CSS to make your site look pretty is taking advantage of a front end framework like Bootstrap or Foundation. They both provide you CSS/JS to make your website look fancy.
You can take a look and pick the one that looks more attractive. Both provide many examples and templates to get started. If you don't like either, you can look up more front end frameworks. Don't stress on deciding, just pick one and roll with it, you can customize most components to your liking with a little more CSS. I do believe Bootstrap is the most popular one, but I could be wrong.
Yes, people write a lot of HTML/JS/CSS. You can use something like Bootstrap and Foundation to make it easier, but you still need to write the frontend yourself.
Unforunately you're very much in the wrong subreddit!
"Foundation by Zurb
...is an advanced responsive front-end framework worth taking a look at."
It's possibly as far from what you're looking for as possible :)
You might find something useful here: https://www.reddit.com/r/MakeupAddiction/comments/333xed/a_master_list_of_the_makeup_related_subreddits/
I am surprised that they released it without any 5 to 6 version migration guide.
Pages with v5 stopped working:
- http://foundation.zurb.com/sites/docs/components/buttons.html
- http://foundation.zurb.com/sites/docs/v/5.5.3
Quite a disappointment....
You are starting over. The tools you mentioned are part of a contemporary javascript & node js workflow. This is as sophisticated as any PHP will get.
I use Foundation. It's way easier than the options you listed and does a lot:
http://foundation.zurb.com/docs/
You can even use Composer to install it:
"require": { "components/foundation": "5.5.*" "config": { "component-dir": "public/components", "component-baseurl": "/components" }
Easy to get up and running, Sass/Less compilers can be integrated into your workflow later.
Good luck.
I'd be interested in seeing a line item comparison with the other two large frameworks out there: Twitter Bootstrap and Foundation.
Also does anyone know how well these frameworks play with HAML, Sass (or Less), etc.?
Ah! HTML Emails? Sadly that's my speciality at my current job - use Foundation, read the docs, and it will save you DAYS. I've collected a load of little tips over time I can also post if you're interested?
jemath says they use Bootstrap, and Bootstrap's grid uses floats. http://getbootstrap.com/css/
Foundation's grid uses floats, too - http://foundation.zurb.com/sites/docs/grid.html though they have a flex grid, too.
Use a CSS/JS library made for specifically for responsive or mobile first design as it can be a pain to do it from scratch. Two that comes to mind off the bat are Foundation and Bootstrap.
Well, I'm not exactly sure what I'm saying :). Given a bit more thought I think the updated party stances page would be a good start if the headers were decreased. Maybe put the party icon on the left side under the subject heading (Environment, O&G) with a the first point from the parties platform on the subject with a read-more link that expands it? Just throwing out ideas in response to your question.
I just took a peak at the source code. Have you heard of http://getbootstrap.com/ or http://foundation.zurb.com/? They are UI frameworks that contain a bunch of CSS and JS that are ideally suited to building a web page like this. They are also responsive so working on different screen sizes works well too. Using tables for non-table data isn't that popular anymore :).
I would say it depends on your goal.
1) Do you want to learn how to build (code) responsive web sites or 2) Do you want to leverage what you know about responsive design and not worry about coding as much?
If you want to learn the intricacies (fight through cross browser issues, deep dive into obscure ways to solve those issues, etc) and have the time, you should continue working on your own framework.
If your goal is to know enough code to produce responsive web sites quickly and in order to make money (and to be efficient) you should definitely use a framework.
You can even use as much or as little of the framework as you need. (Maybe you just want the responsive grid, for example, and want your own unique style). The only reason you'd code your own grid is to learn it.
BTW, you should checkout Zurb Foundation. It's an alternative to Bootstrap and I find it's very enjoyable to work in. (I have nothing against Bootstrap, but it's just my preference).
If you're looking for a framework, http://foundation.zurb.com/ has a good model that I found easy to use. Some of it is kinda wonky, it uses the column style layout, but it's all really responsive and even comes with some built in js buttons and what have you.
I don't know exactly what you're looking for, but if you're looking for responsive frameworks, that fits your needs I believe!
I crafted and created responsive e-mails for six months as an internal project and it was pure pain. Mail clients are so much behind.
But there is a great framework for those who seek help with responsive e-mails: http://foundation.zurb.com/emails.html
Might want to check out bootstrap-sf1, though it isn't being actively maintained right now and you'd need to buy the proxima nova soft font for it to look right. Doesn't have the latest modal fixes for mobile either, so you'd need to get those in.
More generally, if you want to be hip, there are some newer options out there like foundation (http://foundation.zurb.com/learn/features.html) that are getting love. Depending on what you're doing, might want to check out ionic too.
If you're doing lightning components, stuff is coming to help.
Fundamentally it takes several years to become a competent web dev and you are looking to shoe horn that into two weeks. Whoever build the Corsair site you linked to will likely have decades of experience.
Short term you could look at using a frontend framework like Bootstrap or Foundation These provide a toolkit of components like grids and menus that you can quickly bolt together. You won't understand how any of this works in 2 weeks but you have a shot at getting something delivered.
Long term you need to spend 5-10 years with HTML, CSS, JS, Python, PHP, Ruby, Java, SQL, VCS, ORM, CI systems, profilers, debuggers, blah blah blah
This is the reason I prefer Foundation over Bootstrap. It's styled really lightly - so much you won't leave it uncustomized. Which is also a reason why almost every site doesn't look pretty much the same (as with Bootstrap, IMO).
Moreover, Foundation is semantic; you can customize the stuff you want (as with Bootstrap); it's written is Sass and the styling isn't such a pain.
In the end, Bootstrap is OK for me on the backend, but for frontend Foundation is definitely my framework of choice. Give it a try and see for yourself.
Ultimately this will lead you to using frameworks and libraries. Which is absolutely the standard, encouraged really.
See:
etc.
As others have pointed out, go ahead. You have to start somewhere, and the fact that you're wanting to do it proves your interest. It goes without saying that you will naturally want to tweak the copied code out of curiosity.
Doesn't hurt to credit the author too. A simple comment to the page you found the code is fine. Eg:
/* John Smith made this, it's awesome! Find it here: www.johnsmith.com/awesome.css */
button { background: #09F; padding: 10px; color: white; border: 0; }
Although I must admit I didn't credit much when I was learning... :(
Looks like your copy pasting code from the foundation framework - you actually need to be using that framework for those classes to do anything. Download it (the "essentials" version is probably best for you), include the foundation.css file, then your grid code like class="large-4 columns" will work.
I've been using bootstrap for about 18 months. It's pretty easy to get going and it makes putting up the front end much quicker than coding it by hand unless you have already built up a library of your own components and styles. In Bootstrap your basic styles and grid layout are already done, and a lot of extra functionality is already included, like carousels, breadcrumbs, pagination, etc. A lot of experienced devs and designers object to the fact that most bootstrap-built sites look very similar, so they feel like a site built using bootstrap is just a cookie-cutter site and they can do something unique without it, and they're right, but it comes down to whether their skill makes their unique thing better than a bootstrap site or not. It's a question of how important having a unique-looking site is to the builder/customer.
I haven't used Skeleton but it sounds like it's mostly just the grid framework with basic styling on form elements and lists for consistency, but without the extra components, which is a nice compromise because you get the fluid grid layout without the bloat of components you're not using. You can build or add in any of the components you want elsewhere.
I haven't used Foundation and don't know much about it, but looking at its website it seems like it's a full front-end framework. At your stage it's probably worth researching to see which is the better framework for your anticipated near-term projects and go with it. Get good with it, and then after you're good with one come back and try out the other. You'll probably be able to pick it up pretty quickly at that point.
Recently, Foundation is my favorite of these. I write a lot less CSS, their grid and responsive utilities are good, and it's written on SCSS, (which I happen to know slightly better than LESS).
Modals and other interactives just seem to make sense the way they do them. There's less unnecessary markup than Bootstrap, IMO. And I think the documentation is better than the others, which is important for me because I don't spend a ton of time writing front-end code, I just want it to be fast to write and easy to maintain.
It's a responsive framework similar to Bootstrap and with their grid and type settings whatever you put together may not be art, but it will at least be clean, consistent, and good enough for whatever demo you might be putting together.
They also have some templates that might give you some ideas on how to structure your content.
Gmail is only the beginning of your headaches for HTML email. Unlike in the browser world where there is a short list of major browsers and they've all more or less adopted the same standards, there are hundreds of email/webmail clients and many of them are way behind the times when it comes to CSS.
The simplest route is often to use a proven pre-made template. If you want to build your own you'll have to rediscover the lost art of the table layout and make use of email specific frameworks like Foundation for emails. And unless you have a very small mailing list and know exactly what software your users will view the emails in, you should probably sign up for a service like Litmus in order to see how your emails will look across a variety of platforms.
Seriously, email is giant fucking headache, and if you don't learn best practices and do some testing, your emails will end up looking quite broken for a lot of users.
Sorry I don't know of any great videos / tutorials but I'll try to help a little.
> If I align things to the left-most column's leftmost edge, won't that be right next to the viewport's edge then?
It depends on the project, but in Layout Settings I typically check the box that says "Gutter on outside". This prevents that issue you pointed out about slamming content right on the left wall.
To address some of your other questions about generally designing on a grid, there are some resources I'd recommend reading to get started with an idea of how people (specifically developers) tend to think about content in columns.
https://material.io/guidelines/layout/responsive-ui.html# http://foundation.zurb.com/grid.html
These are 2 examples, there are obviously many more.
Are you doing a responsive web design? Mobile app? Desktop app? Are you designing on a 12 column grid or something different? There are no hard a fast rules, but consistency is key.
It seems like it's not common knowledge, but there are some frameworks out there specifically for solving email problems. I'm a fan of Foundation http://foundation.zurb.com/emails/email-templates.html
They work basically like Bootstrap does, but you use a "compiler" that translates the code into proper, inlined, tables. Works for Outlook and everything. They may be a bit cumbersome to use at first, but it saves me so many headaches.
I finally figured out how to do CSS well after studying the CSS for Bootstrap and Foundation because I wanted to know why their CSS looked so much simpler than mine.
I used Jade (it's called Pug now, btw, after a legal fight) for a year and a half in our workflow, but now I'm absolutely in love with Panini. It's from ZURB, the folks that make the Foundation framework.
It supports using layouts, allows you to store data in JSON files (or YAML), and inject it straight into your markup using Handlebars templates...which is great because we built Handlebars into our new CMS / e-commerce platform, meaning that I don't have to spend time creating partials after the fact.
Get into website development. I'm a "web designer" but I still build responsive websites using a responsive framework called Foundation. Everyone has their favourite, that happens to be mine. Who's getting hired - a designer that strictly designs, or one that knows how to code?
Most companies that I've worked for use either Bootstrap or Foundation in order to build websites.
Also, brush up on WordPress. It's used all over the place.
Start learning JS. It's huge now, and there's no signs of it slowing down.
Zurb just released Foundation 6. In their own words: > A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.
I've been using Foundation for about 2 years now, and it just keeps getting better.
What are you looking to do, spruce up the look and feel of the website? I'm a back-end guy, and not really a designer, but if you have some development experience, you may be able to leverage one of the many CSS frameworks out there. A small sampling:
Alternatively, you can probably purchase a template that will get you mostly there & have all the responsive bells and whistles.
If you can clarify what you need done, I can try to help (a bit busy this week/weekend) or perhaps point you in the right direction.
Edit: took a look at your site & it seems you are on wordpress. If you want to get started quickly, I assume you can get a politically themed 'theme' either free or for a reasonable cost. Once you have more time to devote (or more technical supporters), you can revisit the design.
Example: http://themeforest.net/category/wordpress/nonprofit/political
(note: I've never used these templates, but I know this vendor has been around for some time, not sure if that means anything)
Looks like this page is missing a comment tag somewhere. http://foundation.zurb.com/templates.html
also a 404 here http://foundation.zurb.com/sites/building-blocks.html
There are so many buggy things on the docs, I wouldn't go near this. It lacks refinement, and I don't see a big enough positive to leave bootstrap.
EDIT: Now those pages are back
I have also liked Foundation CSS a lot too. It's like other frameworks out there so it works like you'd think for the most part. Also, no point in re-inventing/re-writing everything. Check out the Foundation kitchen sink for what's up with that.
Have little experience but feel my experience is similar to what you wrote about. You can use and framework or theme with Wordpress. I used jointswp (a blank starter theme) for my last project and used Foundation front-end framework for all the layout, doing whatever I wanted.
This may not be the best solution as I have limited experience. But coming from the world of wanting to build my own thing, I thought everything worked awesome.
Perhaps others can chime in if this isn't a good thing. Good luck!
What is your background with HTML/CSS? I definitely took it for granted at the time, but learning the fundamentals in school has been essential. I see a lot of people trying to blow through this, but it is essential. It's trendy to talk about javascript/whatever language or angular/whatever framework, but the common factor is still HTML/CSS - the skeleton and skin of everything.
Thus, while it may become an afterthought down the line, an intimate knowledge of how these things work is key when things grow in size and confusion.
To answer your question, have a look at some simple templates/themes. They should give you something to chew on and think about in terms of common patterns you'll work with in the future.
http://getbootstrap.com/getting-started/#examples
http://foundation.zurb.com/templates.html (themes at the very bottom)
Last, my advice would be to have patience and weather your ambition. Start with something dead simple, so simple that you don't even feel it's worth your time. It won't be as simple as you imagine. Your goal should be to complete something. Completion is extremely important. Also, github! Start to build a collection of these simple, completed works that you can show off!
Echoing what everyone else has said -- where I work we develop for "types" of devices rather than specific screen sizes. Our breakpoints are:
- large desktop <= 1800
- desktop <= 1440
- tablet-landscape <= 1024
- tablet-portrait <= 768
- mobile <= 640
For each design, we have anywhere from 1-3 mockups. It all depends on the content, the client, the communication between the designer/dev, and the timeline.
As for which devices are most common, a quick Google search returned this data, but I have no idea how reliable/accurate it is. If you have analytics up and running on your site already, you can see the most common devices with which users are accessing the site and tailor your designs accordingly. However, it doesn't break the stats down for iPhones the way it does for other devices, so that might not be helpful. That's why we stick to the breakpoints, and our mockups are just roughly "desktop" or "phone" sized.
It's probably worth noting that most frameworks (e.g. bootstrap, foundation) use four breakpoints. I think that's probably sufficient for most projects (rather than the five we use).
Responsive Web Design with a mobile-first approach lets you build websites that work across many device sizes. It is a combination of:
- fluid images
- fluid grids
- media queries
Ethan Marcotte's original article on Responsive Web Design explains the fundamentals.
Using a mobile-first approach means designing for small screens first with basic CSS and then using @media queries to apply different or more complex styles for larger screen sizes. For example:
h1 { border-bottom: 1px solid red; } @media only screen and (min-width: 48em) { h1 { border-bottom: 2px solid blue; } }
You could also take a look at Foundation by ZURB. This is a web framework for building responsive, mobile-first websites.
you could start by checking out the template section on Zurbs Foundation: http://foundation.zurb.com/templates.html There are some basic and advanced patterns you could recreate with focus on html and css-structure. when you finished one you should get a stepf further and fill it with design elements
> Is this sort of thing useful?
Yes, if it can be more easily condensed and readable than the current training guides; there is a lot of information there, but the formatting if a bit daunging for the likely new players who are referencing the data.
>Is the terminology clear and explained well enough?
Perhaps too analytical? Why have "Time value" when "Ideal gold investment per hour", or something to that effect, is more concise at the cost of some screen real estate?
>What do you think of the appearance of the page?
Perhaps a range slider for the "Min. practicality" option instead? I'm not sure if the CSS rules for the Wiki would allow for this though.
>Would it be useful to have about a paragraph guide for each method explaining how to do it with tips and tricks? Right now it's just lorem ipsum.
Perhaps. Some skills will benefit from skilling tips, such as 3-tick cooking and displaying/instructing how to efficiently place and collect box traps while training hunting.
I don't know if I would worry about "standard" web widths of 960 anymore. And don't get caught up in super-specific widths like the 320px for iPhones. The 6+ is already bigger, and there are tons of Androids that are 340, 380, etc. Also, if you're not building an app, but a website, you don't need to worry about the carrier header on phones.
Regarding media queries, the Bootstrap ones listed are a good start, so are Foundation's. But it's basically small, medium, large, and to be honest depending on the content there is sometimes very little that changes between breakpoints. Don't fall into the trap of forcing layout changes just because you opened another media query for that size - sometimes all you have to do is up the font size and float a button somewhere.
And that's the key - content-based breakpoints. It all hinges on the page content. For us, we often end up with lots of in-between tweaks for things like making sure paragraphs of text don't get too wide (or stay too narrow) or Navbar elements don't wrap, etc.
As long as you start mobile first, you'll figure it out. Get it working on 320-480-ish screens. Then move to tablets, tweak it until it looks right, move up again, repeat. It's a lot more work to code the desktop version, then go back and do smaller sizes, just because of the cascade.
I believe what you want to put together is either a style guide or just a basic "kitchen sink" rendering of your styles. Examples of a style guide: BBC Style guide
For the kitchen sink idea take a look at how Bootstrap and Foundation Have put their stuff together. In the end, its probably just looking through the CSS and using the classes defined with the appropriate HTML.
I'm pretty good with Foundation, however I have been reading about Foundation for Apps for a while now, which uses AngularJS. Is it worth switching from Foundation to Foundation for Apps?
- edit: typo
Tables...shutter
Here's a great place to continue learning: Lynda.com
Bootstraps a framework. Use it as such. There are tons of other frameworks available that will hep you learn even more. Try Foundation 5
I've been at the other end, people using photos of mine without permission and passing off as their own. If it's not yours, ask. If you can't get in touch, credit them with a link/name. You can also check out unsplash.com for free photos every day as a starting point. You can also purchase stock photography online if you're working on a project where you'll make money.
Hope I helped, Good luck!
I don't meant to detract from the topic too much, but I just found your carousel when looking for a carousel to put into a project built on Foundation. Foundation's docs basically say "fuck it, just use Slick Carousel instead of ours, it's better."
Really cool to hear the story behind it -- very inspirational. And holy shit yes, it is better, best one I've ever used.
Would something like this fit the bill? I've run into a couple of these "guided tour" libraries before, but not sure if that's what you're looking for.
Take a look at this.
http://foundation.zurb.com/docs/components/interchange.html
No need for server-side scripts, or writing custom JS. For most use cases, including yours as far as I can tell, interchange should do the trick.
I believe you can download and use it separately from Foundation.
Bootstrap is great, and I use it a lot. But check out its alternatives too, such as Foundation, which just released a new version. I haven't tried it yet but it looks like it packs a little more punch than bootstrap in terms of features.
It's umm.. I don't want to say it's bad, but it could use a lot of improvements.. First of all as others suggested make the website valid. In future you might want to consider coding in HTML 5, but that's not really important.
If I was you, I'd check out these templates http://foundation.zurb.com/templates.html and maybe build around those for few days. Or don't whatever's best for you mate.
EDIT:
the menu bar could be smaller and the spacing is really bad
alignment, draw yourself a grid and give alignment of pictures and text a go, these really should correspond with each other and give a good impression as a whole thing
A few months ago I created my own 'mashup' frame work that combined 1140px grid, with skeleton, html5 boiler, and {less}. I called it the DirtyBastard and it was cool. About one week later, I found out twitter's bootstrap was released, which was essentially everything I had done but better. So I stopped updating DirtyBastard :(.
I just recently started redoing an app based off of foundations grid system. I've also been pulling chunks of code the newest version of bootstrap. I highly recommend both of them. The moral of the story here is that you're not limited to using just one of these grids or frameworks. Take a couple and put them together, create your own DirtyBastard!
Recently I built a framework for myself using a custom Normalize.css file and a basic grid. It has worked so far, but I've had issues with the column wrapper registering at 0, which is a problem for a lot of the layout I do.
So I went to look for a good all around framework to customize for my own needs. I found Foundation, a project by ZURB to create a framework for apps/webpages. There are lots of neat things about how it works (semantics and responsive capabilities) that make it a great starting point for most projects.
Anyway, yeah, Foundation, it's the best framework that's out there right now, and it's real power lies in customizing it to match the project 100%.
I've long been a fan of and hardcore supporter/user of Foundation. There's an awesome starter theme based on Foundation 6.4.3 called FoundationPress which includes a bunch of basic templates and functionality surrounding Foundation's components and features.
It's lean and thanks to Foundation's modular approach, very easy to remove unnecessary components/functionality from what's being compiled and output to app.js and app.css simply by commenting out the appropriate lines.
Add in a dash of ACF Pro and you've got a lean, highly-customizable theme with excellent Flexbox support.
Not entirely true - Gmail no longer strips style tags from the header. Using something like Foundation (essentially stripped down Bootstrap for emails) makes HTML emails almost bearable. Outlook will always have problems (2000 and 2003 are actually the best versions of Outlook for HTML emails - 2007-2016 are awful) but Foundation helps fix a lot of things.
Correct. You want to copy everything under Jupiter > stylesheet that you need into you child theme exactly like the structure in the parent. The structure should mirror what is in the parent, but only the files you're going to be updating.
This theme appears to be for sale on Themeforest and uses Foundation as it's base CSS. Was there documentation that came along with it that you can reference? You might try searching the comments or contacting support for specifics, becasue I'm making quite a few assumptions based on my experience without seeing code.
I just started testing foundation and hit the same issue.
I don't think you are doing anything wrong because the issue is that foundation.css doesn't include a class called row. I think that's something that is necessary for the whole thing to work.
EDIT: I just realized, the default download uses the XY Grid but their documentation all shows what I think is the Float grid. So if you use the examples from this page with your current setup and they work then that's the issue: http://foundation.zurb.com/sites/docs/xy-grid.html
If you want to use the examples with row, go back to the download page and pick Float Grid instead of XY Grid
Thanks, seems like sound advice all around!
And yeah, I want to convince the people who put out Foundation to prevent sites from building if they fail to meet minimum accessibility requirements! Alternatively, I might just build a new front-end framework that forces people to do better.
I use Foundation for personal projects. The break points are reasonable, and you can make as many as you want as you go along too (if you are interested in the framework).
Here is the doc with a list: Foundation Framework
It sounds like you need something like Foundation or Bootstrap to get you started. They're responsive CSS frameworks (I have a feeling that grid that you're talking about comes from a PSD of one of their templates but that's essentially have responsive works, it's a giant grid and elements on the page move and re-size accordingly) that do a large part of the work for you.
No Problem. Writing your own css isn't bad practise but having bootstrap or foundation, you can use pre-defined css classes to create grid, forms etc without writing you own css.
Well if you want to design the back-end but not the front-end, you could build the server part yourself and then use Bootstrap or Foundation.
A mock coffee shop or any simple 4 page site (Home, About, Photos, Contact) would be a great place to start. A blog can be tricky for new starters. The first site I ever made was a silly website for my dog and it was a lot of fun. Here is the site I made http://pugbike.com/pepper
If you want to use a starting template I'd recommend the Foundation 6 Zurb template. It has some great tools built in, and it's already setup to use SASS for your CSS. It also includes Panini handlebars which will prepare you for templating and making your code reuseable. http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template
Both Bootstrap and Foundation support IE9+, so both should be suitable for your needs.
If you don't want your site to look bootstrap-y, download the source code version and spend time modifying it to suit the designs of your website.
Yes, I would really recommend going to 6. It's leaner and has some good features.
Also recommend you install Yeti, gets you up and running really fast and you can experiment with it easily.
The jump from Bootstrap to F6 isn't too bad, once you get used to the usual "similar but different" syntax issues.
Yes, this you can do it in this way, however:
a. This requires that you know what you will / will not use from the very start. If you need to get additional components then you need to redownload another copy with those enabled, compiling locally via gulp/grunt eliminates this issue.
b. Once you've cached bootstrap (via NPM or bower) you no longer need an internet connection to include it in multiple projects.
c. Using SASS is not something unique to bootstrap. Zurb foundation sites does it as well (in fact they used SASS natively before bootstrap did which originally used LESS). The reason they both do is simple, it remains the most effective, flexible and maintainable way for devs to build front end architecture and if you learn to implement properly with one, you can do so with the other or indeed any preprocessor framework bourbon.io for example.
Outlook is an absolute bitch. Define all of your image dimensions within the img tags, for starters.
Also, Zurb if you want to stop taking asprin every time you code an email.
If you want to get stuff done fast, I'd say to look up free Bootstrap or Foundation templates like http://startbootstrap.com/ or http://foundation.zurb.com/templates.html and download them, play with them a little and look up some of those weird class names like col-xs-4 to get the short grasp of it. They both have a lot of common web features built into them like accordions, responsive menus, etc. and accomplish a lot of the grunt work for you. Both have excellent documentation and support. Then when you get the time I would inspect the CSS classes and see what properties they are using and understand how the pieces fit together beyond the surface. If you have any questions hit me up! If you want to learn how to build a certain menu or widget, just Google css menu inspiration and find an example similar to yours and inspect it to get a clue as to how they built it. The cool thing with CSS much like Photoshop is that there are quite a few ways to accomplish one thing.
Good work. Did you try using Media Queries? They will size items proportionally based on resolution. Another option is to use a framework with a pre-built 12 column fluid grid or write one yourself.
Front-end Frameworks http://getbootstrap.com/ http://foundation.zurb.com/
I've been looking at http://purecss.io/ but to be honest I haven't use it in production. Playing around with a framework is much different than actually using it to solve real design challenges that crop up. There is always http://foundation.zurb.com/ as well. I've heard good things about the latest release. I don't mind Bootstrap, I still really like it's push/pull system, maybe I am just getting bored with it :P
There are so many responsive frameworks now though, you could spend days just trying them all out. Each got a little different advantage, and something they are probably not telling you. Watch out for Flexbox frameworks that are really popular now (unless you know for sure that you don't need to support older IE).
Bleh - if this was live somewhere I'd happily investigate the problem further but advice will have to do instead:
- This is probably easily fixed by inspecting the problem area with your browser's developer tools. If you don't know what these are google "<browser name> Dev Tools" and look for "inspecting elements". These are your best friend as a web developer. Every web developer uses them every single day - typically as a popout window while they work. If you want to learn web development, you need to know your way around a set of Dev Tools. Chrome's set has a good tutorial here.
- Comment out all your own styles. Is the problem still there?
- Comment out all your own HTML and replace it will the HTML demo here that you're trying to replicate. Is the problem still there?
If either of these steps fix the problem, slowly start reintroducing your changes one at a time to see what's causing it.
There's really nothing particularly special about this site's design...it's just plain-old-HTML-and-CSS with a simple JavaScript smooth scrolling effect, at least at first glance.
You should be able to build something similar with the following, as a starting point anyway:
http://foundation.zurb.com/sites.html https://callmecavs.github.io/jump.js/
Consider redoing the website using a CSS framework.
http://foundation.zurb.com/sites/docs/kitchen-sink.html
Your site relies on a lot of "default" styling of HTML elements which is why people are telling you it looks dated.
Also, consider rewriting your URLs to not show .php
Hey, I'm still a bit shit at contributing, I forget, I hardly do it. But, I cloned it and put to my own repo, you could essentially just clone it and it'd be fine.
So basically, I added gulp-connect, you'll need to run npm install --save-dev in terminal/CMD once you've cloned / copied the new gulp file and HTML (I just added "THIS IS A TRIBUTE" so I could check it worked).
So, I've set two ports, 4000 and 4040. No main reason, I just like those. There's two paths, one for the root (index.html) which is set by [dir__name] ( "./" does work too, but gulp-connect is being funny about it).
You simply run "gulp connect" and it'll load the server. Also, I'd recommend using log of some sort, so you can see when stuff happens. Also, I didn't chekc the CSS or such, but I can if need be.
Also, like in my jekyll thingy, I have 'gulp serve' task which runs multiple tasks at once. It's like a build command essentially, totally worth looking into.
https://github.com/BillyPurvis/Brendan-Norris-Foundation
Edit: For that little css error, it's to do with line 41 on the scss file, I did some research for you :http://foundation.zurb.com/forum/posts/36389-what-is-import-utilutil
Okay I have to admit here I am SO very new to this... so I really have no clue what I'm talking about.
When I followed the Foundation for Apps CLI setup guide here the first time, it said I would be using a local server... and when I ran "npm start" it automatically opened up a "localhost:8079" tab and there was my page. I guess I assumed the same would work for Foundation for Web... maybe that's where I went wrong.
Ultimately I'm trying to force myself to learn all this workflow stuff... because normally I just use Sublime Text 2 and do it all manually... but I know that's not how it's done.
The idea is to start a server for prototyping before hosting, right? How should I go about that... am I totally off track?
Web moves pretty fast, everyone is learning :) There's a bunch of resources both free and paid here: http://zurb.com/university
If you're looking for Foundation specific stuff, there are tutorials here: http://foundation.zurb.com/learn/tutorials.html
Other than that, one thing that helps me is downloading templates and seeing how they do things.
>I'm a older woman, mid 30's
Almost 32, I cried a little when I saw this :(
I think your issue is "information overload". With web dev being a growing field and online learning taking off, there are just so many things available to you. Get down on the basics. HTML, CSS and Javascript if you enjoy front end. Then check out jQuery.
As far as front end frameworks, Foundation is nice. It's got a bit more meat to it than Skeleton and feels less bloated than Bootstrap. I think it's important to understand how things work (understand positioning html elements and the differences etc) but I don't think using a framework is "cheating". If someone wants a site and you make it, I'm sure most wouldn't care if you hand coded it from scratch or used Bootstrap and then customized it.
http://foundation.zurb.com/ provides classes in which work very well on touch screen devices. Having built many sites that are for touch screen devices with the framework, it gets my seal of approval. It's less style-intrusive than Bootstrap, more helpful than say, Skeleton, and will help you quickly prototype out a functioning UI. You'll later be able to go back and customize things without much fuss.
I don't see any negative margins here: http://foundation.zurb.com/grid-1.html which is what I assumed you was refering to.
I'd like some examples of real world scenarios that couldn't be done without negative margins...
Agreed with Foundation, doesn't force you into a corner like Bootstrap as far as design goes and the grid is great. If you're going the Angular route, they also have http://foundation.zurb.com/apps/ but it utilizes Flexbox, so depending on browser requirements - you may want to wait a bit.
Have you checked out Foundation? It's similar to bootstrap and won't have that bootstrapy feel to it. If you want to stay with bootstrap, just use a custom CSS file. Or SCSS if you feel like it.
Mine is fairly simple. If handed a PSD:
- Export any needed images from the PSD
- Get Foundation's Grid System
- Code within SublimeText2 - Use Emmet because its pro.
- Show to client, make final requested edits and collect $$$
..and that's it.
They come with examples and a base template but it's so basic there is no way your teacher could complain. You will have to decide on the actual layout and implementation.
Zurb's Foundation uses Sass and there is an official Sass port of Bootstrap. Bourbon Neat and its accompaniments is another fantastic framework that is built with and for Sass. I also am not sure if LESS has anything like Compass to compare to. I, like /u/MadFrand, thought I read a post posted here about Bootstrap using Sass in their next version but I can't seem to find it either.
One thing that I love about Sass that I don't think LESS has is its Sassy CSS syntax. CSS without braces and semicolons makes your stylesheets shorter and easier to read IMO.
This is what you want to do. As far as the HTML and CSS to do what you want, I'd suggest looking at how a framework like Foundation does it with their block grid. If you use Foundation or just do something similar, you can then just output an unordered list and let the CSS arrange everything.
Foundation is great and will save you a lot of time building responsive layouts.
You won't need to make up any classes for hiding elements for a particular screen size. They've covered that and you can read the documentation on it here: http://foundation.zurb.com/docs/components/visibility.html
I would check out a framework like Foundation (http://foundation.zurb.com/) that does a lot of the UX thinking for you out of the box and a built in grid system for responsive layouts.
I'm also starting to freelance, though as a designer, so if you land any projects that need front-end/UX work feel free to holler :p
I've never built a web-app before (mostly just websites), but I've had a lot of friends building web-apps that have talked about using Foundations App Front-End Framework over Bootstrap for apps. Overall, I think Foundation has less bloat than Bootstrap anyway.
Alternatively, if you're just looking for a solid grid system, I would definitely recommend Skeleton. It's super simple, super small, and great for when you're only looking for the responsive grid component of a framework.
I built a starter repo with a friend that includes a whole bunch of goodies and is setup just the way we like to work. We call it Pillars (because it holds your app up and foundation was already taken! :p)
i mean, you can literally go to the bootstrap website and customize all the colors, fonts, and a shit ton of other things and it will build the css for you.
but you can just as easily customize any responsive grid system like /u/raskulous posted and just link your own css file after to show you've customized the stuff yourself.
but to answer your questions, yes, bootstrap or a full framework would probably be the easiest way for you to bust out a 10 page site that's completely mobile responsive out of the box.
i would suggest bootstrap or foundation
This subreddit is about: http://foundation.zurb.com/
I'd be able to help you out with a website if needed, though. PM me.
Otherwise, the sidebar of this sub (http://www.reddit.com/r/nonprofit) has some good links on starting a non profit.
I personally think a website is better, much more room for expansion and you can build it up in logical layers.
Build the basics of the site in HTML. Jazz it up with CSS. Add in some JS and jQuery to make it more interactive. Incorporate the Foundation framework to make the website responsive on mobile and tablet devices and so on.
I'm not a designer, so take my advice with a pinch of salt.
I'd say less is more there's lots of little "over designing" I'll mention a few:
- The shadows on the right of the content,
- The degrade of the buttons right of the "at a glance" section and it's rounded borders on the last button
Also the "click on each section" kinda means that it was not clear they can be clicked, maybe just put them one over the other with a button on the side that says "more information", it will make the page longer, but it should look better.
Finally the text is too small and there's too much of it, If you can't find a way to reduce the text at least make it bigger, Some people might need to zoom in to see, which IMO means it's too small.
Also adding a big simple button on the main image which said something like "enroll now" might be good so people know what to click after they were convinced.
What I did really like was the images and color palette, both look pretty nice. There seems to be a lot of content, anything that is repeated or that you can remove/hide will help the site a lot, stuff like "more information" or hiding answers to querstions in the faq would be nice (clicking a + to show the answer, and putting all 3 faq categories in one page could help unclutter it).
Edit: Some tab-bars like this could be useful for the retreats section, put each one in a tab and add information inside it. And maybe put the whole retreats section under one button of the "at a glance"
Edit2: Maybe replace the 2 big quotes next to the video with some small (less than 20 words) explanations of what leapyear is in a big nice font? And put all quotes and inspirations for applying in another "Why leapyear" button?
Edit3: did not realize the Apply now was a button, maybe remove the speech bubble and just leave a button?
It might be in your best interest to look into Bootstrap (Foundation is another one, but I've never worked with it) like some others have suggested. They have a lot of premade classes that allow you to worry more about structure, and less about how well you're coding it.
I'd take a thorough look into their docs.
I've tried Foundation too. Both are good, and widely used (Braintree's website uses Foundation). Not sure if I agree with Foundation's design aesthetic at all. Like switches:
http://foundation.zurb.com/docs/components/switch.html
Totally bogus. That's not how you draw radio buttons, it's totally against what people are familiar with.
The backend is based on an open-source classified script call OSClass (http://osclass.org/). It's really meant more for posting/selling items in a way similar to Craigslist - but it also works extremely well for this since it handles 95% of what I needed to do (plus a lot of stuff I didn't need to do).
The frontend is Zurb Foundation (http://foundation.zurb.com/), with some light tweaking. Zurb's comparable to Bootstrap, but I find it to be more professional - both in terms of design and developer use. I basically just took the default OSClass theme (which I think it based on Bootstrap) and molded it into what I needed (including dropping a lot of unnecessary things like price, seller location, etc).
Overall, it wasn't a super difficult project - just time consuming to get all the pieces put together.