What kind attempts there exist to make Plone 4 themes based on Twitter Bootstrap, preferably 2.0?
I have seen some discussion on mailing list and I'd hope to know what add-ons there already exists before inventing a new one.
http://pypi.python.org/pypi/plonetheme.bootstrap/1.0a1
and
https://github.com/kagesenshi/diazotheme.bootstrap
You don't need to use an add-on per se (though you can). Instead, consider downloading an example template from:
http://twitter.github.com/bootstrap/getting-started.html#examples
Then apply rules to it, as explained here:
http://docs.pythonpackages.com/en/latest/hosted-configs/plone-diazo.html
This approach places a heavier emphasis on HTML/CSS/JavaScript knowledge in general, and less on Plone-specific techniques.
Note that the new (4.3-hopefully) plone.app.theming will contain an example/template theme based on Bootstrap.
It's not intended to be perfect (it also needs to be easy to understand and chop up and reuse), but it shows the basics. See https://github.com/plone/plone.app.theming/tree/optilude-ace/src/plone/app/theming/template for the work in process.
Bootstrap is a starting point to create a webapp. It provides a lot of CSS with associated widget. Mix with Plone will add conflict (forms.css, ...) and not optimised results (weight of page).
Once Plone will have splited CMS UI in overlays it will be easier to build the CMS UI itself on bootstrap or use bootstrap to create a theme (I like their responsive solution).
At the moment you will have many bugs by using existing addons. I have already tried plonetheme.bootstrap and diazotheme.bootstrap.
So if you really want it, get all Plone's CSS in a trash, get bootstrap and start to see what happens ;)
Related
I have just begun my Typo3 journey. There is not much typo3 content available over the internet. I have gone through its documentation. As far as I have understood it, the ideal way of creating a website (frontend) is using content elements from backend and customising it according to our need in code (using CSS).
My Question is how can I do so? How can I find the code of all my used content elements so that I can use my own CSS to style it according to my need?
Or is there any other ideal or professional way of creating a webpage that mostly developers use?
Please please help me with my questions.
THANK YOU IN ADVANCE :)
I suggest to look into one of the following 2 extensions which allow to create content element types within a nice backend module:
https://extensions.typo3.org/extension/mask
https://extensions.typo3.org/extension/dce
Both come with a manual and it is afterwards easy to adopt the based default templates and apply the HTML you need
for the page structure I suggest to use something like https://jweiland.net/typo3/typo3-template-version-11.html or the bootstrap package https://www.bootstrap-package.com/ which also come with various custom content elements already
if you are german speaking you can also take a look at the video tutorials of wolfgang wagner which can be found at https://wwagner.net/
The base frontend structure of a TYPO3 websites is:
page templates (usually contain generic elements such as header,
footer, navigation.
page templates can be devided into serveral sections if needed
content elements which are than displayed in this sections / in
templates
The core already ships a set of common content elements and supplies basic CSS styling which you can override and adjust.
I prefer to check what kind of content elements I might need in order to get the website layout done and then build those custom elements. This gives full control over the HTML markup output and I can write my custom CSS specifically for my markup. This approach might need more initial work and requires a deeper understanding of the system, but often pays off in the end.
But if you want to see quick results as a beginner the approaches Georg mentioned with Mask or the bootstrap package are perfectly fine.
I have implemented a Rails project which has a lot of forms, but they do not look good. The new, edit, and destroy buttons are very close to each other. Listing the items in each form is also ugly as the columns are very close; they definitely need CSS and styling. Is there any sample or template that I can use?
For general styling you can use Bootstrap, there is even a gem to make it easier to integrate.
For better layouts and automating the form building process such as new, edit actions, you can use Formtastic.
Another one that's as popular is simple_form.
You can find even more form builders at the ruby toolbox site.
As you have mentioned little about your application, its hard to tell what styling you should chose. However as #olive_tree mentioned, bootstrap is simpler and a convenient option. You may want to check this rails cast
http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
Bootstrap is definitely a good place to start. Personally I prefer ZURB Foundation, though, but that is mostly a matter of preference. Here is a link on how to integrate Foundation the easiest way:
http://foundation.zurb.com/docs/applications.html
I am basically a PHP developer, but interested in javascript, so learned angularjs and jquery by own. The recent update I got is only learning angular is not enough, need to learn bootstrap also. But I really scared of CSS, because need to deal with pixels and have to design such a way that it has to fit for any device.
Bootstrap does that, ok fine, but how to keep in mind those hundreds of css class names. Can you guys give me some tricks and clues on how to memorize the css classes. And what we have to know before designing a layout (Asking these silly question, because I am into css for the first time).
You don't need to keep in mind class names, you just have to know framework components purpose.
On first steps you just need to checkout BS components and feature list (grids, tables, buttons, js-features) and see how they work and how could be used in your projects.
Next step checkout show cases and examples - you will get to know how compose page using grids and how components works together.
On this stage you will have enough information to start develop with BS.
Later you will face a lot of issues for sure, but it will be concrete questions, which answers could be googled.
This is a serious question, specifically relating to the many frameworks out there for Wordpress and Joomla - Warp, T3, Gantry etc. What I dont understand is how they are different to a starter template and what exactly you are supposed to do with them - simply child theme them or is it a whole other codex to learn? I mean, all of the native codex is there with Joomla and WP anyway to construct a theme simple enough so what good does a whole proprietary app do between your design and the CMS? Are they faster to develop with?
What confuses me is that people seem to love them and claim that they make life easier but I dont get how adding another technology to learn can make things easier. Like I say, it is a serious question, not one for effect to make a point.
Can anybody define the difference between a framework and a starter template? I ask in part because I am one of those anxious developers who always feels like I am somehow missing a trick or doing things the "wrong" way - what am I missing?
This is definitely mostly an issue of definition, and I can guarantee that some cases will not follow what I outline below. Obviously, anyone is free to call the template/framework by whatever they want.
Generally though, a template is comprised of basic HTML and CSS that works with the platform (Wordpress, Joomla, etc) that is used to build the output to the page. In Wordpress, this contains the loop and other constructs to get all the content for the page. In Joomla, it outlines all the module positions available and such.
Typically when you purchase a higher end theme, you will have significant choices on the backend to customize the theme without having to actually code. These parameters let you typically change colors and such.
Some of the theme developers and others have taken this parameter settings system to the next level and made it into a framework. In all the cases that I've seen, "framework" is really the basis for the template parameter system. In this way, you can have consistency between different themes and expect the same settings and features between different themes. This is why they use a different word, because it really isn't a "theme" any more. It really is like a "theme engine" in that it is a backend system for changing things in the theme.
Yes, many platforms offer some basic options for editing the theme out of the box, so in most cases, the framework is really an improvement on the base platform's theme engine.
It's been my experience that a theme will be a visual style along with a set of theme options available in the admin (in addition to Customize if it's supported).
Theme Frameworks on the other hand, like Thesis, are installed just like a theme but have a very vanilla visual style that you build your theme on top of. Usually the framework provides many added features that aren't available in WP core.
tl;dr - Themes frameworks aren't installed and used right away, they are installed and built upon to deliver a site.
For creating wordpress themes, people usually follow one of these two methods
Design Mockup in photoshop or similar tool and code the HTML & CSS from the scratch
Choose a base theme and design the mockup keeping the base theme in mind and code on the selected base theme.
Which is the better way of these (or anything other than these) on tackling the Wordpress theme creation?
It depends on what you're trying to accomplish. I lean and develop using Option 1, with using option 2 as a way to glean ideas from.
The main reason is that the photoshop mock-up, no matter how close you ask the designer to follow a existing template, "usually" is different in some fashion, so that by the time you get into the middle of the theme you find that the existing template you could modify doesn't accomplish everything that the client is asking for (unless the client is a relative, in which case you could say too bad).
The other reason is call scope creep. Meaning that the original scope that was presented has now grown past your theme. You'll then have to ask yourself if you can dive into someone elses code and figure out what they were trying to do and then see if you can hack it up enough to fulfill you clients new requirements or if you're better of developing from scratch and then when scope creep comes up, you know right where to go/do in order to meet their requirements.
Anyways, something to think about.
It really depends on what your company/client requires. If they have specific requirements that cannot easily be met with a theme, you'll probably be better with option #1. If they are asking for a design submission, and are leaving the implementation/design up to you, go with option #2.
Some of the premium wordpress themes out there are quite good. Note that for either tool you'll be doing a mockup in Photoshop, so start with that and see what your company/client thinks.
You'd probably want to use an existing theme as a base for a new theme, or at least as a reference, for knowing which Wordpress Codex functions to call to retrieve data to use in your theme.
The HTML/CSS design is only half the solution - you still need to retrieve the data from WP to show.
Use Sandbox to start your theme with, it is free and it gives you many classes to do a lot of the design tricks you see is great wordpress themes.
http://www.plaintxt.org/themes/sandbox/
Another great theme to start from would be Thesis:
http://diythemes.com/thesis/
I always start from a theme that allows me to do things easier in the long run.
I always start out with a Naked theme (like Starkers, by Elliot Jay Stocks), and otherwise build everything from scratch.
If you want to save time, or are not (and don't care to become) very familiar with Wordpress PHP logic, then I'd start with an existing theme.