concrete5/Foundation 5 boilerplate
Permalink 1 user found helpful
I made a boilerplate for my concrete5 projects with Foundation 5 frontend.
Let's realize the whole foundation stuff for concrete5!
Help is appreciated!
You can find the boilerplate on github:https://github.com/core77/c5f5boilerplate...
Thanks.
vladd
/Edit: Link fixed.
Let's realize the whole foundation stuff for concrete5!
Help is appreciated!
You can find the boilerplate on github:https://github.com/core77/c5f5boilerplate...
Thanks.
vladd
/Edit: Link fixed.
I generated the dir with 'foundation new MY_PROJECT'. This way its described in the foundation docs.
There is a setting in foundation, where you can choose whether you want to use the Open Sans font or not. So there was no necessity to define a font url. Why should I do that?
There is a setting in foundation, where you can choose whether you want to use the Open Sans font or not. So there was no necessity to define a font url. Why should I do that?
I have a theme in the marketplace that uses an older version of Foundation. I am now re-working it to use the latest version of Foundation.
http://www.concrete5.org/marketplace/themes/foundation...
Like yours, it is essentially a "barebones" theme for designers.
I hope to release version 2 by the end of January, which will be based on Foundation 5.
http://www.concrete5.org/marketplace/themes/foundation...
Like yours, it is essentially a "barebones" theme for designers.
I hope to release version 2 by the end of January, which will be based on Foundation 5.
Saw your template in the marketplace. You have a lot of stuff in there.
My boilerplate does not conatin any custom blocks or anything else. It's only a really bare c5 package strukture, and sass/foundation files in it.
The only thing I realized in the starting template is the default collapsible foundation 5 top-bar.
From this point I want to go ahead with the custom stuff I need or my client needs.
My boilerplate does not conatin any custom blocks or anything else. It's only a really bare c5 package strukture, and sass/foundation files in it.
The only thing I realized in the starting template is the default collapsible foundation 5 top-bar.
From this point I want to go ahead with the custom stuff I need or my client needs.
UPDATE - There is a theme awaiting approval for the marketplace that will be using Foundation 5. It should be available within the next week or two.
Please keep me posted in this!
Thanks, Mieke
Thanks, Mieke
Since the clicks on my foundation 5 integration are increasing I fixed the link.
https://github.com/core77/c5f5boilerplate...
https://github.com/core77/c5f5boilerplate...
Great to see the link is working again!
Thanks a lot for all the work, quite a job you did!
Love the integration of Foundation 5 in Concrete5 :)
Mieke
Thanks a lot for all the work, quite a job you did!
Love the integration of Foundation 5 in Concrete5 :)
Mieke
Did you test it?
Improvements needed somewhere?
Improvements needed somewhere?
Hi Chris,
just installed your boilerplate on my local server now and all seems to work well. i'll need some time to find my way out but i'm familiar with foundation 4. must say that i'm new in this way of working though and i'm not an easy php scripter (yet) ;^), i play and try my way around..
My plan is to make page-templates out of modules-templates, so building a site will go more quick and clean. Besides that i'm thinking about making blocks/block-templates to implement.
Don't know enough yet about sass and don't realy understand the config.rb (do i need it?..) so i hope i can work with css only for the start?
Thank again Chris for your time, if you are interested in the proces, let me know.
Have a good day, Mieke
just installed your boilerplate on my local server now and all seems to work well. i'll need some time to find my way out but i'm familiar with foundation 4. must say that i'm new in this way of working though and i'm not an easy php scripter (yet) ;^), i play and try my way around..
My plan is to make page-templates out of modules-templates, so building a site will go more quick and clean. Besides that i'm thinking about making blocks/block-templates to implement.
Don't know enough yet about sass and don't realy understand the config.rb (do i need it?..) so i hope i can work with css only for the start?
Thank again Chris for your time, if you are interested in the proces, let me know.
Have a good day, Mieke
config.rb ist a compass related file. And yeah, it's important.
When you compile the scss files with "compass watch" (terminal) compass takes a look in this file.
The css-dir is defined here, which is "/" -> the concrete5 template root dir. Cause of this setting the main.css is in the template root.
There are some other settings there, for example when you go for production, here you set the output style of the (main.)css to compressed.
When you compile the scss files with "compass watch" (terminal) compass takes a look in this file.
The css-dir is defined here, which is "/" -> the concrete5 template root dir. Cause of this setting the main.css is in the template root.
There are some other settings there, for example when you go for production, here you set the output style of the (main.)css to compressed.
The _custom.scss in my package is for your additional stuff. Here you can write SCSS but normal CSS, too!
Check thehttp://foundation.zurb.com/forum... and search there for the "_settings.scss" file. Here you are able to customize all foundation components to your needs.
But there are two of them :-)
First:
c5f5boilerplate / themes / c5f5boilerplate / scss / _settings.scss
Second:
c5f5boilerplate / themes / c5f5boilerplate / bower_components / foundation / scss / foundation / _settings.scss
Actually the first one is empty. I think you can put here only the variables you want to customize. Say: The first file overrides the second. I testet this making the background of top-bar red. Therefore put this in the first settings file: $topbar-bg-color: #ff0000;
Perhaps you want to discuss further scss and foundation related topics in the foundation forum ;-)
Check thehttp://foundation.zurb.com/forum... and search there for the "_settings.scss" file. Here you are able to customize all foundation components to your needs.
But there are two of them :-)
First:
c5f5boilerplate / themes / c5f5boilerplate / scss / _settings.scss
Second:
c5f5boilerplate / themes / c5f5boilerplate / bower_components / foundation / scss / foundation / _settings.scss
Actually the first one is empty. I think you can put here only the variables you want to customize. Say: The first file overrides the second. I testet this making the background of top-bar red. Therefore put this in the first settings file: $topbar-bg-color: #ff0000;
Perhaps you want to discuss further scss and foundation related topics in the foundation forum ;-)
hi Chris,
good to know overriding the variables is easier to do than i thought (i think ;^)! Thanks a lot for spending your time on the issue.
but, can you help me out on this:
the first _settings.scss looks now like this:
---------------------------------------------
//
// FOUNDATION SETTINGS
//
$topbar-bg-color: #ff0000;
---------------------------------------------
nothing changes, topbar is still black..
i also tried uncomment //$topbar-bg-color: #333; in the second _settings.scss, no effect either.
changes made in the main.css work fine.
Do i have to change or import something somewhere else too?
I did not install or activate anything on Node, Sass, compass or bower.
I'll post this too on the Foundation Forum and stick to that.
Kind regards, Mieke
good to know overriding the variables is easier to do than i thought (i think ;^)! Thanks a lot for spending your time on the issue.
but, can you help me out on this:
the first _settings.scss looks now like this:
---------------------------------------------
//
// FOUNDATION SETTINGS
//
$topbar-bg-color: #ff0000;
---------------------------------------------
nothing changes, topbar is still black..
i also tried uncomment //$topbar-bg-color: #333; in the second _settings.scss, no effect either.
changes made in the main.css work fine.
Do i have to change or import something somewhere else too?
I did not install or activate anything on Node, Sass, compass or bower.
I'll post this too on the Foundation Forum and stick to that.
Kind regards, Mieke
First: do your changes in _settings.scss
Second: execute 'compass watch' in your terminal. now all the scss is compiled to main.css (now your changes are in main.css)
Only when you do it this way your changes are considered.
Second: execute 'compass watch' in your terminal. now all the scss is compiled to main.css (now your changes are in main.css)
Only when you do it this way your changes are considered.
Thanks for the tip!
i get 'command not found' so i think i miss the know-how to do things right on this level ;^).
i will go on however and study on this issue so i follow all your suggestions, trial and error.. thanks again! Mieke
i get 'command not found' so i think i miss the know-how to do things right on this level ;^).
i will go on however and study on this issue so i follow all your suggestions, trial and error.. thanks again! Mieke
Just working on fixes for the CCM issues when integrating Foundation. I looked at your boilerplate CSS filehttps://github.com/vl-ad/c5f5boilerplate/edit/master/themes/c5f5boil... and I only saw one setting that seemed to apply a fix for CCM:
Am I missing some other fixes applied earlier or in another css somewhere? I'm finding lots of small problems with CCM because foundation sets so many styles and many are obscure and are not reset by C5.
For example I found I needed to add the following to make selects look the way they should in blocks such as image block:
That doesn't fix all the selects though, other more specialized ones are still messed up in various ways due to -webkit-appearance or background styles.
Any thoughts on this? It's encouraging to see others also trying to integrate Foundation 5. But I'm feeling a bit frustrated because my theme is done but now I've got these CCM problems to get through because it can't PRB until these are all fixed. And I'm thinking by the time I fix them, I might have died of old age.
.ccm-ui input, .ccm-ui textarea, .ccm-ui select, .ccm-ui .uneditable-input { height: 32px; }
Am I missing some other fixes applied earlier or in another css somewhere? I'm finding lots of small problems with CCM because foundation sets so many styles and many are obscure and are not reset by C5.
For example I found I needed to add the following to make selects look the way they should in blocks such as image block:
div.ccm-block-field-group select { background-color: #ffffff !important; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; line-height: 18px; -webkit-appearance: menulist !important; }
That doesn't fix all the selects though, other more specialized ones are still messed up in various ways due to -webkit-appearance or background styles.
Any thoughts on this? It's encouraging to see others also trying to integrate Foundation 5. But I'm feeling a bit frustrated because my theme is done but now I've got these CCM problems to get through because it can't PRB until these are all fixed. And I'm thinking by the time I fix them, I might have died of old age.
Yeah, working with concrete5 and foundation is fun. Although there are this frontend issues. And although actually there was a foundation template published in the marketplace. I want to build the stuff myself and understand it ;-)
You're right, goldhat. I didn't apply more CCM fixes. Actually I only know about an issue when you use the page versions. When you select an older page version and mouse over the buttons 'approve' or 'copy'. I do not know how to fix that :-( Any idea? Check the attachment for a screenshot.
I'll keep your code for the selects in mind. Perhaps I should test the UI on windows, too...
Are there any chances to take a look at your theme code? Only for research for sure.
You're right, goldhat. I didn't apply more CCM fixes. Actually I only know about an issue when you use the page versions. When you select an older page version and mouse over the buttons 'approve' or 'copy'. I do not know how to fix that :-( Any idea? Check the attachment for a screenshot.
I'll keep your code for the selects in mind. Perhaps I should test the UI on windows, too...
Are there any chances to take a look at your theme code? Only for research for sure.
Is there a Foundation 5 template in Marketplace though or only Foundation 4 and earlier? I bought Aria which has Foundation 4. They had about 30 different CCM fixes in their stylesheet.
I don't have the theme code anywhere for sharing right but it's in PRB if you can see it there it'shttp://www.concrete5.org/marketplace/review_pending/-/view_detail/1...
I'll post any CSS related to CCM fixes here and anyone is welcome to use them. Maybe if we all pool our fixes together we can make a reliable CCM-reset file for Foundation 5 and anyone building themes with it in the future can use it.
After some more testing of selects this code should restore all CCM selects. Your element height fix is in there too.
I don't have the theme code anywhere for sharing right but it's in PRB if you can see it there it'shttp://www.concrete5.org/marketplace/review_pending/-/view_detail/1...
I'll post any CSS related to CCM fixes here and anyone is welcome to use them. Maybe if we all pool our fixes together we can make a reliable CCM-reset file for Foundation 5 and anyone building themes with it in the future can use it.
After some more testing of selects this code should restore all CCM selects. Your element height fix is in there too.
/* * CCM UI Fixes * Elements in the CCM forms are styled by the Foundation CSS and we need to restore the default CCM styling here */ .ccm-ui input, .ccm-ui textarea, .ccm-ui select, .ccm-ui .uneditable-input { height: 32px; } div#ccm-block-fields select { background-color: #ffffff !important; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px;
Viewing 15 lines of 22 lines. View entire code block.
Formigo's Foundation 5 theme has just been released.
Thanks John for the tip, i will take a good look!
Formigo solution to the CCM problem is simple and effective. They wrap the entire page in a class ff-wrapper and then add that class to the foundation CSS file. Normally I might not like the idea of editing an external library like Foundation but in this case I think it's the best route. It took me hours and hours just to sift through a few CCM issues and rectify the styling by resetting classes and as soon as you fix one another dozen popup.
I've made my Cobalt theme which is in PRB now open source so if any of you want to look at it or use it feel freehttp://www.concrete5.org/marketplace/themes/cobalt/...
I've made my Cobalt theme which is in PRB now open source so if any of you want to look at it or use it feel freehttp://www.concrete5.org/marketplace/themes/cobalt/...
Wrapping the effective part of the page (a div immediately within the body) is recommended c5 practice for themes. Wrapping every declaration in a css file is trivial with LESS. I find the part that often requires attention is convincing framework bundled javascript that the wrapped part of the html is the whole universe as far as the script is concerned.
Can this be done easily with SASS for Foundation??
You can do pretty much the same with SASS as with LESS. Something like the following will scope all the css and output css where every style is scoped beginning with '#my-theme-container' :
#my-theme-container{ // wrap all LESS or SASS or CSS from framework in here ... ... }
... ... c5 and theme header stuff ... ... <body> <div id="my-theme-container"> ... ... page type layout for theme ... </div> ... c5 footer stuff... </body>
I have written the above up in a howto:
http://www.concrete5.org/documentation/how-tos/designers/easily-sco...
http://www.concrete5.org/documentation/how-tos/designers/easily-sco...
Good man. Nice guide.
Nice! Thanks.
I'm happy we came to this point. Hope I can update the boilerplate soon...
I'm happy we came to this point. Hope I can update the boilerplate soon...
This is a great start to a Foundation 5 theme. Although I've not used SASS before, everything seems pretty well explained.
I'll be sure to share any nuggets of information I encounter along the way in this post.
I'll be sure to share any nuggets of information I encounter along the way in this post.
I'm glad you like it. Happy coding :-)
Pardon my ignorance, but I'm a little new to this whole CMS thing and have started getting my feet wet with Concrete5 and PHP. I've only built static sites with Foundation/Bootstrap from this point on.
Is there a reason I need this foundation 5 theme rather than just building my site in foundation and then porting it over to C5? If anyone could explain some of the pros and cons I'd greatly appreciate it. Thanks!
Is there a reason I need this foundation 5 theme rather than just building my site in foundation and then porting it over to C5? If anyone could explain some of the pros and cons I'd greatly appreciate it. Thanks!
Buying a theme (or using a FREE one) saves you a lot of time. It really all comes down to that. That, and all items in the marketplace have gone through extensive testing, so they should work out-of-the-box.
Converting a theme to work with C5 requires working knowlege of how Concrete (or any CMS) works.
In short, it's worth spending a few bucks to save from spending many hours of work.
Anyway, I have a FREE version of Foundation theme in the marketplace (it uses an older version of Foundation, though!). Feel free to check it out. You could use it for learning purposes if you want to build your own theme!
http://www.concrete5.org/marketplace/themes/foundation...
Converting a theme to work with C5 requires working knowlege of how Concrete (or any CMS) works.
In short, it's worth spending a few bucks to save from spending many hours of work.
Anyway, I have a FREE version of Foundation theme in the marketplace (it uses an older version of Foundation, though!). Feel free to check it out. You could use it for learning purposes if you want to build your own theme!
http://www.concrete5.org/marketplace/themes/foundation...
There are some attributes coming with this package. For instance, when you apply the core slideshow block to a page:
Go to a picture in the file manager (which is shown in the slideshow), in this file's properties set the 'clearing featured image' attribute, and then you apply the 'clearing featured' custom template to the slideshow block on your page. Et voila. You have a clearing lightbox gallery with one featured image as described in the foundation docs.
Go to a picture in the file manager (which is shown in the slideshow), in this file's properties set the 'clearing featured image' attribute, and then you apply the 'clearing featured' custom template to the slideshow block on your page. Et voila. You have a clearing lightbox gallery with one featured image as described in the foundation docs.
Wonderful! I'm building out a 1 page portfolio site for practice and will probably be back with questions!
Tried to scope the foundation css into a wrapping container. Unfortunately without success. Anyone can help?
Check the thread in the foundation forum, too:
http://foundation.zurb.com/forum/posts/2610-scoping-the-foundation-...
Check the thread in the foundation forum, too:
http://foundation.zurb.com/forum/posts/2610-scoping-the-foundation-...
Alternatively you can scope only specific foundation styles.
I did this with the table styles. And this did the job :-)
I did this with the table styles. And this did the job :-)
.content { @import "foundation/components/tables"; }
Overall, your boilerplate is a great start. Thanks!
Question about forms:
The f_forms template works well.
But in order to have scss control for things like grid columns for each $question, I think it would be ideal to also give each containing <div> a unique ID.
Currently, each containing <div> takes the class 'field' and 'field-$question['type'].
Any thoughts on how to apply unique classes to each div.field?
Each $question input is assigned a unique ID, such as #Question1.
Any way to make use of that?
Any help is appreciated. Obviously, I'm not strong enough with PHP to write this myself.
Question about forms:
The f_forms template works well.
But in order to have scss control for things like grid columns for each $question, I think it would be ideal to also give each containing <div> a unique ID.
Currently, each containing <div> takes the class 'field' and 'field-$question['type'].
Any thoughts on how to apply unique classes to each div.field?
Each $question input is assigned a unique ID, such as #Question1.
Any way to make use of that?
Any help is appreciated. Obviously, I'm not strong enough with PHP to write this myself.
Hi,
thanks, I hope it's helpfully for you.
Please explain what you want to do exactly with sass. Sounds interesting. See my attached image...
All you have to do: Replace the lines 124 to 142 with this code:
https://gist.github.com/vl-ad/0323a03e6eb495d01f70...
thanks, I hope it's helpfully for you.
Please explain what you want to do exactly with sass. Sounds interesting. See my attached image...
All you have to do: Replace the lines 124 to 142 with this code:
https://gist.github.com/vl-ad/0323a03e6eb495d01f70...
Yes. Simple solution, and it works. Thank you for your reply.
My objective is to be able to target each div containing a field or input, so that I can change the layout of the form. By default, the form fields stack. But if you want to arrange the form using foundation,like this example, you need an identifier for each field.
My objective is to be able to target each div containing a field or input, so that I can change the layout of the form. By default, the form fields stack. But if you want to arrange the form using foundation,like this example, you need an identifier for each field.
#question1 { @media #{$medium-up} { @include grid-column( $columns: 3, $offset: 3, $last-column: false ); } } #question2 { @media #{$medium-up} { @include grid-column( $columns: 3, $last-column: true );
Viewing 15 lines of 17 lines. View entire code block.
A font-dir in config.rb is also useful. In your scss files you can use font-url('font.ttf') for example.
Is there a reason you don't specify a Foundation 5 version? My bower.json looks like this: