Browsing Posts tagged framework
Product Description
repoze.bfg is a small, fast, down-to-earth, open source Python web development framework. It makes real-world web application development and deployment more fun, more predictable, and more productive. This book will show you how to develop web applications using repoze.bfg and Python step-by-step, including: – Using SQLAlchemy and ZODB along with repoze.bfg. – Using built-in templating facilities to render HTML and XML. – Using repoze.bfg security funct… More >>
In addition to our last blog post about the HTML5 template and system markup we now talk about our new CSS framework. We will explain how it works and how you use it.
The CSS Framework
So what is a CSS framework? A CSS framework is a rich tool set of useful CSS classes to style HTML markup. It provides cross-browser support and enables you to build robust and future-proof websites.
For Warp6 we created our own CSS tool set. It is a collection of best practices we learned in the last 5+ years of theme development.
Of course we also kept track with the major CSS and grid frameworks which popped up in the last years and what we can learn from them to improve our code.
One of our major goals was to keep the CSS as modular as possible. Sometimes you just need a specific part of the tool set and you don’t want to load unnecessary CSS files. That’s why we keep them in separated files and each one has it’s own file specific purpose like the layout, menus, etc. These framework CSS files are located in the Warp6 CSS folder. A theme itself has its own CSS files and you have full control which parts of the framework CSS you want to load and which not.
The complete framework CSS uses 12 different files which are well documented with comments. Each file is stripped down to the essential, no duplicate code and we utilized the full power of CSS 2.1 selectors. The build-in compression feature of Warp6 automatically combines the style sheets into one file, minifies the code, compresses the final CSS file on-the-fly using the GZIP data stream compression and caches it. No need to worry about loading times. We promise that Warp6 is fast – very fast!
Now a closer look at the CSS framework followed by a short description of the different framework CSS files.
No Overflow Hidden!
We didn’t use any overflow:hidden in the whole CSS, not even for clearing. This is because overflow:hidden has a major drawback. It will clip elements that you’re trying to position outside of it. But even worse is that it also clips new CSS3 properties like box shadow. By not using any overflow:hidden you have more possibilities to use CSS3 properties and position elements where you want.
The Grid System
Another really important part of our CSS framework is the grid system. We don’t want to dive that deep into the different types of grid systems. Just a short round up what we have done and why we feel it is a good approach.
Most grid systems like 960 Grid System, Blueprint or 1KB CSS Grid use a fixed template width and a pixel based grid unit. It is possible to integrate one of these systems into a theme framework but if you want to keep flexibility it feels like making things a bit too complex. This doesn’t mean using one of these grid systems is a bad idea. So we come up with a own grid solution which is simple and flexible.
In Warp6 you also set a fixed template width but we choose a percent based grid. This has some big advantages: the grid is very re-usable, you don’t have to generate the CSS dynamically and it can easily be nested. The main reason why other grid systems are not using a percent based grid is the sub-pixel problem when browsers have to round percent units. To learn more about this issue take a look at this article by John Resig. This has the result that some grid layouts may not taking the whole width and there may be up to 4 pixels space on the right side. However this issue rarely happens only in some browsers. We solved this by matching the widths using simple JavaScript. We think this grid solution is great because it has the smallest possible size in code and renders great in all browsers.
Framework Files
Here is a brief description of the different CSS files provided by the framework.
base.css
Yes, that’s right! We have no Reset CSS. We take a different approach: To avoid redundant code we set new default values instead of baseline defaults and re-resetting them later.
layout.css
The layout style sheet provides a fluid grid and helper classes to create any layout and some layout defaults.
menus.css
The menus style sheet defines base styles for various menus. Currently we support our famous Mega Drop-Down Menu, the Accordion Menu and the Line Menu for the top and footer positions.
modules.css
The modules style sheet defines general module defaults, headings, badges and icons.
tools.css
The tools style sheet provides a useful set of CSS classes to style your content. For example this includes read more buttons, different list, table and form styles, info boxes and more.
system.css
The system style sheet defines a base style for the WordPress, Joomla 1.5 and 1.6 system HTML markup.
rtl.css
The RTL style sheet is used for right-to-left language localizations. We are proud that Warp6 has full RTL support.
print.css
The print style sheet which is only used when printing.
mobile.css
The mobile style sheet which styles the template for mobile phones.
ie.css, ie7.css, ie8.css
We provide different IE style sheets which are only loaded by the specific Internet Explorer version.
style.css
The style style sheet defines the main look like colors and backgrounds which may change for different theme styles. Having all style related CSS in one place makes creating style variations very easy.
custom.css
The custom style sheet should be used to style your content. It is blank by default.
Conclusion
Warp6 provides a flexible CSS framework which is divided into different files and for each purpose. A Warp6 theme itself has its own CSS and you have full control which part of the framework CSS you want to load and which not. For example if you want to use the 960 Grid System instead of the provided one you are free to do so. The provided grid system is very flexible, the smallest in size and didn’t make use of any overflow: hidden. We love it!
Our upcoming blog post we will talk about the new administration user interface!
View full post on YOOtheme News Feed
Let’s kick off our Warp6 blog post series in which we take a closer look at the overall framework structure and how everything fits together. This first post shows the basic file concept of the Warp theme framework and how to use it. Okay, let’s start!
The Framework
The Warp6 theme framework is the next step in evolution succeding our version 5.5 released in August 2010. Like its predecessor, Warp6 is a lightweight framework which provides a solid tool set for solving repetitive tasks creating themes. The Warp6 framework has HTML, CSS, JavaScript and PHP helper classes to cover all aspects in theme development. It’s really portable since all framework related files are kept in a single place, a folder called "warp". This folder resides directly in every theme. There are no dependencies on other components or plugins. Nothing needs to be installed or maintained separately.
Warp6 can be split up into three layers. The first layer is the core framework which provides the base CSS, a JavaScript effects library and a collection of PHP helpers. Each part of the core framework is universal and designed to work on every supported system. The second layer is the system depended layer, which provides the individual system implementation needed to seamlessly integrate with a particular CMS. This layer makes Warp6 adapt to a certain system to form a consistent API for theme development. The third layer is the theme specific layer, this is where all the individual theme files go. It’s the working place where all the themes custom HTML, CSS, JavaScript and images are being stored.
The Cascade
To provide as much flexibility as possible we implemented a special file cascade into Warp. If you include any file like CSS, JS or template PHP files Warp6 looks successively in specific folder for the files and the first file found will be loaded. Here is the cascade:
- theme folder
- specific system folder, for example warp/systems/joomla.1.6
- warp framework folder
This gives you full flexibility to override any important theme related file. In the following we will give a short overview about the most important files if you want to customize a Warp6 theme.
Template Files
The main template file /layouts/template.php is the heart of every theme, it provides the complete HTML markup for the base theme layout. This is different from standard Joomla templates or WordPress themes where the index.php is the main template file. Second important file is the /layouts/template.config.php which includes some layout calculations and defines all the themes CSS and JavaScripts.
Modules
Modules or widgets can be displayed in different styles with additional icons and badges. The /layouts/module.php takes care of displaying all these module variations. Depending on the selected style the module.php loads the right HTML markup from predefined module templates. Further the framework comes with three commonly used module layouts equal, double and stacked, which are used to position modules next or above each other. It’s also possible to extend them with your own custom module templates and layouts.
CSS
The CSS files are divided in three different layers and are placed in their respective folders for theme specific /css, system depended /warp/systems/joomla.1.6/css and framework styles /warp/css. Including these files is really easy because Warp6 also uses its file helper to locate them across the different folders. All CSS files are modular and well structured with the name of each file naming its purpose. We will do a dedicated blog post about the CSS framework soon.
JavaScript
Warp6 also provides a library of JavaScript effects used in dropdown and accordion menus, the AJAX search or the mobile theme. The JavaScript files are also structured and stored in their own folders for theme specific /js, system depended /warp/systems/joomla.1.6/js and framework scripts /warp/js. All scripts are configured in a single file /js/template.js. This file is used to enable or disable effects which will be loaded with the theme.
System Markup
Every system has a set of layouts which defines the HTML markup for the core CMS output. For Joomla these are typically the HTML overrides that are used by the theme to render the content component or modules like the login or search. The Joomla 1.6 files are located in warp/systems/joomla.1.6/layouts. In WordPress the layouts provide a HTML markup for the different pages like blog frontpage, the archive or a single post. The WordPress files are located in warp/systems/wordpress.3.0/layouts. To keep things simple, Warp6 basically uses the same HTML output for all supported systems. Regardless of what you are viewing, articles of a category in Joomla’s content component or posts from a category in WordPress, Warp renders the HTML. This allows to create universal CSS rules which apply for both CMS platforms.
Conclusion
This overview shows the key concepts of Warp6 like the layers and the cascade and how the files and folders are structured. As you can see Warp6 is a modular, flexible and extendible theme framework that provides a rich toolset for developing Joomla 1.5/1.6 templates and WordPress 3.x themes. It’s up to the developer what features he uses. Only select those tools that you are actually needing. In our next blog post we will talk about the “Styles” feature another addition to Warp6. Stay tuned!
View full post on YOOtheme News Feed
- ISBN13: 9780137129393
- Condition: New
- Notes: BUY WITH CONFIDENCE, Over one million books sold! 98% Positive feedback. Compare our books, prices and service to the competition. 100% Satisfaction Guaranteed
Product Description
Fully Updated to Cover Major Enhancements to Seam 2.x In Seam Framework, Second Edition, the authors of the leading guide to Seam programming have systematically updated their text to reflect the major improvements introduced with Seam 2.x. This author team–all key Seam project contributors–teach Seam 2.x through detailed example applications that reveal how Seam simplifies many tasks that were previously difficult or impractical. Their… More >>
Over the last couple of months we developed the new Warp 5.5 theme framework which is the new foundation of all our YOOtheme templates. In this time we have rewritten the complete Warp theme framework to make it more modular, flexible and also extendible. Currently all Warp 5 templates are updated and six more will follow in the next days so all our templates since 2009 run on the new framework. This means 20 templates will use Warp 5.5! In this article we want to highlight some of the key features of our new Warp 5.5 theme framework. Enjoy!
Framework Core
Basically Warp 5.5 provides a rich toolset for crafting a modern template. We designed the new framework in a way that every tool or helper as we call them in Warp, is a modular component doing a single task. Like the good’ old unix philosophy: “Write programs that do one thing and do it well.” So we created a bunch of helpers to do just a single task for example like rendering layouts, minification, caching or XML parsing. This makes the framework really flexible as we can use only the helpers we need when creating a template, the framework also ensures that only helpers are loaded which are currently used. Since every helper has a modular design its makes it easy to add new helpers anytime to extend the frameworks functionality. Also we extracted the framework from the template, so now the new Warp framework is placed in a separate directory called “warp” in the templates directory. Applying updates or patches to the framework is easily done now, because all the generic framework source code can be updated independently from the individual template code.
CSS/JS/Image Compression
With Warp 5.0 we introduced a really great feature to automatically combine, cache and compress stylesheets and javascripts of a template. You can find more information about it in the “Faster loading with Warp5” article. As a result a template will speed up its overall loading time in the browser, because it needs less HTTP requests and also all resources are compressed on-the-fly using the GZIP data stream compression. Warp 5.5 takes this concept even further and now minifies stylesheets and javascripts. This means all unnecessary characters are removed from the stylesheets and javascripts sources. These unnecessary characters usually include white space characters, new line characters and comments which are used to add readability to the code during the development, but are not required for it to execute. The minification is now a part of the caching process and its enabled by default so you need worry about it. Finally the minified stylesheets and javascripts will save some more KB’s of bandwidth to improve the templates loading times.
But that’s not all! We like to introduce a brand new compression feature: Data URIs! Since Warp5 we already minimize the image requests by merging image slices into so-called CSS sprites. This means that we put as many image slices as possible into a single image file which significantly reduces the loading time of your website. But of course there are still some neccesary image request left. With Warp 5.5 we use Data URIs to get rid of them. Data URIs allow to include images and other files in-line in HTML and CSS as if they were external resources. This means that all template images which are smaller than 30KB are now embedded into the templates CSS and there no extra HTTP request required to load the images. In most cases only 2 HTPP file requests (CSS + JS) are necessary to load a template. That’s it! Isn’t this awesome? This feature is only available for modern browsers (Firefox, Safari, Chrome, Opera, IE8). But you don’t have to worry about older browsers like IE7. They are still loading the images the normal way.
Mootools 1.2 ready
The recently released Joomla version 1.5.20 adds support for using Mootools 1.2 as your primary Javascript library. Therefor Joomla now includes a new plugin called “mtupgrade” which will include Mootools version 1.2.4 instead of the old Mootools version 1.1.2. With the new Warp framework 5.5 we included native Mootools 1.2 implementations of all the template Javascripts! Further the framework auto-dectects if your are using the Mootools upgrade plugin or not and will include the compatible scripts to match your Mootools version.
Presets
We introduce a new preset parameter in the template configuration. With presets you can define and load a specific configuration of the template parameters. Currently the presets only change the “Template Color” parameter but future templates we will use more options than just the “Template Color”. Further you can “Allow dynamic presets”, which means a preset configuration can be loaded adding a HTTP get parameter to your website link like: &preset=blue. And last but not least you can disable dynamic presets so it is not possible to change the preset by adding the &preset parameter to a link. This means it is no longer possible change the color variation of your template if you don’t want to allow it.
New Versioning
When updating all our templates we also changed the template versioning. The first two numbers are now referring to the Warp framework version and not the Joomla version which the template is created for. So you can immediately check which framework version the template is using. We did this to avoid confusion in the future because the new Warp 5.5 theme framework not depends on the current Joomla version.
Future
Currently we are very focused on our Warp framework and a lot of development is going on. With Warp 5.5 we updated the whole php code base. Now Warp is a platform independent CMS theme framework. This improvements on the framework level were very important to add more features in the future. This means you can expect more Warp updates soon… 
We hope you like the new Warp theme framework as much as we do! Enjoy!
View full post on YOOtheme News Feed
YouJoomla is very pleased to announce that YJSimpleGrid Joomla Template framework is in stable state and our first free GPL Joomla! template natively running on YJSG is just around the corner.
We are also happy to say that all our future commercial and free Joomla! templates will be developed using YJSG Joomla Template framework which will make everything much easier and bring many new options to our and yours joomla templates.
YJSG will be released under GNU/GPL2 copyleft license for PHP and Youjoomla Commercial license for CSS, JS and Image files including PSD's.
View full post on BestofJoomla::Best of Resources
Product Description
In Detail This book is a practical step-by-step tutorial for those who want to build contemporary, real-life web applications with Tapestry 5, the Apache open-source framework for creating dynamic, robust, highly scalable web applications in Java. It shows the path of least resistance, so that the reader can learn all the essential skills quickly and easily. To give the reader an initial practical experience, a simple but useful web application is built th… More >>
MarketPlace
 |
 |
 |
 |
