aFramework
Articles or documentation related to my, ever-growing, never-ending, project aFramework.
There are 6 articles published in this category. Please try the search if you can't fint what you're looking for.
aFramework Install
Thursday, November 13, 2008
Last few weeks I've been working on aFramework's installation wizard whenever I've had some spare time.
The entire config-handling has been rewritten and is now completely dynamic. This allows the installation wizard to adapt to whatever sites the user selects for installation.
I've set up a demo-page so please have a look and tell me what you think. The demo won't actually install anything but it looks and behaves exactly the same as the real thing.
I should mention that both the logo and the icons are temporary (possibly even the entire design). A mate of mine is working on some new stuff but I kind of liked those dark icons I found on iconspedia.com so I felt it was time to stick it online.
- Comments are off
- Filed under aFramework, Design, Development
Handy CSS Constants
Friday, October 03, 2008
I've used my CSS-constants class in quite a few different projects now and I've built up a pretty nice set of genereic constants that I use for pretty much every site I create.
/**
* Underlined
* Makes element underlined and removes on :hover
*/
$underlined {
text-decoration: underline;
}
$underlined:hover {
text-decoration: none;
}
/**
* Not Underlined
* Makes element not underlined and removes on :hover
*/
$not-underlined {
text-decoration: none;
}
$not-underlined:hover {
text-decoration: underline;
}
/**
* Data Definition List
* Used on DLs to turn them into Key: Val
* Bold key with : after
*/
$data-definition {
margin-left: 0;
padding-left: 0;
}
$data-definition dt {
float: left;
clear: left;
font-weight: bold;
margin: 0 5px 5px 0;
}
$data-definition dt:after {
content: ": ";
}
$data-definition dd {
margin: 0 0 5px;
}
/**
* Pipe Menu
* Turns a UL into foo | bar | zaz
*/
$pipe-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$pipe-menu li {
display: inline;
}
$pipe-menu li:after {
content: " | ";
}
$pipe-menu li:last-child:after {
content: "";
}
/**
* Dash Menu
* Turns a UL into foo - bar - zaz
*/
$dash-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$dash-menu li {
display: inline;
}
$dash-menu li:after {
content: " - ";
}
$dash-menu li:last-child:after {
content: "";
}
/**
* Pagination
* Turns a UL into < prev | 1 | 2 | 3 | next >
*/
$pagination {
margin-left: 0;
padding-left: 0;
list-style: none;
text-align: center;
}
$pagination li {
display: inline;
}
$pagination li:after {
content: " | ";
}
$pagination li:last-child:after {
content: "";
}
$pagination li:first-child a:before {
content: "< ";
}
$pagination li:last-child a:after {
content: " >";
}
/**
* Previous/Next Menu
* Turns a UL with 2 LIs into < prev | next >
* (Should add support for $constant = $constant)
* (to avoid duplicate self-clear-styling)
*/
$previous-next-menu {
_height: 1%;
*display: inline-block;
_display: block;
}
$previous-next-menu:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
$previous-next-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$previous-next-menu li {
float: right;
}
$previous-next-menu li:first-child {
float: left;
}
$previous-next-menu li a:after {
content: " >";
}
$previous-next-menu li:first-child a:after {
content: "";
}
$previous-next-menu li:first-child a:before {
content: "< ";
}
/**
* Arrow-list
* Prepends an arrow to every list-item
*/
$arrow-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
$arrow-list li {
margin-bottom: 5px;
}
$arrow-list li:before {
content: "> ";
font-size: 8px;
}
/**
* Dash-list
* Prepends a dash to every list-item
*/
$dash-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
$dash-list li {
margin-bottom: 5px;
}
$dash-list li:before {
content: "- ";
font-size: 8px;
}
/**
* Plain list
* A list without margin, padding or bullets
*/
$plain-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
/**
* A11y hide
* Hides and element in an accessible way
*/
$a11y-hide {
position: absolute;
left: -10000px;
top: -10000px;
}
/**
* Self Clear
* Classic self-clear
*/
$self-clear {
_height: 1%;
*display: inline-block;
_display: block;
}
$self-clear:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
This file is automatically included in every aFramework-project (along with other shared CSS and JS-files) so whenever I need a self-clear, or a pipe-separated-menu or whatever I simply go:
#navigation ul = $pipe-menu;
#wrapper = $self-clear;
// etc...
Without constants I'd have to give #wrapper a .self-clear class and #navigation ul a .pipe-menu class. This would require me to change my HTML every time I wanted to change design. Which totally defeats the entire purpose of CSS.
Try it out. It really helps keep design-related information out of your HTML.
Laters
- Comments are off
- Filed under aFramework, CSS
aFramework and the perfect 404
Wednesday, September 24, 2008
I just finished aFramework's brand new 404-handling (much simplified).
I used ALA's the perfect 404 as inspiration but wrote it all in PHP rather than inaccessible JS using document.write (as they do in the article (i guess so it works without any particular server-side language support)).
It includes all the 4 "states" described in the article and search-results based on either the requested URI or the actual search-term (if it's a search-engine referrer) are presented to the visitor.
I've tried to mimic the design of FF's error-page, I even use the same warning-icon located at chrome://global/skin/icons/warning-large.png (obivously not available outside FF).
A 404 is triggered in aFramework either from a Module in the current Controller (for example the article-module can trigger a 404 in case the requested article doesn't exist) or simply because the router can not find a route for the requested URI.
Laters
- Comments are off
- Filed under aFramework
aFramework drag n drop admin
Wednesday, August 27, 2008
I've been working hard all night coding a drag n drop admin for aFramework. It allows you to add and remove modules to the page you are currently at.
Just like every other admin in aFramework this one is run directly on the site. You just log in and that allows you to customize the page as well as eventually add and remove articles etc (this is already possible in v2, just have to convert it to v3).
Update
aFramework v3 requires PHP 5.3 to work, something my host does not offer (yet, it's only in beta) but I've set up a static example of the drag-n-drop admin so you can at least get a feel for how it works.
After adding a module it will never stop loading. This is where aFramework would actually run and render the module using AJAX. Since this is just a hard-coded version in pure HTML, CSS and JS the AJAX:ing won't work.
You can try disabling JS if you like - it works without as well. You won't be able to either add nor remove modules without JS in the static version though (for the same reasons as the AJAX-calls don't work).
Ok, check it out!
- Comments are off
- Filed under aFramework, Development
aFramework progress
Friday, August 15, 2008
I've finished most of the actual framework-code now. There's some left but nothing I really need to build a project.
All that's left now is to build all the modules that make up aBlog (there's like 40 of them).
Here's a screenshot of aFramework's debug-panel. As you can see some of the module's are from aFramework itself, some from aCMS. This is possible thanks to aFramework's site-hierarchy feature.
You may also note that the module I'm hovering with my mouse (Navigation) is highlighted on the site (well actually low lighted as I set opacity to .2).
The next step is to start building modules. AndreasLagerkvist.com should hopefully be up and running in about a month.
Ciao
- Comments are off
- Filed under aFramework, Development
aFramework version 3
Friday, July 25, 2008
The reason I've been so ridiculously quiet the last few weeks is because I've been working on version 3 of my framework, aFramework. The one that the blogging-software exscale.se runs on.
Version 3 will include loads of new features and enhancements but still be focused on making things as simple and logical as possible to both the user and the developer.
I've set up a new category for aFramework-related articles and I'm going to start documenting a lot more there.
Some of the things you can look forward to in version 3 include:
- Super-simple yet powerful routing allows for complete URL-restructuring with the change of one line of code. Also works without MOD_REWRITE and from any sub-directory.
- Even more powerful CSS constants and variables. Auto-prefixing of selectors for module and controller CSS-files. Caching!
- Cached modules.
- All sites now also have the ability to inherit from any number of parent sites. This means that if you want to set up your own web-shop/blog you can simply create a MySite that extends aBlog and aWebShop as well as aFramework and URLs, controllers, modules, styles and scripts will be merged into one. If you're happy with just a blog you can download a release of aBlog or you could check out the svn repo, create MyBlog and extend aBlog from it. That way you can make changes to the blog without having to touch aBlog's source-code.
- Version 3 includes a new feature that allows you to include additional template-code before or after a module's template simply by creating a BeforeModule.tpl.php or AfterModule.tpl.php
- Nicer debugging with loads more information.
The biggest things are really the routing (which I think turned out pretty nice) and the whole new site inheritance-thing.
The way it works is that you specify a SITE_HIERARCHY constant on site-level that tells aFramework which sites your site is built from. The value of the constant is a space-separated string of site-names starting with the one with highest priority and could look something like: 'MySite aBlog aWebShop aFramework'.
Now, every time aFramework requests a controller, or a module-class, or a stylesheet, or a template-file, or a route (etc) it starts by looking in the site highest in the hierarchy and works its way down.
This way you can create totally customized sites without writing more than a couple of lines of code.
Using the BeforeTemplate.tpl.php and AfterTemplate.tpl.php files you can easily customize default modules to your liking. If you want to override the entire module-template simply create a file by the same name.
That's what's been keeping me quiet (and off sleep). There's no deadline for v3 but I've actually set up a sprint backlog which should be finished in a couple of weeks so maybe something to show then.
Stay tuned.
- Comments are off
- Filed under aFramework, Development
