def baseStyle(self):
s = self.newStyle() # Answer root style without selector
s.addStyle('body',
fontfamily=self.BODYFAMILY,
fontsize=self.BODYSIZE,
color=self.BODYCOLOR,
lineheight=self.BODYLEADING)
s.addStyle('a', color=self.LINKCOLOR)
s.addStyle('h1, h2, h3, h4, h5, p.lead',
fontfamily=self.HEADFAMILY,
color=self.BODYCOLOR)
s.addStyle('h1',
fontsize=self.H1SIZE,
lineheight=self.H1LINEHEIGHT,
color=self.H1COLOR,
margintop=self.H1MARGINTOP,
marginbottom=self.H1MARGINBOTTOM)
s.addStyle('h2',
fontsize=self.H2SIZE,
lineheight=self.H2LINEHEIGHT,
color=self.H2COLOR,
margintop=self.H2MARGINTOP,
marginbottom=self.H2MARGINBOTTOM)
s.addStyle('h6', fontfamily=self.BODYFAMILY)
s.addStyle('code',
fontfamily=self.CODEFAMILY,
fontsize=Em(1.1),
color=Color('#333'),
paddingleft=Em(0.25),
paddingright=Em(0.25))
s.addStyle('pre', margintop=0, marginbottom=Em(1.5))
s.addStyle('row', color=self.ROWCOLOR)
s.addStyle('.error', color='red', backgroundcolor=Color('red'))
return s
def showClass(self, b, cls):
b.div(class_="label",
marginleft=Em(3),
width='20%',
float=self.LEFT,
clear=self.BOTH,
display=self.BLOCK,
bordertop='1px solid black',
backgroundcolor='#EEEEEE')
b.h3(fontsize=Em(1.5), lineheight=Em(1.4))
b.span(class_="classSource", color='green')
b.text('class')
b._span()
b.text(cls.__name__)
b._h3()
#for name, obj in inspect.getmembers(module):
# method test: if inspect.
b._div()
b.div(width='74%', float=self.LEFT, backgroundcolor='#DDDDDD')
if hasattr(cls, '__doc__') and cls.__doc__:
try:
b.text(cls.__doc__)
except Exception, e:
b.text( ` e `)
print e
def buildBlock(self, b):
u"""Build the block of a column. Note that for clarity fontsize and lineheight are defined
for each part separated, relation the overall container fontsize and lineheight.
Classes inheriting from <b>Column</b> should implement <b>self.buildBlock</b>."""
s = self.style
colClass = self.getColClass(s.colWidth)
b.block(self)
b.div(class_=colClass,
marginright=s.colMarginRight,
marginleft=s.colMarginLeft,
margintop=s.colMarginTop or Em(1),
paddingleft=s.paddingLeft or 0,
float=s.colFloat,
display=s.colDisplay,
minheight=s.colMinHeight,
media=Media(max=C.M_MOBILE,
display=C.BLOCK,
float=C.NONE,
width=C.AUTO,
marginleft=0,
marginright=0,
paddingleft=Em(0.5),
paddingright=Em(0.5)))
self.buildColumn(b)
b._div(comment=colClass)
b._block(self)
def buildPStyle(self, b):
# <footnote>
s = self.style
b.sup(class_=C.CLASS_FOOTNOTE, top=s.footnoteTop or Em(-0.5),
fontsize=s.footnoteFontSize or Em(0.8), position=s.footnotePosition or C.RELATIVE,
verticalalign=s.footnoteVerticalAlign or C.BASELINE)
b._sup()
b.em(fontweight=s.emWeight or C.BOLD)
b._em()
def buildArticleTop(self, b, article, chapterIndex):
u"""Build the top of the article: type, title, author, etc. on the first page, if index is <b>0</b>.
For all other pages build a smaller version of the top."""
s = self.style
class_ = C.CLASS_ARTICLETOP
b.div(class_=class_, float=C.LEFT, width=C.C100, paddingtop=Em(0.5))
# Poster image
if chapterIndex == 0 and s.showPoster:
b.img(class_=C.CLASS_AUTOWIDTH, src=article.poster)
# Article category
if chapterIndex == 0 and article.category: # Text on text
b.a(href='/%s-%s' % (C.PARAM_CATEGORY, article.category))
b.h5(fontsize=s.categorySize, lineheight=s.categoryLineHeight, color=s.categoryColor,
fontweight=s.categoryWeight, margintop=Em(1), display=C.BLOCK)
b.text(article.category)
b._h5()
b._a()
# Article title or name (on respectively the first chapter page or the rest of the pages.
if chapterIndex == 0: # Show large title on the chapter first page of the article
b.h2(class_='articleTitle0', fontsize=s.titleSize, lineheight=s.titleLineHeight,
color=s.titleColor, marginbottom=Em(0.2), display=C.BLOCK)
b.text(article.name)
b._h2()
else: # Show smaller title on the rest of the pages
b.h2(class_='articleTitle1', fontsize=s.nameSize, lineheight=s.nameLineHeight,
color=s.nameColor, marginbottom=Em(0.2), display=C.BLOCK)
b.text(article.name)
b._h2()
# Author
if chapterIndex == 0 and article.author: # Test if there is an author defined.
b.a(href='/%s-%s' % (C.PARAM_AUTHOR, article.author))
b.h5(fontsize=s.authorSize, fontweight=s.authorWeight, authorcolor=s.authorColor,
display=C.BLOCK)
b.text('By %s' % article.author)
b._h5()
b._a()
# Chapter title
chapterTitle = self.adapter.getChapterTitleByIndex(article, chapterIndex)
if chapterIndex == 0: # Show large title on the chapter first page of the article
b.h3(class_='chapterTitle0', fontsize=s.chapterTitleSize0, color=s.chapterTitleColor0,
margintop=s.chapterTitleMarginTop0, marginbottom=s.chapterTitleMarginBottom0)
if chapterTitle is not None:
b.text(chapterTitle.text)
#self.buildElement(b, chapterTitle)
b._h3()
else: # Other chapter pages
b.h3(class_='chapterTitle1', fontsize=s.chapterTitleSize1, color=s.chapterTitleColor1,
margintop=s.chapterTitleMarginTop1, marginbottom=s.chapterTitleMarginBottom1)
if chapterTitle is not None:
b.text(chapterTitle.text)
#self.buildElement(b, chapterTitle)
b._h3()
b._div(comment=class_)
def _buildPStyle(self, b):
u"""Private method. Build the style parameters of a paragraph tag."""
# <footnote> inside article XML
s = self.style
b.sup(class_=self.C.CLASS_FOOTNOTE,
top=s.footnoteTop or Em(-0.5),
fontsize=s.footnoteFontSize or Em(0.8),
position=s.footnotePosition or self.C.RELATIVE,
verticalalign=s.footnoteVerticalAlign or self.C.BASELINE)
b._sup()
b.em(fontweight=s.emWeight or self.C.BOLD)
b._em()
class FeaturedByImage(FeaturedBase):
STYLE_DEFAULT = dict(
# Selection stuff
itemStart=0,
itemCount=
24, # Index of first and last selected feature for this component
# Col layout stuff
colWidth=8, # Default amount of columns for this component
colMarginRight='1.8%',
colMarginLeft=0,
colFloat=C.LEFT,
colMinHeight=1,
colDisplay=C.BLOCK,
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5),
mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5),
mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
mobileWidth=C.AUTO,
)
def buildFeatured(self, b, data):
s = self.style
if s.itemStart < len(data.items):
item = data.items[s.itemStart]
b.div(
class_=self.CLASS_FEATURED_ITEM,
display=s.itemDisplay,
clear=s.itemClear,
marginbottom=s.itemMarginBottom,
width=s.itemWidth,
)
b.a(href='/%s-%s' % (C.PARAM_ARTICLE, item.id))
b.img(class_=(C.CLASS_AUTOWIDTH, 'featuredImage'), src=item.poster)
if s.showLevel:
b.h5(color=s.levelColor,
fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop)
b.text(item.level or s.genericLevel)
b.text(' level')
b._h5()
if s.showName:
b.h4(color=s.nameColor,
fontsize=s.nameSize,
fontweight=s.nameWeight,
lineheight=s.nameLineHeight)
b.text(item.name)
b._h4()
if s.showTopic and item.topic is not None: # Elements must be defined in global style
self.buildElement(b, item.topic)
b._a()
b._div(comment=self.CLASS_FEATURED_ITEM)
def buildBlock(self, b):
b.div(class_='navigation',
marginbottom=Em(2),
width=Perc(100),
backgroundcolor=Color('#EEE'))
for article in self.adapter.getRankedArticles():
if article.title:
b.a(href='/article-%s' % article.id,
fontsize=Em(0.8),
color=Color('#888'))
b.text(article.title)
b._a()
else:
b.text('No title for article "%s"' % article.id)
b.br()
b._div()
def buildChapterNavigation(self, b, article):
u"""If there is more than one chapter in the article, automatically create a chapter
navigation in the sidebar. The title and the summary are links to a page of the same
article, for the defined chapter index."""
s = self.style
chapters = article.chapters
if chapters and len(chapters) > 1:
b.div(class_=self.C.CLASS_CHAPTERNAVIGATION)
b.h4()
b.text(s.chapterLabel)
b._h4()
b.ul()
for index, chapter in enumerate(chapters):
b.li(margintop=Em(0.5))
b.a(
class_=self.C.CLASS_NAME,
href='/%s-%s/%s-%s' % (self.C.PARAM_ARTICLE, article.id,
self.C.PARAM_CHAPTER, index),
)
# TODO: derive chapter title in the proper way from <h2> using re
chapterTitle = chapter.find('./meta/title')
if chapterTitle == -1: # No title, add a default chapter title (not in the right style)
b.text('Chapter %d' % (index + 1))
else:
self.buildElement(b, chapterTitle)
if len(chapters) < s.showChapterSummaryOnMax:
summary = chapter.find(
'./meta/summary') # @@@ Add this as adapter query
if summary != -1:
self.buildElement(b, summary)
b._a()
b._li()
b._ul()
b._div() # .chapterNavigation
def XXXbuildFootNotes(self, b, article):
u"""Build the list of footnotes with links to the position in the article where they are defined."""
s = self.style
chapterIndex = self.getChapterIndex(b, article)
if article.footnotes:
footnotes = article.footnotes[
chapterIndex] # Get footnotes of this chapter
if footnotes:
b.div(class_=self.C.CLASS_FOOTNOTES)
b.h4()
b.text(s.footnoteLabel)
b._h4()
b.ol(
) # Not displaying the index number here, how to solve with style?
for index, footnote in enumerate(footnotes):
b.li(fontsize=Em(0.9), color='red')
b.a(href='#fnref:footnoteRef%d' % (index + 1),
name='fnref:footnote%d' % (index + 1))
# Hard copy the index number, as <ol> doesn't show now.
b.text(
'%d | %s %s' %
(index + 1, footnote.text, s.footnoteArrow
or u'↩')) # Process element, instead of plain text.
b._a()
b._li()
b._ol()
b._div() # .footnotes
def buildBlock(self, b):
b.div(class_='navigation',
paddingleft=Em(2),
paddingright=Em(2),
paddingtop=Em(2),
marginbottom=Em(2),
width=Perc(100),
backgroundcolor=Color('#EEE'))
for article in self.adapter.getRankedArticles():
if article.title:
b.a(href='/article-%s' % article.id,
fontsize=Em(1.5),
color=Color('#478FBE'))
b.text(article.title)
b._a()
if article.summary:
b.div(class_='articleSummary',
fontsize=Em(1),
lineheight=Em(1.5),
width=Perc(90))
b.text(article.summary)
b._div()
else:
b.text('No title for article "%s"' % article.id)
b.br()
b._div()
def buildDoc(self, b, module):
u"""
Uses the inspect module to extract documentation from objects. Skips boring classes.
"""
modulePath = module.__file__.replace('/__init__.pyc', '')
b.h1(fontsize=Em(2), color='#202020', lineheight=Em(1.4))
b.text(modulePath.replace('&', u'→'))
b._h1()
# Recursively collect all classes
modules = self.getModules('xierpa3', module)
for m in modules:
b.h2(fontsize=Em(1.5), lineheight=Em(1.4))
b.text(m.__name__)
b._h2()
classes = self.getClasses(m)
if len(classes):
for cls in classes:
self.showClass(b, cls)
def buildBlock(self, b):
b.div(class_=self.getClassName(),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(40),
maxwidth=700,
minwidth=300,
backgroundcolor=Color('#DDD'),
padding=Em(0.5),
fontfamily=BODYFAMILY,
textalign=self.C.CENTER)
# Still doing content and page identifiers directly, without adapter, in this example.
b.text(' | ')
for pageId in HelloWorldPages.PAGES:
# Making a reference to the page class is enough to build the url.
b.a(href='/' + pageId, fontsize=Em(1), color=Color('#444'))
b.text(pageId.capitalize()
) # Make simple label in the menu from page id..
b._a()
b.text(' | ')
b._div()
def buildPosterStyle(self, b):
s = self.style
b.div(
class_=self.getClassName(),
width=s.width,
backgroundcolor=s.backgroundColor,
display=s.display,
float=s.float,
padding=s.padding,
media=Media(max=self.C.M_MOBILE_MAX,
width=s.widthMobile,
display=s.displayMobile,
float=s.floatMobile),
)
b.div(
class_=self.C.CLASS_FEATUREDITEM,
display=s.itemDisplay,
backgroundcolor=s.itemBackgroundColor,
padding=Em(1.6),
#style='background-repeat:no-repeat;background-size:cover;',
clear=s.itemClear,
marginbottom=s.itemMarginBottom,
margintop=s.itemMarginTop,
media=Media(max=self.C.M_MOBILE_MAX,
#style='background-size:auto'
),
)
b.h1(color=Color('white'),
fontfamily='Georgia',
fontsize=Em(4),
fontweight=self.C.BOLD,
textshadow=Shadow())
b._h1()
if s.showSubtitle:
b.h2(color=Color('yellow'),
fontsize=Em(2),
fontweight=self.C.BOLD,
textshadow=Shadow())
b._h2()
b._div(comment=self.C.CLASS_FEATUREDITEM)
b._div()
def buildBlock(self, b):
u"""Build a content base class. Inherited by specific HelloWorld... classes
that define the method <b>self.helloWorldText(b). In this example the CSS parameter
are still defined inside the block. Different from the real usage of BluePrint API parameter,
that allow modification from including components or inheriting components."""
b.div(class_=self.getClassName(),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width='70%',
maxwidth=700,
minwidth=300,
backgroundcolor='#222',
padding=Em(0.5),
fontfamily=BODYFAMILY,
fontsize=Em(4),
textalign=self.C.CENTER,
lineheight=Em(1.4))
self._helloWorldText(b)
b._div()
b.div(class_=self.C.CLASS_CAPTION,
color=Color('#888'),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(70),
maxwidth=700,
minwidth=300,
paddingleft=Em(0.5),
fontfamily=BODYFAMILY,
fontsize=Em(0.8),
textalign=self.C.CENTER,
lineheight=Em(1.4),
fontstyle=self.C.ITALIC)
b.text(
'Intentionally non-responsive page example. Generated by Xierpa3.')
b._div()
def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with <b>b</b> as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements."""
b.div(class_='column', color='#222', margin=Margin(0, C.AUTO, 0, C.AUTO),
width='50%', maxwidth=700, minwidth=300, backgroundcolor='#EEE',
padding=Em(2), fontfamily='Georgia', fontsize=Em(1),
lineheight=Em(1.4),
media=Media(max=C.M_MOBILE, margin=0))
# Since the self.adapter.getArticle answers an article that already
# includes XHTML tags, we cannot do the styling there. In order to
# define the unique CSS styles, a blank document content is created
# for the CssBuilder to evaluate, so we have all the definitions inside
# div.column, in case they are used in the article.
if b.isType(C.TYPE_CSS):
self.buildCssColumnTemplate(b)
else:
for data in self.adapter.getFeaturedArticles(self):
# Build the headline without style attribute, as these are already defined
# in the self.buildCssColumnTemplate call.
b.h1()
b.text(data.headline)
b._h1()
if data.image:
# Build the image that came with the featured article, if it exists.
# Make it class autowidth to solve the width="100%" incompatibility
# between browsers.
b.img(src=data.image, class_=C.CLASS_AUTOWIDTH)
# Output the rest of the featured article.
b.text(data.item)
# Add some more volume to the blurb article.
data = self.adapter.getArticle(self)
b.h2()
b.text(data.headline)
b._h2()
for item in data.items:
b.text(item)
b._div()
def buildArticleSideBarStyle(self, b):
u"""Build the styles for the articles side bar. # @@@ Clean up, using model for article side bar?"""
s = self.style
# <h2>Featured</h2>
b.h3()
b._h3()
# <ul><li>...</li></ul>
b.ul()
b.li(backgroundcolor=s.mobileChapterButtonColor)
# <a>Chapter name</a>
b.h2(fontsize=Em(2),
lineheight=Em(1.2),
marginbottom=Em(0.2),
margintop=Em(0.2))
b.a(fontsize=s.summaryNameSize, color=s.mobileChapterButtonColor)
b._a()
b._h2()
b._li()
b._ul()
b._div(comment=self.C.CLASS_MOBILECHAPTERNAVIGATION
) # Article mobile chapter navigation
# <div class="chapterNavigation">
b.div(class_=self.C.CLASS_CHAPTERNAVIGATION,
marginbottom=Em(0.5),
display=s.mobileContainerDisplay,
media=Media(max=self.C.M_MOBILE_MAX, display=self.C.NONE))
b.h4(fontsize=Em(1.1))
b._h4()
b.ul()
b.li()
# <a>Chapter name</a>
# TODO: h2 margintop not working?
b.a(fontsize=s.summaryNameSize, color=s.summaryNameColor)
b.h2(fontsize=s.chapterNameSize,
color=s.chapterNameColor,
lineheight=Em(1.2),
marginbottom=Em(0.2),
margintop=Em(0.4))
b._h2()
b._a()
b._li()
b._ul()
def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with <b>b</b> as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements.
Building the styled 2 text blocks, written out with duplicated values,
as example how this works. See other examples for approaches with more
cascading styled hierarchy."""
# For the showing of this example, the parameters in the column div are hard coded.
# Normally a components should allow access to many of the attributes through the
# class dictionary cls.BLUEPRINT, which is a BluePrint instance.
# See the example “HelloWorldBluePrint” for how this works.
b.div(class_=self.getClassName(), margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
color=Color('orange'), # Translate HTML/CSS color to more reliable herx value.
width=Perc(70), # Width of 70%
maxwidth=700, minwidth=300, backgroundcolor=Color('#222'),
padding=Em(0.5), fontfamily=BODYFAMILY, fontsize=Em(4), textalign=self.C.CENTER,
lineheight=Em(1.4))
b.text('Hello world.')
b._div()
b.div(class_='caption', color=Color('#888'), margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(70), # Width of 70%
maxwidth=700, minwidth=300,
paddingleft=Em(0.5), fontfamily=BODYFAMILY, fontsize=Em(0.8), textalign=self.C.CENTER,
lineheight=Em(1.4), fontstyle=self.C.ITALIC)
b.text('Intentionally non-responsive page example. Generated by Xierpa3.')
b._div()
class Footer(Container):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Container.C
BLUEPRINT = BluePrint(
# Layout stuff
colDisplay=C.BLOCK,
colClear=C.BOTH,
colMarginBottom=Em(0.5),
colColor=None,
colMarginRight='1.8%',
colMarginLeft=0,
colFloat=C.LEFT,
colMinHeight=1,
# Layout stuff
colWidth=12, # Default amount of columns for this component
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5),
mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5),
mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
mobileWidth=C.AUTO,
)
def buildBlock(self, b):
s = self.style
colClass = self.getColClass(s.colWidth)
b.block(self)
b.div(class_=colClass,
float=s.logoFloat,
marginleft=s.marginLeft,
marginright=s.marginRight,
margintop=s.marginTop,
marginbottom=s.marginBottom)
b._div(comment=colClass)
b._block(self)
def buildColumn(self, b):
u"""Build the article column. The article data is derived from the adapter by matching with the hard coded url pattern
(@$url@ field in the article source) or with the @b.getCurrentArticleId()@, which is @/article-[articleId]@ in the
url of the page."""
s = self.style
article = self.adapter.getArticle(id=b.getCurrentArticleId(),
url=b.e.path)
b.div(
class_=self.getClassName(),
width=Perc(70), #s.width,
float=self.C.LEFT,
paddingRight=s.
gutter, #marginright=s.gutter, # Gutter between main column and article side bar.
marginright=0,
media=Media(max=self.C.M_MOBILE_MAX,
width=self.C.AUTO,
float=self.C.NONE,
paddingleft=Em(0.5),
paddingright=Em(0.5),
marginright=0),
)
if article is None:
# If not article defined, then this must be a call for building the CSS.
# Make the switch to run as style builder.
self.buildArticleStyle(b)
else:
self.buildArticleData(b, article)
# Build blog response form, if required.
if s.blogResponse and article is not None and article.blogresponse == 'True':
b.div(class_=self.C.CLASS_BLOGRESPONSE,
width=Perc(100),
backgroundcolor=Color('#888'))
# TODO: Add blog response form here.
b.text('[Develop Blog Response here] ' * 20)
b._div(comment=self.C.CLASS_BLOGRESPONSE)
b._div()
def baseComponents(self):
# Import current example site, as anchor for the article files.
from xierpa3.sites import doingbydesign
# Root path where to find the article Simples wiki file for this example page.
articleRoot = TX.module2Path(doingbydesign) + '/files/articles/'
adapter = DbDAdapter(
articleRoot) # Preferred adapter class for articles in this site.
logo = Logo(text='Doing by Design',
fontFamily='Impact',
color=Color('#888'),
fontSize=Em(1.8))
menu = Menu()
mobileNavigation = DbDMobileNavigation()
article = Article()
featuredByImage = FeaturedByImage(start=0,
width=Perc(65.4),
showTitle=False,
showHeadline=False,
showTopic=False)
featuredByText = FeaturedByText(start=0, width=Perc(30.75))
# Containers
top = Top(components=(logo, menu),
media=Media(max=self.C.M_MOBILE_MAX, display=self.C.NONE))
featured = Featured(components=(featuredByImage, featuredByText),
backgroundColor=Color('#262c37'))
section = Section(components=(featuredByImage, ))
mainContent = MainContent(components=article)
footer = Footer(components=(menu))
homePage = Page(name=self.C.TEMPLATE_INDEX,
components=(mobileNavigation, top, featured, section,
mainContent, footer),
css=self.C.URL_CSS,
fonts=self.C.URL_FONTS,
js=self.URL_JAVASCRIPT,
favicon=self.C.URL_FAVICON,
adapter=adapter)
articlePage = Page(name=self.C.TEMPLATE_ARTICLE,
comoonents=(mobileNavigation, top, article, footer),
css=self.C.URL_CSS,
fonts=self.C.URL_FONTS,
js=self.URL_JAVASCRIPT,
favicon=self.C.URL_FAVICON,
adapter=adapter)
return [homePage, articlePage]
def buildBlock(self, b):
s = self.style
data = self.adapter.getMenu(id='home') # Get data for home page from adapter.
b.block(self) # div.mobileNavigation
b.div(class_=(self.C.CLASS_CONTAINER, self.className), display=s.display,
backgroundcolor=s.backgroundColor, width=s.width,
marginleft=s.marginLeft, marginright=s.marginRight,
paddingleft=s.paddingLeft, paddingright=s.paddingRight,
media=(
Media(max=self.C.M_MOBILE_MAX, display=s.displayMobile),
)
)
b.snippet(self, 'navigation-mobile') # Allow PHP to create a snippet file from this block.
colClass = self.getColClass(s.colWidth)
#b.text(data.loop) # In case there is PHP looping code. Skip for CSS
b.div(class_=colClass, width=self.C.AUTO, float=self.C.NONE, marginleft=Em(0.5),
marginright=Em(0.5), paddingleft=Em(0.5), paddingright=Em(0.5))
b.div(id=self.C.ID_MOBILENAVWRAP, width=s.navWidth, display=s.navDisplay, zindex=s.navZIndex)
b.div(id=self.C.ID_MENUICON, class_=self.C.CLASS_MENU, color=Color(self.C.WHITE),
height=26, width=56, paddingtop=Em(0.6), cursor='pointer',
display=self.C.INLINEBLOCK, marginright=0, top=0, left=0, fontsize=Px(13))
b.img(src=s.menuIconUrl,
padding=0, margin=0, verticalalign=self.C.MIDDLE, maxwidth=Perc(50), height=self.C.AUTO)
b._div(comment='#'+self.C.ID_MENUICON) # #menu-icon
if data.menuItems is None:
b.error('No items in the adapter')
else:
b.ul(id=self.C.ID_NAV, backgroundcolor=s.menuListBackgroundColor,
display=self.C.NONE, clear=self.C.BOTH, position=self.C.ABSOLUTE, top=s.menuHeight-5,
width=Perc(100), zindex=Z(2000), padding=0, margin=0, liststyletype=self.C.NONE, left=0,
textalign=self.C.CENTER)
homeArticle = self.adapter.getArticle(id='home')
for menuId in TX.commaSpaceString2WordList(homeArticle.menu):
menuArticle = self.adapter.getArticle(id=menuId)
url = menuArticle.url
if url is None:
url = '/%s-%s' % (self.C.PARAM_ARTICLE, menuId)
b.li(fontsize=s.listFontSize, paddingtop=Em(1.2), width=Perc(100), liststyletype=self.C.NONE,
borderbottom=Border('1 solid white'), height=36, backgroundcolor=Color('#4890BC'))
b.a(href=url, color=Color('#E8E8E8'))
b.text(menuArticle.name or 'Untitled') # Show full name, otherwise use b.text(menu.tag or menu.name)
b._a()
b._li()
b._ul()
b._div(comment=self.C.ID_MOBILENAVWRAP)
#b.a(href='/home', color='#E8E8E8')
#b.text('Doing by Design')
#b._a()
b._div(comment=self.C.CLASS_12COL)
#b.text(data._loop) # In case there is PHP looping code. Skip for CSS
b._snippet(self) # In case PHP saved this block as snippet.
b._div() # Final comment is automatic from component.selector
b._block(self) # div.mobileNavigation
class Footer(Container):
STYLE_DEFAULT = dict(
# Layout stuff
colDisplay=C.BLOCK,
colClear=C.BOTH,
colMarginBottom=Em(0.5),
colColor=None,
colMarginRight='1.8%',
colMarginLeft=0,
colFloat=C.LEFT,
colMinHeight=1,
# Layout stuff
colWidth=12, # Default amount of columns for this component
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5),
mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5),
mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
mobileWidth=C.AUTO,
)
def buildBlock(self, b):
s = self.style
colClass = self.getColClass(s.colWidth)
b.block(self)
b.div(class_=colClass,
float=s.logoFloat,
marginleft=s.marginLeft,
marginright=s.marginRight,
margintop=s.marginTop,
marginbottom=s.marginBottom)
b._div(comment=colClass)
b._block(self)
def buildBlock(self, b):
u"""Build the specimen column"""
s = self.style # Copy from inherited BluePrints with redefined user attributes.
b.div(class_=self.C.CLASS_COLUMN, color=s.color,
margin=s.margin, width=s.width, maxwidth=s.maxWidth, minwidth=s.minWidth,
backgroundcolor=s.backgroundColor,
padding=s.padding, fontfamily=s.fontFamily, fontsize=s.fontSize,
lineheight=s.lineheight,
# Remove margins on mobile, showing the column on full screen width.
media=Media(max=self.C.M_MOBILE_MAX, margin=s.marginMobile, width=s.widthMobile,
maxwidth=s.maxWidthMobile, minwidth=s.minWidthMobile),
)
# Add div.row to allow padding, without making the main column div
# grow outside the parent boundaries.
b.div(class_=self.C.CLASS_ROW, padding=s.rowPadding)
b.h1(fontfamily=s.h1FontFamily, fontsize=s.h1FontSize, lineheight=s.h1LineHeight,
marginbottom=s.h1MarginBottom)
b.text('WebType ' + self.SPECIMENFAMILY[1:-1])
b._h1()
for n in range(s.specimentSmall, s.specimenLarge):
b.div(class_='specimen%02d' % n, width=s.specimenWidth, fontsize=Px(n),
lineheight=s.specimentLineHeight, fontfamily=self.HEADFAMILY)
b.span(class_='size%02d' % n, fontsize=Px(s.specimentSizeIndicator),
color=s.sizeLabelColor, fontfamily=self.BODYFAMILY)
b.text('%d px' % n)
b._span()
b.text(u'ABCDEFGHIJKLM abcdefghijklm €$@#123')
b._div()
# Add reference to sponsored Webtype webfonts.
b.hr()
b.a(href='//webtype.com', color=s.color, fontfamily=self.BODYFAMILY, fontsize=Em(0.8),
lineheight=Em(1.4), target='external')
b.text('The typefaces in this example %s and %s are sponsored by <Webtype>' % (self.BODYFAMILY, self.HEADFAMILY))
b._a()
# Close the row
b._div(comment=self.C.CLASS_ROW)
b._div()
def baseStyle(self):
s = self.newStyle() # Answer root style without selector
s.addStyle('body', fontfamily=self.CSS_BODYFAMILY, fontsize=self.CSS_BODYSIZE,
backgroundcolor=self.CSS_BGCOLOR, lineheight=self.CSS_BODYLEADING)
s.addStyle('h1, h2, h3, h4, h5, p.lead', fontfamily=self.CSS_HEADFAMILY)
s.addStyle('h6', fontfamily=self.CSS_BODYFAMILY)
s.addStyle('div', float=self.C.LEFT, width=Perc(100))
s.addStyle('a, a:link', color=self.CSS_ALINKCOLOR)
s.addStyle('a:visited', color=self.CSS_AVISITEDCOLOR)
s.addStyle('a:hover', color=self.CSS_AHOVERCOLOR)
s.addStyle('a:active', color=self.CSS_ACTIVECOLOR)
s.addStyle('div.' + self.C.CLASS_1COL, margin=Em(0.5), float=self.C.LEFT, width=Perc(98 / 12))
s.addStyle('div.' + self.C.CLASS_2COL, margin=Em(0.5), float=self.C.LEFT, width=Perc(98 * 2 / 12))
s.addStyle('div.' + self.C.CLASS_4COL, margin=Em(0.5), float=self.C.LEFT, width=Perc(30)) #(98 * 4 / 12))
s.addStyle('div.' + self.C.CLASS_8COL, margin=Em(0.5), float=self.C.LEFT, width=Perc(98 * 8 / 12))
s.addStyle('div.' + self.C.CLASS_12COL, margin=Em(0.5), float=self.C.LEFT, width=Perc(100))
s.addStyle('div.' + self.C.CLASS_LAST, marginright=Em(0))
s.addStyle('ul', display=self.C.BLOCK)
s.addStyle('li', display=self.C.BLOCK)
s.addStyle('ol', liststyletype=self.C.DECIMAL)
return s
def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with <b>b</b> as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements.
Building the styled 2 text blocks, written out with duplicated values,
as example how this works. See other examples for approaches with more
cascading styled hierarchy."""
b.div(class_='column', color='yellow', margin=Margin(0, C.AUTO, 0, C.AUTO),
width='50%', maxwidth=700, minwidth=300, backgroundcolor='#222',
padding=Em(0.5), fontfamily='Georgia', fontsize=Em(4), textalign=C.CENTER,
lineheight=Em(1.4))
b.text('Hello world.')
b._div()
b.div(class_='caption', color='#888', margin=Margin(0, C.AUTO, 0, C.AUTO),
width='50%', maxwidth=700, minwidth=300,
paddingleft=Em(0.5), fontfamily='Georgia', fontsize=Em(0.8), textalign=C.CENTER,
lineheight=Em(1.4), fontstyle=C.ITALIC)
b.text('Generated by Xierpa3.')
b._div()
class Logo(Component):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Component.C
BLUEPRINT = BluePrint(
# Layout stuff
colWidth=4,
doc_colWidth=u'Default amount of columns for this component.',
maxWidth=Perc(100),
doc_maxWidth=u'Maximal width of the component',
minWidth=Perc(100),
doc_minWidth=u'Minimal width of the component',
# Logo data can be set as through text/style attribute or through the adapter.
# The optional url creates a link from the logo, e.g. to the home page.
text=None,
doc_text=u'Optional text of the logo. Otherwise query the adapter.',
src=None,
doc_src=u'Optional src for logo image. Otherwise query the adapter.',
url=None,
doc_url=u'Optional url for logo link. Otherwise query the adapter.',
# Logo stuff
width=280,
doc_logoWidth=u'Logo width',
backgroundColor=None,
doc_backgroundColor=u'Background color of the logo component.',
height=C.AUTO,
doc_height=u'Logo height',
marginTop=0,
doc_marginTop=u'Logo margin top',
marginLeft=0,
doc_marginLeft=u'Logo margin left',
marginRight=Perc(1.8),
doc_marginRight=u'Logo margin right',
marginBottom=0,
doc_marginBottom=u'Logo margin bottom',
logoFloat=C.LEFT,
doc_logoFloat=u'Logo div float',
# H2 heading, in case style.text is defined and not style.src (for an image)
fontFamily=C.LOGOFAMILY,
doc_fontFamily=u'h2 font family',
fontSize=Em(2.9),
doc_fontSize=u'h2 Logo font size',
lineHeight=Em(1.4),
doc_lineHeight=u'h2 leading',
fontWeight=C.BOLD,
doc_fontWeight=u'h2 font weight',
fontStyle=None,
doc_fontStyle=u'h2 font style',
paddingTop=Em(0.2),
doc_paddingTop=u'h2 padding top',
paddingBottom=Em(0.2),
doc_paddingBottom=u'h2 padding bottom',
color=Color('#323A47'),
doc_color=u'h2 color',
)
def buildBlock(self, b):
s = self.style
colClass = self.getColClass(s.colWidth)
b.div(class_=colClass,
float=s.logoFloat,
marginleft=s.marginLeft,
backgroundcolor=s.backgroundColor,
marginright=s.marginRight,
margintop=s.marginTop,
marginbottom=s.marginBottom)
# @text: text to show instead of the logo image.
# @url: url of href link. If None no link is made
# @src: url of the image source.
data = self.adapter.getLogo()
if s.text:
data.text = s.text
data.src = None
if s.src:
data.src = s.src
data.text = None
if s.url:
data.url = s.url
if data.url:
b.a(href=data.url)
if data.src:
b.img(src=data.src,
width=s.width,
maxwidth=s.maxWidth,
height=s.height)
else:
b.h2(
fontsize=s.fontSize,
lineheight=s.lineHeight,
fontfamily=s.fontFamily,
fontWeight=s.h2Weight,
fontStyle=s.h2Style,
color=s.color,
paddingtop=s.paddingTop,
paddingbottom=s.paddingBottom,
)
b.text(data.text)
b._h2()
if data.url:
b._a()
b._div(comment=colClass)
class TextileArticles(Theme):
u"""Show article pages for the amount of articles in @files/articles@, with a top navigation,
article column and article side bar. The menu items are define in the @home.txt@ article source."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Theme.C
TITLE = u'The Textile Example Page' # Use as title of window.
BODYSIZE = Px(16)
BODYLEADING = Em(1.4)
BODYCOLOR = '#333333'
LINKCOLOR = '#4890BE'
H1SIZE = Em(2.8)
H1LINEHEIGHT = Em(1)
H1MARGINTOP = Em(0.5)
H1MARGINBOTTOM = Em(0.5)
H1COLOR = '#666666'
H2SIZE = Em(2)
H2LINEHEIGHT = Em(1.1)
H2MARGINTOP = Em(0.5)
H2MARGINBOTTOM = Em(0.5)
H2COLOR = '#333333'
ROWCOLOR = '#BEBEBE'
BODYFAMILY = '"Hermes FB Book", Verdana, sans'
HEADFAMILY = '"Hermes FB Semibold", Impact, sans'
CODEFAMILY = 'Courier, monospace'
CC = Theme # Inherit the constants from the parent class.
URL_FONTS = [
# Note that this package contains the a set of latest featured font, and may be changed in the future.
# If using the font in this package, safest is to refer to the functional constant names below,
# instead of making a direct reference to the family name.
# Of course, taking your own account at //www.webtype.com is even better :)
C.
XIERPA3_DEMOFONTS, # Webtype @fontface fonts, to be used for localhost demo purposes.
]
def baseStyle(self):
s = self.newStyle() # Answer root style without selector
s.addStyle('body',
fontfamily=self.BODYFAMILY,
fontsize=self.BODYSIZE,
color=self.BODYCOLOR,
lineheight=self.BODYLEADING)
s.addStyle('a', color=self.LINKCOLOR)
s.addStyle('h1, h2, h3, h4, h5, p.lead',
fontfamily=self.HEADFAMILY,
color=self.BODYCOLOR)
s.addStyle('h1',
fontsize=self.H1SIZE,
lineheight=self.H1LINEHEIGHT,
color=self.H1COLOR,
margintop=self.H1MARGINTOP,
marginbottom=self.H1MARGINBOTTOM)
s.addStyle('h2',
fontsize=self.H2SIZE,
lineheight=self.H2LINEHEIGHT,
color=self.H2COLOR,
margintop=self.H2MARGINTOP,
marginbottom=self.H2MARGINBOTTOM)
s.addStyle('h6', fontfamily=self.BODYFAMILY)
s.addStyle('code',
fontfamily=self.CODEFAMILY,
fontsize=Em(1.1),
color=Color('#333'),
paddingleft=Em(0.25),
paddingright=Em(0.25))
s.addStyle('pre', margintop=0, marginbottom=Em(1.5))
s.addStyle('row', color=self.ROWCOLOR)
s.addStyle('.error', color='red', backgroundcolor=Color('red'))
return s
def baseComponents(self):
u"""Create the component instances"""
# Import current example site, as anchor for the article files.
from xierpa3.sites.examples import textilearticles
# Root path where to find the article Simples wiki file for this example page.
articleRoot = TX.module2Path(textilearticles) + '/files/articles/'
adapter = ArticleAdapter(
articleRoot) # Preferred adapter class for articles in this site.
# Create navigation instance, to choose between the available articles.
menu = Menu(adapter=adapter)
menuContainer = Container(components=menu)
# Create the article component to contain articles answered by the adapter.
#article = SimplexArticle(adapter=adapter)
article = Article(width=Perc(70),
adapter=adapter,
showPoster=True,
splitChapters=False)
articleSideBar = ArticleSideBar(width=Perc(22), adapter=adapter)
featuredArticles = FeaturedByImage(
width=Perc(22),
adapter=adapter,
# Example to overwrite the default BluePrint parameter titleColor
titleColor=Color('red'))
#featuredByImage = FeaturedByText(widht=Perc(22), adapter=adapter)
# Make main page container for the article column
container = Container(components=(
article,
articleSideBar,
featuredArticles,
#featuredByImage
))
# The class is also the page name in the url.
homePage = Page(class_=self.C.TEMPLATE_INDEX,
name=self.C.TEMPLATE_INDEX,
fonts=self.URL_FONTS,
title=self.TITLE,
css=self.C.URL_CSS,
components=(menuContainer, container))
return [homePage]
def make(self, root=None):
u"""The instance of this class builds CSS and HTML files at the optional path <b>root</b>.
If not defined, then the default ~/Desktop/Xierpa3Examples/[component.name] is used as export path,
as set by Builder.DEFAULT_ROOTPATH"""
cssBuilder = CssBuilder()
self.build(cssBuilder)
cssBuilder.save(self, root)
htmlBuilder = HtmlBuilder()
self.build(htmlBuilder)
return htmlBuilder.save(self, root)
def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with **b** as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements.
Building the styled 2 text blocks, written out with duplicated values,
as example how this works. See other examples for approaches with more
cascading styled hierarchy."""
b.div(
class_=self.getClassName(),
margin=Margin(0, self.C.AUTO),
color=Color('yellow'), # Translate color name to hex
width=Perc(90),
maxwidth=900,
minwidth=300,
backgroundcolor=Color('#222'),
paddingtop=Em(0.5),
paddingbottom=Em(0.5),
fontfamily=self.CSS_BODYFONT,
fontsize=Em(3),
textalign=self.C.CENTER,
lineheight=Em(1.2),
# Now define the @media parameters, where they belong: inside the definition of the element.
# The media parameters are collected and sorted for output at the end of the CSS document.
media=(
# Example for table, show lighter background, change color of text and smaller size.
Media(
min=self.C.M_TABLET_MIN,
max=self.C.M_TABLET_MAX,
backgroundcolor=Color('#444'),
color=Color('orange'), # Translate color name to hex.
margin=0,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE),
# For mobile, even more lighter background, change color of text and smaller size.
Media(
max=self.C.M_MOBILE_MAX,
backgroundcolor=Color('#AAA'),
color=Color('red'), # Translate color name to hex.
margin=0,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE)))
b.text('Hello, world!')
# One of the advantages of using a real programming language to generate
# HTML/CSS code, is that repetitions can be written as a loop. Not necessary
# fewer lines, but more expandable and less redundant distribution of
# knowledge in the code.
# This generates the same result as:
# b.div(class_='c1', display=self.NONE, fontsize=Em(0.5), color=self.WHITE,
# media=Media(min=self.M_DESKTOP_MIN, display=self.BLOCK))
# b.text('Responsive desktop mode.')
# b._div()
# b.div(class_='c2', display=self.NONE, fontsize=Em(0.5), color=self.WHITE,
# media=Media(min=self.M_TABLET_MIN, max=self.M_TABLET_MAX, display=self.BLOCK))
# b.text('Responsive tablet mode.')
# b._div()
# b.div(class_='c3', display=self.NONE, fontsize=Em(0.5), color=self.BLACK,
# media=Media(max=self.M_MOBILE_MAX, display=self.BLOCK))
# b.text('Responsive mobile mode.')
# b._div()
#
data = (
# class, minWidth, maxWidth, text
('c1', self.C.M_DESKTOP_MIN, None, 'Responsive desktop mode.'),
('c2', self.C.M_TABLET_MIN, self.C.M_TABLET_MAX,
'Responsive tablet mode.'),
('c3', None, self.C.M_MOBILE_MAX, 'Responsive mobile mode..'),
)
for class_, minWidth, maxWidth, text in data:
b.div(class_=class_,
display=self.C.NONE,
fontsize=Em(0.5),
color=Color(self.C.WHITE),
background=self.C.NONE,
media=Media(min=minWidth, max=maxWidth,
display=self.C.BLOCK))
b.text(text)
b._div()
b._div()
b.div(
class_=self.C.CLASS_CAPTION,
color=Color('#888'),
width=Perc(100),
maxwidth=700,
minwidth=300,
margin=Margin(0, self.C.AUTO),
paddingtop=Em(0.5),
fontfamily=self.CSS_CAPTIONFONT,
fontsize=Em(0.8),
textalign=self.C.CENTER,
lineheight=Em(1.4),
fontstyle=self.C.ITALIC,
)
b.text('Responsive page generated by Xierpa3.')
b._div()
class Documentation(BaseDocumentation):
u"""The <b>Documentation</b> class implements the standard example shop
with content based on files."""
TITLE = 'Documentation'
SUBTITLE = 'The End of CSS: How to implement Xierpa.'
# LOGO = 'http://%s/%s/logo.png' % (HOST, IMAGES_PATH)
# LOGO = 'http://data.doingbydesign.com.s3.amazonaws.com/_images/logo.png'
LOGO = 'Xierpa3'
SRCLOGO = 'http://data.xierpa.com.s3.amazonaws.com/_images/xierpa_x_green.png'
TEMPLATE_COURSES = 'courses'
TEMPLATE_CATEGORY = 'category'
TEMPLATE_PRODUCTS = 'products'
URL_BACKGROUNDIMAGE = 'http://data.doingbydesign.com.s3.amazonaws.com/_images/articlebackground.png'
URL_FONTS = (
# Google
'http://fonts.googleapis.com/css?family=Bree+Serif',
#'http://fonts.googleapis.com/css?family=Droid+Sans:400,700'
# Webtype project Poynter
#'http://cloud.webtype.com/css/0d2e9f93-9866-45e1-8119-9b678ba5ce23.css'
# Webtype project Doing by Design (Proforma & Rocky)
#'http://cloud.webtype.com/css/d5663b37-b395-4934-9f68-2f7ccd9e8c87.css',
# Topaz (Benton Sans RE)
'http://cloud.webtype.com/css/7aa22aa1-1709-4b55-b95c-3413d3e5280a.css',
)
URL_JAVASCRIPT = [
'http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js',
'js/toggle.js'
]
# Cache the adapter, initialized automatic.
ADAPTER = DocumentationAdapter(root=TX.module2Path(documentation) +
'/files/articles')
CSS_BODYFONT = '"BentonSansRE"'
CSS_HEADFONT = '"BentonSansCond Medium"'
CSS_BODYSIZE = 13 # Fixed anchor for relative Em-based body sizes
CSS_BODYLEADING = Em(1.4)
CSS_BGCOLOR = '#FFFFFF'
CSS_ALINKCOLOR = '#888888'
CSS_AVISITEDCOLOR = '+60%'
CSS_AHOVERCOLOR = '-60%'
CSS_ACTIVECOLOR = '+60%'
MAXWIDTH = 1140
MINWIDTH = 755
def _get_css(self):
# Force building of CSS with valid set of parameters
force = ''
if self.e.form['force']:
force = '/force'
return ['%s/css/site.css' % force]
def _set_css(self, urls):
# Ignore for now?
pass
css = property(_get_css, _set_css)
def baseStyle(self):
s = StyleSet() # Answer root style without selector
s.addStyle('body',
fontfamily=self.CSS_BODYFONT,
fontsize=self.CSS_BODYSIZE,
backgroundcolor=self.CSS_BGCOLOR,
lineheight=self.CSS_BODYLEADING)
s.addStyle('h1, h2, h3, h4, h5, p.lead', fontfamily=self.CSS_HEADFONT)
s.addStyle('h6', fontfamily=self.CSS_BODYFONT)
s.addStyle('div', float=self.FLOAT_LEFT, width=self.C100)
s.addStyle('a, a:link', color=self.CSS_ALINKCOLOR)
s.addStyle('a:visited', color=self.CSS_AVISITEDCOLOR)
s.addStyle('a:hover', color=self.CSS_AHOVERCOLOR)
s.addStyle('a:active', color=self.CSS_AACTIVECOLOR)
s.addStyle('div.' + C.CLASS_1COL,
margin=Em(0.5),
float=C.LEFT,
width='%d%%' % (98 / 12))
s.addStyle('div.' + C.CLASS_2COL,
margin=Em(0.5),
float=C.LEFT,
width='%d%%' % (98 * 2 / 12))
s.addStyle('div.' + C.CLASS_4COL,
margin=Em(0.5),
float=C.LEFT,
width='%d%%' % 30) #(98 * 4 / 12))
s.addStyle('div.' + C.CLASS_8COL,
margin=Em(0.5),
float=C.LEFT,
width='%d%%' % (98 * 8 / 12))
s.addStyle('div.' + C.CLASS_12COL,
margin=Em(0.5),
float=C.LEFT,
width=C.C100)
s.addStyle('div.' + C.CLASS_LAST, marginright=Em(0))
s.addStyle('ul', display=C.BLOCK)
s.addStyle('li', display=C.BLOCK)
s.addStyle('ol', liststyletype=C.DECIMAL)
return s
def baseComponents(self):
logo = Logo(logoSrc=self.SRCLOGO,
logoName=self.LOGO,
color=C.WHITE,
margintop=Em(0.5),
fontsize=Em(2),
fontfamily='AmplitudeComp Medium')
menu = Menu()
socialmedia = SocialMedia(twitterAccount='xierpa',
facebookAccount='xierpa')
header = Header(components=(logo, menu), mobileContainerDisplay=C.NONE)
mobileNavigation = MobileNavigation(
title=self.TITLE) # Is container by itself. Change??
# Articles featured by image
featuredByImage = FeaturedByImage(
) # Featured article on a page. Main photo+link
#featuredByImageList = FeaturedByImageList() # Featured article on a page. List of related links
# Articles featured by summary text
featuredSideText = FeaturedByDiapText(colWidth=4,
itemStart=1,
label='Featured course')
featuredByText = FeaturedByText(itemStart=2, showPoster=False)
featuredByTextList = FeaturedByTextList(itemStart=5)
# Featured black container
bgColor = '#323A47'
featuredImages = Featured(
class_='featuredImages',
components=(featuredByImage, featuredSideText),
#components=(featuredSideText, featuredByImage),
containerBackgroundColor=bgColor)
# Featured text container
bgColor = '#E8E8E8'
featuredTexts = Featured(class_='featuredTexts',
components=(featuredByText,
featuredByTextList),
containerBackgroundColor=bgColor)
# Footer group
footer = Footer(components=(menu, ),
containerBackgroundColor=FOOTERBACKGROUNDCOLOR)
# Article
featuredByTextList = FeaturedByTextList(
) # Default start a featured index 0
article = Container(class_=C.CLASS_ARTICLE,
containerBackgroundImage=self.URL_BACKGROUNDIMAGE,
containerBackgroundRepeat=C.REPEAT,
components=(Article(), socialmedia,
ArticleSideBar(), featuredByTextList))
homePage = Page(name=C.TEMPLATE_INDEX,
components=(mobileNavigation, header, featuredImages,
featuredTexts, footer),
css=self.URL_CSS,
fonts=self.URL_FONTS,
js=self.URL_JAVASCRIPT,
favicon=self.URL_FAVICON)
articlePage = Page(name=C.TEMPLATE_ARTICLE,
components=(mobileNavigation, header, article,
footer),
css=self.URL_CSS,
fonts=self.URL_FONTS,
js=self.URL_JAVASCRIPT,
favicon=self.URL_FAVICON)
return [homePage, articlePage]
